Responsive 4-Column Layout with Flexbox - Build a Responsive Website from Scratch

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Learn how to create a responsive 4-column layout using flexbox in this 38-minute tutorial video. Build a responsive website from scratch, focusing on the Features section of the Frontend Mentor Easybank landing page. Follow along as the instructor guides you through writing HTML for feature blocks, implementing SCSS styles with flexbox for multi-columns, and adjusting layouts for different screen sizes. Master techniques for styling icons, text, headlines, and feature cards while optimizing the design for both desktop and tablet views. Gain practical experience in responsive web design and improve your HTML, CSS (SCSS), and flexbox skills through this hands-on project.

Syllabus

- Intro.
- Look at the design and plan approach.
- Start writing HTML for feature blocks.
- Start writing SCSS styles to use flexbox for multi-columns.
- Adding space between flex child items.
- Adjusting the flex layout for tablet.
- Styling the icons and text.
- Adding global text styles for headlines.
- Adjust intro section width.
- Style the feature card icons.
- Style feature card titles.
- Style feature card descriptions.
- Add padding in the "container" helper class styles .