Create a Landing Page with CSS Grid and Flexbox
Instructor
Stephanie Eckles
It's tempting to pick up a framework which has preselected flexbox or grid as the layout tool of choice, but it's important to learn when and why to use each method. This leads to slimmer stylesheets which results in better site performance, and less likelihood for "hacks" to make one method do what the other does inherently better.
Throughout this collection, we will be progressively styling a responsive landing page template while building your knowledge on when to select grid or flexbox for any layout scenario. Spoiler alert: sometimes the best solution is using both!
Learner Reviews
- Learner2 years agoWhat did you like about this course?
I would've liked some more explanation when CSS rules were just pasted in.
- Andre Roussakoff3 years agoWhat did you like about this course?
Great course for advanced users. Not so for beginners who do not fully understand the Grid and Flex Models. But it make it challenging enough to make hands dirty by trying to get the same result.
- Learner3 years agoWhat did you like about this course?
Just wow!! I love the idea of not using much media query. She created the responsive landing page in 20mn. Really recommend this to beginner and experience developers.
- Learner3 years agoWhat did you like about this course?
I feel a bit overwhelmed with the given base source codes. I hope the instructor spends minutes explaining what we have at first. Anyway, I learn quite a lot.
- Sri-Ni.3 years agoWhat did you like about this course?
Awesome content with strong foundations and various touch-points Stephanie!
- Pat Ugarte4 years agoHow will you use what you learned from this course?
This was amazing! Thank you so much. I'm learning CSS and this clarify a lot of things about CSS-Grid concepts and how to properly use it.
Course Content
You might also like these resources:
Introduction to Cloudflare Workers
Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.
Create an eCommerce Store with Next.js and Stripe Checkout
This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio
Practical Git for Everyday Professional Use
git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.