Premium Only Content
![Build a responsive card with CSS and Flex-box (& import your own fonts)](https://1a-1791.com/video/s8/1/j/n/R/y/jnRyh.qR4e-small-Build-a-responsive-card-wit.jpg)
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/
-
38:07
Time to Code with Ali
1 year agoHow to Connect Next.js 13 with MongoDB - APP Directory Routing
150 -
2:16:49
Steven Crowder
4 hours ago🔴 WINNING: Why Trump Has John Oliver & All of Europe Freaking Out
342K211 -
1:04:20
Timcast
3 hours agoDemocrats Plan COUP In NYC After Mayor Defends Trump, Lets ICE Deport Criminals | Timcast LIVE
88.1K41 -
LIVE
TheAlecLaceShow
1 hour agoGuest: Victor Avila | Left Blames Trump For Canada Plane Crash | Tom Hanks TDS | The Alec Lace Show
162 watching -
23:23
marcushouse
12 hours ago $0.09 earnedSpaceX Just Smashed Multiple Records! Wow!
1534 -
2:03:03
LFA TV
17 hours agoTRILLIONS IN FRAUD & WASTE FOUND! | LIVE FROM AMERICA 2.18.25 11AM
28.1K11 -
35:40
Grant Stinchfield
1 hour ago $1.11 earnedPfizer Marketing Data Reveals 1223 Deaths in Just 10 Weeks Following COVID Vax Rollout
12.3K1 -
The Shannon Joy Show
4 hours ago🔥🔥How’d America End up UPSIDE SIDE DOWN in China? And What Can We Do About it?🔥🔥
35.2K3 -
DVR
Bannons War Room
19 hours agoWarRoom Live
241K47 -
2:58:51
Wendy Bell Radio
8 hours agoCHECKMATE
107K69