Responsive 4-column layout with flexbox | Build a responsive website from scratch (Part 5)

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

23,549

715

🔥 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 5 of a series building a responsive website from scratch using HTML, CSS (SCSS) and vanilla JavaScript! In this video we're building a 4-column responsive layout for the Features 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:27 - Look at the design and plan approach
1:15 - Start writing HTML for feature blocks
3:49 - Start writing SCSS styles to use flexbox for multi-columns
6:54 - Adding space between flex child items
10:32 - Adjusting the flex layout for tablet
13:50 - Styling the icons and text
18:04 - Adding global text styles for headlines
20:30 - Adjust intro section width
25:58 - Style the feature card icons
27:54 - Style feature card titles
29:54 - Style feature card descriptions
31:49 - Add padding in the "container" helper class styles

_____________________________________

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