Responsive Grid and Flexbox Page Layout Tutorial (Part 2 of 2: CSS)
Laying out a page with grid and flex box can be confusing. In this two part series, I'll show you how to layout a page using a combination of grid and flex box. We’ll create a fully-responsive design that adjusts with modern CSS depending on the user’s screen size.
In this second video, we’ll cover the CSS.
🔗 Key Links 🔗
Github: https://github.com/coding-in-public/b...
Live Code: https://codinginpublic.dev/projects/b...
---------------------------------------
📹 Related/Mentioned Videos 📹
Part 1 (HTML): • Responsive Grid and Flexbox Page Layo...
Dynamic font sizing video: • Dynamic Font Size CSS with clamp()
Grid layout examples video: • Four CSS Grid Layout Examples
---------------------------------------
🔗 Other Links 🔗
Dynamic Font Sizing article: https://css-tricks.com/linearly-scale...
Google Font: https://fonts.google.com/specimen/Inter
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
3:07 Fixing some HTML errors
4:47 Colors and light/dark mode
9:17 Setting up CSS variables and core styling
15:20 Laying out the page structure
20:45 Finishing the mobile styling
36:27 Media queries
46:15 Conclusion
---------------------------------------
🌐 Connect With Me:
Website: https://www.codinginpublic.dev
Blog: https://www.chrispennington.blog
Twitter: / cpenned
Watch video Responsive Grid and Flexbox Page Layout Tutorial (Part 2 of 2: CSS) online without registration, duration hours minute second in high quality. This video was added by user Coding in Public 28 September 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,488 once and liked it 53 people.