Responsive 4-column layout with flexbox | Build a responsive website from scratch (Part 5)
Skills:
HTML & CSS90%
Key Takeaways
Builds a responsive 4-column layout using flexbox
Original Description
🔥 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/aff_338z7xnj/external?affcode=441520_ti97uk6b
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: https://www.youtube.com/playlist?list=PLUWqFDiirlsuYscECzks6zIZWr_Cfcx9k
Challenge on Frontend Mentor: https://www.frontendmentor.io/challenges/easybank-landing-page-WaUhkoDN
Source code on GitHub: https://github.com/thecodercoder/fem-easybank
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: https://www.youtube.com/channel/UCzNf0liwUzMN6_pixbQlMhQ/join
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme
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/thecodercode
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Coder Coder · Coder Coder · 24 of 60
1
![How to Make a Super Simple HTML Website [Tutorial]](https://i.ytimg.com/vi/cnt_rMA1pe0/mqdefault.jpg)
2
3
4
5
6
![Build a responsive website with HTML & CSS - Part 1 [Live Coding]](https://i.ytimg.com/vi/cX1nCBVNRqc/mqdefault.jpg)
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
▶
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
![[Typing sound] Comparing mechanical vs regular keyboard](https://i.ytimg.com/vi/vSebG-iGBg4/mqdefault.jpg)
50
51
52
53
54
55
56
57
58
59
60
How to Make a Super Simple HTML Website [Tutorial]
Coder Coder
How to make an animated sticky header with CSS and JavaScript!
Coder Coder
How to get coding help by researching online
Coder Coder
IG Live - Advice for beginner web developers
Coder Coder
Quick Start Guide to Parcel JS
Coder Coder
Build a responsive website with HTML & CSS - Part 1 [Live Coding]
Coder Coder
Build a custom Linktree page for Instagram with HTML & CSS
Coder Coder
Gulp 4 Crash Course for Beginners
Coder Coder
How to use CSS position to layout a website
Coder Coder
CSS: 4 Reasons Your Z-Index Isn't Working
Coder Coder
Coding a landing page website with HTML & CSS
Coder Coder
Learn web development as an absolute beginner
Coder Coder
How to write media queries in CSS
Coder Coder
How to build a 2-column layout using flexbox | HTML/CSS
Coder Coder
How to build a simple responsive layout with CSS grid
Coder Coder
Write code faster in VS Code with Emmet shortcuts
Coder Coder
How I setup VS Code for a beginners front-end workflow
Coder Coder
How to make a background-image transparent in CSS
Coder Coder
Build a responsive website from scratch with HTML & CSS | Part 1: Navigation bar
Coder Coder
Animated Hamburger Menu in CSS/JS | Build a responsive website from scratch (Part 2)
Coder Coder
Animated mobile menu with CSS/JS | Build a responsive website from scratch (Part 3)
Coder Coder
How to stay motivated when learning to code?
Coder Coder
Responsive hero | Build a responsive website from scratch (Part 4)
Coder Coder
Responsive 4-column layout with flexbox | Build a responsive website from scratch (Part 5)
Coder Coder
Responsive 4-column layout with CSS Grid | Build a responsive website from scratch (Part 6)
Coder Coder
Building a footer using CSS Grid | Build a responsive website from scratch (Part 7)
Coder Coder
Browsersync + Sass + Gulp in 15 minutes
Coder Coder
Responsive card UI with flexbox and hover effects | HTML/CSS
Coder Coder
CSS grid cards with animated hover effect | HTML/CSS
Coder Coder
How I learned to code and landed a job (no CS degree!)
Coder Coder
Building the website for my course (coding timelapse)
Coder Coder
How to debug your code faster 🔥
Coder Coder
Full timelapse + walkthrough of building my website
Coder Coder
Your questions answered!! ✨100K Q&A✨
Coder Coder
Building a pricing block with HTML & PuRe CSS
Coder Coder
Use the Google Maps API to build a custom map with markers
Coder Coder
Building an accordion with HTML, CSS & JS (Part 1)
Coder Coder
How to make your own VS Code theme!
Coder Coder
How to build an accordion with HTML, CSS, and JavaScript (Part 2)
Coder Coder
Life/channel update
Coder Coder
Building a Light/Dark Dashboard, Part 1
Coder Coder
What is NPM, and why do we need it? | Tutorial for beginners
Coder Coder
Building a Node.js app (as a JavaScript noob) | 🔴 LIVE CODING
Coder Coder
Free website project ideas for your portfolio #shorts
Coder Coder
How to add quickly emojis on Windows #shorts
Coder Coder
Building a Light/Dark Dashboard, Part 2
Coder Coder
Learn to code with these 4 free resources! #shorts
Coder Coder
Learn flexbox with these 4 resources! #shorts
Coder Coder
[Typing sound] Comparing mechanical vs regular keyboard
Coder Coder
Building a Light/Dark Dashboard, Part 3
Coder Coder
what making web development tutorials is really like 😅 #shorts
Coder Coder
Generate website starter files with just one command!
Coder Coder
emojis in code
Coder Coder
Stay motivated when coding: don't compare yourself with others #shorts
Coder Coder
Building a Light/Dark Dashboard, Part 4
Coder Coder
Coding motivation: slow and steady wins the race 🐢🏁
Coder Coder
Sass @import is being replaced with @use and @forward
Coder Coder
Coding motivation tip: keep your goal in mind
Coder Coder
How do websites work?
Coder Coder
Building a Light/Dark Dashboard, Part 5
Coder Coder
More on: HTML & CSS
View skill →
Related Reads
📰
📰
📰
📰
CSS Grid vs Flexbox: The Matrix of Layouts
Dev.to · Timevolt
JS1024 2026 is open: build a demo in 1024 bytes
Dev.to · js1024
React Performance Optimizations I Actually Used in Production
Dev.to · Ankita Budhia
Web Development training and Placement in Electronic City — Full Stack (HTML, CSS, JS, React, Node…
Medium · JavaScript
Chapters (13)
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
🎓
Tutor Explanation
DeepCamp AI