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/