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/
- 	
				 27:50 27:50Time to Code with Ali2 years ago $0.01 earnedBuild a Next.js 13 APP with TypeScript2501
- 	
				 LIVE LIVEThe Mel K Show1 hour agoHunters Become the Hunted: A Reckoning Is Finally Coming - 10/31/25752 watching
- 	
				 LIVE LIVEOutspoken with Dr. Naomi Wolf1 hour ago"The Devil His Due"128 watching
- 	
				 1:02:27 1:02:27VINCE3 hours agoA Very Trump Halloween | Episode 159 - 10/31/25139K75
- 	
				 2:07:18 2:07:18Badlands Media11 hours agoBadlands Daily: October 31, 202551.9K14
- 	
				 1:34:28 1:34:28Graham Allen4 hours agoSCARY: Kamala Had MELT DOWN Over Trump!! Does LSU Hate Charlie Kirk?! + Top Halloween Movies Of ALL TIME!!87K47
- 	
				 1:35:13 1:35:13Caleb Hammer2 hours agoShe Blames MAGA For Her Debt | Financial Audit12.2K1
- 	
				 1:10:40 1:10:40The Big Migâ„¢4 hours agoWhat To Give The Man Who Has EVERYTHING!12.9K13
- 	
				 1:32:16 1:32:16Benny Johnson3 hours agoSHOCK: Massive Food Stamp FRAUD Exposed: 59% of Welfare are Obese Illegal Aliens!? Americans RAGE…40.2K80
- 	
				 2:59:52 2:59:52Wendy Bell Radio7 hours agoAmerica Deserves Better51.2K76