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/
-
1:37:20
Time to Code with Ali
2 years ago $0.01 earnedBuild a Portfolio with NEXT.js13 & TypeScript & TailwindCSS
2011 -
55:45
Tactical Advisor
3 hours agoNew Product Alert! | Vault Room Live Stream 040
30.6K4 -
LIVE
Reidboyy
2 hours ago $0.29 earnedTHEY GOT RID OF SBMM WTF!?!? (Go Phillies)
55 watching -
LIVE
The Company Boyz
2 hours agoDying Light: The Beast | Ja Pierdole, Kurwa Bober!
61 watching -
58:10
X22 Report
10 hours agoMr & Mrs X - Feminism, Family, Federal Reserve, The Rise Of The [DS] Agenda
181K51 -
16:37
Robbi On The Record
1 day ago $7.77 earnedThe Theater of Manufactured Outrage - When Left and Right Dance for the Same Puppet Master
37.8K41 -
31:27
Stephen Gardner
21 hours ago🔥BOMBSHELL: Mortician EXPOSES Charlie Kirk Autopsy - The Key Evidence EVERYONE Missed!
130K292 -
30:00
BEK TV
3 days agoGUT HEALTH AND THE POWER OF KIMCHI WITH KIM BRIGHT ON TRENT ON THE LOOS
61.2K6 -
11:02:52
IamNibz
11 hours ago $2.60 earned6-7 Minecraft Stream
31.8K6 -
36:53
daniellesmithab
4 days agoSupporting Alberta's Teachers and Students
136K27