Card Layout (Design) Tutorial with HTML & CSS Grid - Web Design Tutorial
ฝัง
- เผยแพร่เมื่อ 2 พ.ย. 2019
- Link to code:
codepen.io/dcode-software/pen...
In this video tutorial I'll be showing you how to create a card design (or layout) using plain HTML & CSS Grid.
This style of web design is perfect for displaying a bunch of summarised information at once.
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
Follow me on Twitter @dcodeyt!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#html #css #dcode
![[안방1열 직캠4K] 베이비몬스터 치키타 'FOREVER' (BABYMONSTER CHIQUITA FanCam) @SBS Inkigayo 2404707](http://i.ytimg.com/vi/Tn3bGHiBWkg/mqdefault.jpg)
This was so extremely helpful. My god. I was worried the video was going to be too short, and out of date (3 years ago) but it worked perfectly.
Thank you so much, you've helped my understanding of how to do a card layout.
From the depth of my heart ....... Thaaaaaaaaaaaaaaaank you. My day was terrible because of this but right now.... I'm smiling. Such a happy night cos i found this video
i like card layout and I use them quite often so seeing different approach is another good example in my collection :)
thank you for explaining all the concepts as well! I'm completely new to HTML and css and this was a big help!
Thank you! Nice and clean explanation. Just what I looking for. :)
Thank you for your kind help.
That was a fantastic tutorial.
This is a great tutorial. Thank you for making it seem simple. Just what I needed for my project.
great job bruh, it really helps me improving my skils !
Nice! Good explanation and yet simple
it's veryyyy helpful
thank you, highly appreciated
*VERY GOOD tutorial! Thanks for sharing because i learned A LOT! Ill be testing this out soon.*
thank you for the tutorial it helps me a lot
greetings from India, precise and very informative presentation. keep it up.
Thank you so much ✨
Thank you its actually very help full👍👍
Thank You!
Great one
Awesome bro...thanks
Great video !!!
Great tutorial. Did you purposely sneak in the BEM style coding? Or are you planning to flesh it out in a later tutorial? Which would be awesome. Doing a tutorial the way you did this is really teaching multiple subjects, i.e. SCSS/SASS, BEM and gui design structure, without mentioning it. Presenting BEM after this tutorial would be like a 'light bulb' going off in ones head because the seed for such technology was previously planted. It just need time to come to fruition. That's the way we all learn. The majority of us do not get it the first time around. Mostly because we're bombarded with TMI (too much information). Great job!
awesome thankyou
Amazing!
Thanks for your valuable content
You're welcome mate
thank you
Sir this helped me a lot thank you
You are welcome!
Thank you very much
Any time!
Excelente!!
Thank you very much. Can you put navbar using list items (for instance, Home,Contact,Services & Product, and clicking menu items allow you to jump to content page accordingly.
What do I have to change to make it look good with 3 cards per row instead of 4?
It seems to me that this is made for 4 cards per row since 3 per row are not centred...
Exactly what I was looking for! You mistakenly said JavaScript though 😅
Very useful tutorial, Thank you
Thank you and no problem 😁
@@dcode-software Thanks for the great tutorial-video.
Would you mind taking a look at my question above considering an issue when the content in one or more of the cars are longer?
Ya Da Best
If you give an element a width in percentages but its containing div has no width set, does it move up until it finds a div?
Respect :)
Amazing. Ive tried to do this kind of thing with flexbox. Ive ended up with width and gap set to some % and bunch of media queries. It was close but not as perfect as this solution. Ive also tried using width clamp but aparently it doesnt work with flex
Hey Dom can you do a tutorial on range slider & Double range slider using javscript?
@dcode
What do I do when the elements card__content in one or more of the card(s) are longer than in the other(s) and therefore creates this white space underneath the card__info to fill out the space on the cards where the s are shorter?
min-block-size: 210px; in card__content worked for me!
I would like to know as well!!!
Hello , i hope this finds you great.
I have been following through the tutorial using the same technique to make cards for a recipe website but i noticed since each card can vary in content length its making the card differ in height . How can i make all the cards the same height irregardless of different content text . For the video tutorial it was the same exact thing on all cards do it looked all the same...please kindly respond and help me how i can get the problem fixed..Thank you for the great tutorial
What do you do if the text in the cards has different amount of lines? So card 1 has 5 lines of text while card 2 has 7 lines of text and card 3 has 5 lines. There's a button at the bottom, which will be out of alignment with the other cards. How would I fix this?
Good
Hi Great tutorial! I tried to reproduce and everything looks great but for some reason, the light gray box at the bottom doesn't fit to the width of the "card" as if it has some padding. Any idea what that could be? Thank you!
Ok. Never mind... The "card__info" was in the wrong "" Cheers
Hi dcode, After more testing, I was wondering if there's a easy way to keep the "height" of the card even if the "card__content" text has different length? It'd be great if there was a "max" characters for the "card__content" without changing the "height" of the card so it doesn't look too messy ;)
I am trying to recreate this my own way, How do increase the width of the card? I want it a bit wide.
I find keyboard sound satisfying 😖🤣
what if the content is different lengths? really need help on that one.
My first is floating towards the middle of the page and when I try to add another it places it below, rather than next to it, can anyone help? thanks
Having the same problem mate
.cards{
float: left;
...
}
Can you pls pls pls make the same card with user image inside circle between top image and Lorem text centre align?
Sure mate
@@dcode-software did you make that?
Yeah, User Profile Cards
Do we have to use so many div???
Yes!
how to make the coloumns smaller?
thx for the tutorial btw xd
i guess if you play around with the grid-template-columns you would manage to set the size you want
Decrease the min size of the column?
min-block-size: 210px; in card__content worked for me!
now the Q is, how to turn this simple design into another simple cms
post, edit, delete
It will be nice if you will share the source code...
No probs mate, source code is now in the description.
Awesome. Thank U Dom!
Yeap💔💔
this guy never answers comments and says "I'll leave a link" but never does..
this isn't responsive.
but it is...
This is excellent but why can I not expand it to 100% of the VW? It's stuck at 1000px and defies all attempts to expand it for bigger screens.