YoVDO

Tailwind CSS and JavaScript Product Filtering UI Project

Offered By: Traversy Media via YouTube

Tags

Javascript Courses Web Development Courses E-commerce Courses Responsive Design Courses Event Handling Courses Front-end Development Courses

Course Description

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Create a product list with filtering and add-to-cart functionality using Tailwind CSS and JavaScript in this 45-minute tutorial. Learn to build a responsive UI, implement dynamic product rendering, and add interactive features such as search, category filtering, and cart management. Follow along as the instructor guides you through HTML structure, styling with Tailwind, and JavaScript implementation, including DOM manipulation, event handling, and data management. Gain practical experience in front-end development while creating a real-world e-commerce component.

Syllabus

- Intro
- Start The HTML
- Navbar / Search Area
- Main Products & Categories Area
- Hardcode HTML Items
- Start The JavaScript
- Select DOM Elements & Init
- Loop Over Products & Create Elements
- Refactor To Function
- Update Cart Item Count
- Filter Products


Taught by

Traversy Media

Related Courses

Basics of e-Commerce
Canvas Network
Foundations of E-Commerce
Nanyang Technological University via Coursera
التجارة الالكترونية
Rwaq (رواق)
App Monetization
Google via Udacity
Capstone - Launch Your Own Business!
Michigan State University via Coursera