CSS e-commerce layout from scratch (with CSS grid & flexbox) - PART 1

Tailwind CSS full e-commerce site with snipcart (includes complete checkout, user accounts for order retrieval, + more!):
www.udemy.com/...
🎓Create a CSS desktop & mobile responsive e-commerce layout with CSS grid & flexbox.
🔔Subscribe if you want more free tutorials like this one! / @webdeveducation
📺[WATCH PART 2 HERE]: • CSS e-commerce layout ...
📱In this video we'll create a responsive HTML & CSS layout for an e-commerce site from scratch, displaying responsive categories using css flexbox, and responsive products using css grid.
📄Github repo (including images):
github.com/tom...
✨Premium courses available at webdeveducatio...
#cssgrid #cssflexbox #csslayout #cssecommerce #ecommercelayout #responsivewebdesign #cssgridtutorial #cssgridlayout

[@WebDevEducation]

Get the NEW Tailwind CSS full e-commerce course now! Includes complete checkout, user accounts for order retrieval, and more!
www.udemy.com/course/tailwind-css-ecommerce/?referralCode=0AE6E6613CA4548E2E1D

[@hermanadu1778]

Hey Tom, Great little video, I have completed your Gatsby JS & Firebase and Gatsby JS & Shopify courses on Udemy, still it was nice to do this tutorial, without all the bells and whistles giving me a clear understanding of flexbox, CSS grid and media queries, for ecommerce layouts. Thanks for sharing.

[@WebDevEducation]

Quick note: at 18:01 the margin: 0 auto; will override the margin-top: 20px for the .featured-products. As it turns out the margin-top wasn't needed anyway as the h2 tag above it has some browser applied margin surrounding it, which negated the need for the margin-top on the .featured-products.

[@chris-adams-tas]

Hi Tom
Thanks for clearly explaining (IMHO) flex-wrap, flex-grow and how min-width behaves in that context.

[@WebDevEducation]

Thanks Chris. I'm glad you found it useful :)

[@melpacheco9288]

this channel is going to grow a lot, very good content

[@WebDevEducation]

Thank you! :)

[@jcamilovillavo]

Thanks for the tutorial, I speak Spanish, however I understood 100%, greetings from Colombia.

[@HassanBachir-zj7ni]

A decent rare tutorial thank you !!

[@WebDevEducation]

Thank you, Hassan 🙏

[@jumasu]

Thank you, this was really nice!

[@WebDevEducation]

Thanks Sudi! 🙏

[@Ferepafa]

Great tutorial.

[@srinathravichandran8796]

This is a great video...I request you to do more ui tutorials of this sort...

[@WebDevEducation]

Thanks! Is there anything specific you'd like to see? :)

[@digigoliath]

Thanks for an enjoyable video. Onward to part 2!!

[@globalfunseeker6733]

Thanks so much for the helpful tutorial. Despite being four years old, it's still very relevant and well constructed.
I have one question, however. The responsive nature of flexbox is clear when setting flex-wrap to wrap. But if you wanted the first DIV to span 100% of the parent container, followed by 3 DIVs measuring 33% in width, how would you do it? In essence, the reverse of what you have presented.
The problem when using percentages is that you can't use the gap function. If, for example, you have two DIVs set to a width of 50%, when you set a gap of 10px, the second DIV wraps. Gap adds to the container width, unlike in Grid. I find it easier to set a percentage value for the first DIV, and flex: 1 for the second. In this case, using gap doesn't interfere with the layout.
Kind regards, Mark

[@OniWithDaHoodie]

i learned allot from this thx liked and subbed you explain really well which some dont take their time to explain properly

[@WebDevEducation]

Thanks for watching!

[@IssaAbramaleem]

Thank you. You are an enabling blessing!

[@WebDevEducation]

Thanks for watching! :)

[@argeelearner3978]

Thanks Amazing video! Thanks for sharing.

[@WebDevEducation]

Thanks!

[@esperatbamgbose]

You made my day.Thank you very much,you made a complex course very simple for people to know.Which country are you situated.

[@WebDevEducation]

I'm glad it helped you! I'm from the UK :)

[@johnpagaoa7468]

good tutorial very straight forward with NO f$##%#^ lound music in the background.

[@WebDevEducation]

haha! thanks mate!

[@Robbe1984]

I wish I had found this video three days ago 😭

[@damislav]

Good tutorial enjoyed very much

[@WebDevEducation]

Thank you! :)

[@adityabhadange1631]

Thanks for the video 👍🏻👍🏻

[@WebDevEducation]

Thanks for watching!

[@InvestorCorner123]

awesome content!

[@WebDevEducation]

Thank you!

[@paulafn8513]

Very helpful 👍

[@bijay7]

awesome... loved it.

[@WebDevEducation]

Thank you!

[@noahperez9631]

I have a question your course Gastby and Shopify. Can I still add shopify apps like currency exchange?

[@WebDevEducation]

If they're backend apps then yes. Any apps that manipulate the front end, then no.

[@samlaye9070]

So goooooooood 👍🏾

[@WebDevEducation]

Thanks Sam!

[@rogerpantil9483]

good tutorial! too fast though, i had to put it at .75 speed

[@WebDevEducation]

Thanks Roger!⚡

[@novanoskillz4151]

lol i had to put it up too 1.7 speed