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
On this page of the site you can watch the video online Responsive Grid and Flexbox Page Layout Tutorial (Part 2 of 2: CSS) with a duration of hours minute second in good quality, which was uploaded by the user Coding in Public 28 September 2021, share the link with friends and acquaintances, this video has already been watched 1,488 times on youtube and it was liked by 53 viewers. Enjoy your viewing!
