Learn Tailwind CSS: Build a Responsive Product Card

Curriculum for the course Learn Tailwind CSS: Build a Responsive Product Card

Elevate your web design skills withTailwind CSS! Learn how to build a stunning, fully responsive product card for an e-commerce site.. 👉 Access interactive lessons and start coding now: https://v2.scrimba.com/build-a-product-card-with-tailwind-css-c07sjqf1ak?utm_source=youtube&utm_medium=video&utm_campaign=fcc-tailwind-product-card By the end of this course, you'll have built a fully responsive product card for a web store, using industry-standard mockups for both desktop and mobile. Whether you're designing for clients or personal projects, these techniques will help you craft professional, polished websites faster and with more control. Scrimba on YouTube: https://www.youtube.com/c/Scrimba ⭐️ Contents ⭐️ 0:00:00 Introduction to the course 0:03:35 A super quickTailwindCSS recap 0:10:28 Aside - The tailwind.config object 0:13:39 Adding custom colours 0:16:33 Aside - Fonts in TailwindCSS 0:19:05 Adding custom fonts 0:22:01 Aside - Max width in TailwindCSS 0:24:27 Crafting the card 0:27:26 Font and Text Classes 0:30:46 Aside - Gradients in TailwindCSS 0:34:06 Styling the buttons 0:40:02 Aside - Lists in TailwindCSS 0:43:50 Styling the features section 0:47:44 Aside - Grids in TailwindCSS 0:50:31 Mobile and desktop views 0:55:00 Aside - Background images in TailwindCSS 0:59:50 Adding the background images 1:02:25 Aside - Transforms in TailwindCSS 1:07:10 Aside - Transitions in TailwindCSS 1:09:30 Styling the wishlist button 1:10:56 Aside - Arbitrary values in TailwindCSS 1:14:13 Adding the dropshadow 1:15:38 Congratulations! 🎉 Thanks to our Champion and Sponsor supporters: 👾 Drake Milly 👾 Ulises Moralez 👾 Goddard Tan 👾 David MG 👾 Matthew Springman 👾 Claudio 👾 Oscar R. 👾 jedi-or-sith 👾 Nattira Maneerat 👾 Justin Hual -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

Watch Online Full Course: Learn Tailwind CSS: Build a Responsive Product Card

Click Here to watch on Youtube: Learn Tailwind CSS: Build a Responsive Product Card

This video is first published on youtube via freecodecamp. If Video does not appear here, you can watch this on Youtube always.

Udemy Learn Tailwind CSS: Build a Responsive Product Card courses free download, Plurasight Learn Tailwind CSS: Build a Responsive Product Card courses free download, Linda Learn Tailwind CSS: Build a Responsive Product Card courses free download, Coursera Learn Tailwind CSS: Build a Responsive Product Card course download free, Brad Hussey udemy course free, free programming full course download, full course with project files, Download full project free, College major project download, CS major project idea, EC major project idea, clone projects download free