Link to code:
https://codepen.io/dcode-software/pen/JjjpzLE
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:
https://www.patreon.com/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
source
Thank you its actually very help full👍👍
Nice! Good explanation and yet simple
I am trying to recreate this my own way, How do increase the width of the card? I want it a bit wide.
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 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.
great job bruh, it really helps me improving my skils !
this isn't responsive.
it's veryyyy helpful
thank you, highly appreciated <3
Thank you so much ✨
this guy never answers comments and says "I'll leave a link" but never does..
thank you
greetings from India, precise and very informative presentation. keep it up.
thank you for the tutorial it helps me a lot
Good
Do we have to use so many div???
I find keyboard sound satisfying 😖🤣
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?
now the Q is, how to turn this simple design into another simple cms
post, edit, delete
Excelente!!
Sir this helped me a lot thank you
Great video !!!
how to make the coloumns smaller?
thx for the tutorial btw xd
Thank You!
@dcode
What do I do when the <p> 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 <p>s are shorter?
Thank you for your kind help.
That was a fantastic tutorial.
awesome thankyou
Thanks for your valuable content
Awesome bro…thanks
Thank you very much
Great one
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!
Very useful tutorial, Thank you