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/
-
4:16
AHMEDKAZEKA97
2 years agoTailwind CSS : Build 2 Advanced Projects
62 -
23:57
Software Tutorials by Jake Cyr
3 years ago $0.01 earnedHow to Create a Responsive Portfolio Website from Scratch - HTML, CSS, Bootstrap Tutorial
106 -
3:52
NorbertBM
10 months ago🌟Summer Sale on Our Web Development Courses | HTML, CSS, Java, JS, Bootstrap, Responsive, React 🎉
36 -
7:04
LearnCode.academy
1 year agoBuild an HTML + CSS Layout with Flexbox in just a few lines of code
23 -
1:41
AHMEDKAZEKA97
2 years agoMaster HTML5 Bootstrap5 & ReactJs From Scratch
45 -
4:34
RoladEL
8 months agoFIGMA TO HTML | Covert Figma Design To HTML & CSS (From Figma To Code)
27 -
5:58
AHMEDKAZEKA97
2 years agoFREE FULL COURSE Complete HTML and CSS with Projects From Zero To Expert
131 -
14:35
Tehillahville
1 year agoHow To Make CSS Grid Responsive
11 -
3:17
NorbertBM
9 months agoFREE CSS TEMPLATE - CSS FRAMERWORK
6 -
3:00
AHMEDKAZEKA97
2 years agoFREE FULL COURSE Understanding HTML and CSS
49