Taking on a Frontend Mentor challenge | Responsive Product Preview Card Component

From the creator

Today, I'm taking on a popular Frontend Mentor challenge. We'll look at doing everything from downloading the files to putting the challenge together with HTML & CSS, and finally putting it on GitHub and getting it online using Netlify. If you're thinking of signing up for Frontend Mentor PRO account, you can get 10% off with the code KEVINPOWELL10 🔗 Links ✅ The project I’m working on: https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa?via=kevinpowell ✅ My finished code: https://github.com/kevin-powell/product-preview-card-component-main ✅ Live server extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer ✅ How to use heading levels (h1 - h6): https://youtu.be/NexL5_Vdoq8 ✅ Josh Comeau’s CSS reset: https://www.joshwcomeau.com/css/custom-css-reset/ ✅ Custom Properties in-depth playlist: https://youtu.be/PHO6TBq_auI ✅ More on visually-hidden: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html ✅ More on :is(): https://youtu.be/McC4QkCvbaY ✅ More on the picture element: https://youtu.be/Rik3gHT24AM Some links may be affiliate links. When you click on these links and make a purchase, we may receive a small commission at no additional cost to you. This helps support my work and allows me to continue providing valuable content. I only recommend products and services I use myself. ⌚ Timestamps 00:00 - Introduction 00:34 - What we’re starting with 02:18 - Setting things up 05:34 - Writing the HTML 16:30 -

Published 2022-11-22 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.