Responsive 4-column layout with CSS Grid | Build a responsive website from scratch (Part 6)

Опубликовано: 07 Октябрь 2024
на канале: Coder Coder

21,718

667

🔥 My course: Responsive Design for Beginners! https://coder-coder.com/responsive/

💻 Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/af...

This is Part 6 of the Build a Responsive Website from Scratch using HTML, CSS (SCSS) and vanilla JavaScript! In this video we're using CSS grid to build a 4-column responsive layout for the Blog Articles section of the Frontend Mentor Easybank landing page.

Full playlist here:    • Build a website from scratch - Fronte...
Challenge on Frontend Mentor: https://www.frontendmentor.io/challen...
Source code on GitHub: https://github.com/thecodercoder/fem-...
See the final website: https://codercoder-easybank.pages.dev/

0:00 - Intro
0:22 - Look at design for Latest Articles section
1:16 - Start writing HTML markup for Articles grid
9:36 - Start adding SCSS styles, using CSS grid for multi-column layout
13:04 - Explain how CSS grid works, compared to flexbox
15:48 - Using the Firefox Grid inspector
16:51 - Responsive design vs intrinsic design approaches
20:56 - Why I'm using the responsive approach for this
22:57 - CSS Tricks article on auto-fit vs auto-fill
24:55 - Start styling the card content-- card images
26:05 - Add CSS grid gap and other spacing in card
30:33 - Add background color and border-radius
31:46 - Styling the card text
38:12 - Add correct images and copy for each card
39:19 - Add box-shadow to cards
42:55 - Add hover state using transform and transition

_____________________________________

SUPPORT THE CHANNEL
⭐ Join channel members and get perks:    / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: https://marketplace.visualstudio.com/...

WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: https://coder-coder.com/responsive/
🌟 Gulp for Beginners: https://coder-coder.com/gulp-course/

RECOMMENDATIONS
⌨ My keyboard-- get 10% off with code THECODERCODER -- https://vissles.com/?ref=mu96kxst5w
💻 Other gear -- https://www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- https://coder-coder.com/best-web-deve...
📺 My Favorite Courses -- https://coder-coder.com/best-web-deve...

🔽 FOLLOW CODER CODER
Blog -- https://coder-coder.com/
Twitter --   / thecodercoder
Instagram --   / thecodercoder

#webdevelopment #coding #programming