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 professionaโฆ
Watch on YouTube โ
(saves to browser)
Chapters (23)
Introduction to the course
3:35
A super quickTailwindCSS recap
10:28
Aside - The tailwind.config object
13:39
Adding custom colours
16:33
Aside - Fonts in TailwindCSS
19:05
Adding custom fonts
22:01
Aside - Max width in TailwindCSS
24:27
Crafting the card
27:26
Font and Text Classes
30:46
Aside - Gradients in TailwindCSS
34:06
Styling the buttons
40:02
Aside - Lists in TailwindCSS
43:50
Styling the features section
47:44
Aside - Grids in TailwindCSS
50:31
Mobile and desktop views
55:00
Aside - Background images in TailwindCSS
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!
Playlist
Uploads from freeCodeCamp.org ยท freeCodeCamp.org ยท 0 of 60
โ Previous
Next โ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
![Python Automation Tutorial โ How to Automate Tasks for Beginners [Full Course]](https://i.ytimg.com/vi/s8XjEuplx_U/mqdefault.jpg)
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Deploy 12 apps to AWS, Azure, & Google Cloud
freeCodeCamp.org
Reinforcement Learning Course: Intro to Advanced Actor Critic Methods
freeCodeCamp.org
How does the internet work? (Full Course)
freeCodeCamp.org
Code a Dictionary with React and Material UI - Tutorial
freeCodeCamp.org
Graph Algorithms for Technical Interviews - Full Course
freeCodeCamp.org
HTML Tutorial - Website Crash Course for Beginners
freeCodeCamp.org
Google Cloud Digital Leader Certification Course - Pass the Exam!
freeCodeCamp.org
Advanced OpenGL - Crash Course
freeCodeCamp.org
FastAPI Course for Beginners
freeCodeCamp.org
Google Sheets - Full Course
freeCodeCamp.org
Python Django and Google APIs - Project Tutorial
freeCodeCamp.org
Java Native Interface (28-Hour Course)
freeCodeCamp.org
Learn How to Code - Programming for Beginners Tutorial with Python and C#
freeCodeCamp.org
Android Programming Course - Kotlin, Jetpack Compose UI, Graph Data Structures & Algorithms
freeCodeCamp.org
Code a Discord Chat Bot That Talks Like Your Favorite Character - Tutorial
freeCodeCamp.org
Machine Learning Course for Beginners
freeCodeCamp.org
Selenium Course for Beginners - Web Scraping Bots, Browser Automation, Testing (Tutorial)
freeCodeCamp.org
Figma Course - Web Design Tutorial for Beginners
freeCodeCamp.org
Vue.js Course for Beginners
freeCodeCamp.org
Data Structures and Algorithms in Python - Full Course for Beginners
freeCodeCamp.org
Solidity, Blockchain, and Smart Contract Course โ Beginner to Expert Python Tutorial
freeCodeCamp.org
Linux Essentials for Ethical Hackers - Full InfoSec Course
freeCodeCamp.org
Gatsby Static Site Generator Tutorial
freeCodeCamp.org
Django For Everybody - Full Python University Course
freeCodeCamp.org
Python Automation Tutorial โ How to Automate Tasks for Beginners [Full Course]
freeCodeCamp.org
R Shiny for Data Science Tutorial โ Build Interactive Data-Driven Web Apps
freeCodeCamp.org
Natural Language Processing with spaCy & Python - Course for Beginners
freeCodeCamp.org
HTML & CSS Project Tutorial - Build a Recipes Website
freeCodeCamp.org
Git for Professionals Tutorial - Tools & Concepts for Mastering Version Control with Git
freeCodeCamp.org
TensorFlow for Computer Vision Course - Full Python Tutorial for Beginners
freeCodeCamp.org
HashiCorp Terraform Associate Certification Course - Pass the Exam!
freeCodeCamp.org
AWS VPC Beginner to Pro - Virtual Private Cloud Tutorial
freeCodeCamp.org
Object Oriented Programming with Python - Full Course for Beginners
freeCodeCamp.org
Node.js / Express Course - Build 4 Projects
freeCodeCamp.org
Binary Tree Algorithms for Technical Interviews - Full Course
freeCodeCamp.org
TensorFlow Lite for Edge Devices - Tutorial
freeCodeCamp.org
Angular Tutorial for Beginners - Web Framework with Typescript Course
freeCodeCamp.org
Unreal Engine & C++ Tutorial - Endless Runner Game ๐๐ฝโโ๏ธ
freeCodeCamp.org
Android App Development Tutorial for Beginners - Your First App
freeCodeCamp.org
Django Tutorial - Create a Digital Resume with a Python Backend
freeCodeCamp.org
Learn React by Building an eCommerce Site - Tutorial
freeCodeCamp.org
JavaScript Tutorial - PuzzleCam Game
freeCodeCamp.org
Python API Development - Comprehensive Course for Beginners
freeCodeCamp.org
The 50 Most Popular Linux & Terminal Commands - Full Course for Beginners
freeCodeCamp.org
Web Applications for Everybody Course - Dr. Chuck Teaches HTML, PHP, SQL, CSS, JavaScript, and more!
freeCodeCamp.org
Code a Squid Game JavaScript Game Using Three.js - Tutorial for Beginners
freeCodeCamp.org
Micro-Frontends Course - Beginner to Expert
freeCodeCamp.org
Unreal Engine & C++ Tutorial - 1st Person Shooter Game
freeCodeCamp.org
C++ Programming Tutorial - Build a 3-Band Compressor Audio Plugin (w/ JUCE Framework)
freeCodeCamp.org
Infrastructure as Code - Crash Course
freeCodeCamp.org
AWS Certified Cloud Practitioner Certification Course (CLF-C01) - Pass the Exam!
freeCodeCamp.org
Advanced Git Tutorial - Interactive Rebase, Cherry-Picking, Reflog, Submodules and more
freeCodeCamp.org
Learn ASP.NET Core MVC (.NET 6) - Full Course
freeCodeCamp.org
Feature Toggles - Why and How to Add to Your Software
freeCodeCamp.org
Data Analysis with Python for Excel Users - Full Course
freeCodeCamp.org
NoSQL Database Tutorial โ Full Course for Beginners
freeCodeCamp.org
Rust Programming Course for Beginners - Tutorial
freeCodeCamp.org
Razor Pages for ASP.NET Core - Full Course (.NET 6)
freeCodeCamp.org
The Business of Building Apps - App Product Management Course for Developers
freeCodeCamp.org
Bootstrap CSS Framework - Full Course for Beginners
freeCodeCamp.org
DeepCamp AI