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
Смотрите видео Responsive Grid and Flexbox Page Layout Tutorial (Part 2 of 2: CSS) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Coding in Public 28 Сентябрь 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,488 раз и оно понравилось 53 людям.