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-produc...

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:    / 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