Premium Only Content

Build a responsive card with CSS and Flex-box (& import your own fonts)
Learn to work with Design files | Flex-box | CSS | Import fonts
Hello everyone!
In this video, we will build an equal height card feature, completely responsive, using only HTML and CSS3 😀
We will learn how to build features using Design Files as a reference. And I will also show you how you can use any fonts you want by converting the fonts to a format browser can read and how to define them in our styles file.
Prerequisites for this video:
You need a computer, an IDE like visual studio code and some basic knowledge of HTML and CSS. Check this 3 min video:
📽 https://www.youtube.com/watch?v=SH8rCQvm-cI
🎨 Figma Design: https://www.figma.com/team_invite/redeem/lX7AhTZpLuFaMAHHTURryG
💻 Source Code: https://github.com/timeToCode-ali/html_css_features/tree/main/equal-_height_cards
Thank you for watching! Don’t forget to like the video and subscribe for the algorithm!!
Timestamp:
- 0:48 Prerequisites
- 3:35 Inspecting the Design File in Figma
- 10:02 Creating a new project
- 14:24 Creating the HTML
- 35:00 Importing Font-faces
- 48:05 Add Styles with CSS
- 59:02 CSS: Flex-box - Display Flex
- 1:39:02 RECAP: What we have done in this tutorial
- 1:43:48 Demo - Final Result
- 1:46:08 Last words & Thank you for watching
tags:
build responsive equal cards, build responsive cards, reponsive css feature, learn css, css3, html and css, build a responsive site with css and html, flex-box, css, software engineering, how to work with design files, how to work with figma designs, software engineer, computer science, computer science degree, computer science degree, women in tech, learn programming, how to learn programming, how to learn to code, programming for beginners, self-taught programmer, self-taught software developer, computer science degree, self-taught programmer, learn to code, getting your first programming job, software development
cc: videos credits
Sound effects: https://mixkit.co/free-sound-effects/
-
9:18
Time to Code with Ali
1 year ago $0.01 earnedTypescript vs Javascript - What are the differences
217 -
2:00:46
Steven Crowder
5 hours agoFight! Major Lawsuit Announcement...
424K244 -
19:50
Clownfish TV
15 hours agoFacebook FIRED 'Underperforming' Employees and They're P*SSED!
8134 -
8:34
Dr. Nick Zyrowski
27 days agoWhat Happens If You Take High Dose NAC ( N-Acetyl Cysteine) For 14 Days
3.05K11 -
25:31
The Boomer Effect
3 hours agoPotential Employees and Employers: What You Need to Know For The Hire
19 -
LIVE
The Dana Show with Dana Loesch
2 hours agoTRUMP AND ELON MUSK DEFEND DOGE | The Dana Show LIVE On Rumble!
703 watching -
59:31
Grant Stinchfield
2 hours ago $0.81 earnedThe Heist of Fort Knox That President Trump Thwarted
10.6K17 -
1:58:34
The Charlie Kirk Show
2 hours agoTHE CHARLIE KIRK SHOW IS LIVE 02.19.25
56.2K9 -
1:00:47
The Dan Bongino Show
4 hours agoWhat Did Zelensky Know? When Did He Know It? (Ep. 2426) - 02/19/2025
573K1K -
45:27
Benny Johnson
3 hours ago🚨Kash Patel WINS Critical FBI Director Confirmation Vote as Trump MASS FIRES Deep State Prosecutors
82.5K70