Главная
Study mode:
on
1
- Intro
2
- Look at the design and plan approach
3
- Start writing HTML for feature blocks
4
- Start writing SCSS styles to use flexbox for multi-columns
5
- Adding space between flex child items
6
- Adjusting the flex layout for tablet
7
- Styling the icons and text
8
- Adding global text styles for headlines
9
- Adjust intro section width
10
- Style the feature card icons
11
- Style feature card titles
12
- Style feature card descriptions
13
- Add padding in the "container" helper class styles
Description:
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.

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

Add to list
0:00 / 0:00