How to Code a Recipe Card with HTML and CSS + FREE File Download

In this video I'll show you how to code a recipe card with HTML and CSS. At any time you can download the original design file for free and use it in your own projects, as well as the code we'll be writing in this video.

Figma is a great design software that you can use for designing websites, mobile apps, icons and even small components like the one in this video.

For the coding, I used Visual Studio Code and got fancy in some places with CSS variables and Flexbox.

Download the Figma design file for free: https://www.figma.com/file/vBs96BOSWtTIbAjAqzFjxs/Recipe-Card?node-id=0%3A1

Get the code from CodePen here: https://codepen.io/adipurdila/pen/MWbeaya

Links mentioned in this video:
- Unsplash photo: https://unsplash.com/photos/Mzy-OjtCI70
- How to Design a Recipe Card in Figma + FREE File Download: https://youtu.be/OyJ9OjC0nTU
- Poppins Font: https://fonts.google.com/specimen/Poppins​
- Shadows app: https://brumm.af/shadows
- object-fit on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

See all my Skillshare classes here: https://www.skillshare.com/r/user/adipurdila

You can get 14 FREE days of a Skillshare Premium Membership through the link above. I also get a small commision (referral link).

Let's connect on social media:
- Twitter: https://twitter.com/adipurdila​​
- Dribbble: https://dribbble.com/adipurdila​​
- Facebook: https://www.facebook.com/adipurdila​​
- Instagram: https://www.instagram.com/adipurdila/​

You’re watching: How to Code a Recipe Card with HTML and CSS
Music: Envato Elements