Product Catalog UI
Build product listing pages with cards, sorting, badges and responsive grids.
What you'll learn
- Render products from JSON
- Build product cards with prices and badges
- Sort and paginate listings
- Handle out-of-stock and empty states
About this course
You build the catalog pages of a store from product data. You cover product cards, sale badges, sorting, empty states and responsive grids.
Course curriculum
4 modules and 12 lessons over 3 weeks. Plan for about 9 learning hours.
01Product dataWeek 1 · 3 lessons
- JSON structure
- Rendering cards
- Price formatting
02CardsWeek 1 · 3 lessons
- Images
- Badges
- Out-of-stock state
03ListingsWeek 2 · 3 lessons
- Sorting
- Pagination
- Empty state
04ResponsiveWeek 3 · 3 lessons
- Grid layout
- Mobile checks
- Final page
Project
Product catalog. A responsive catalog page rendered from product data with sorting and badges.
Who this course is for
Front-end learners building e-commerce pages.
Prerequisites
You know HTML, CSS and basic JavaScript.
What's included
- 120-day course access
- Step-by-step lessons
- Practice files
- Reusable code templates
- A graded final exercise
- A digital completion certificate
Learning format
Self-paced practical course, part of our self-paced courses. Graded final exercise with written feedback.
Access and delivery
- Enrollment is activated within 15 minutes after payment.
- Final exercise feedback is delivered within 2 business days of submission, and the completion certificate is issued within 2 business days after passing the final exercise.
Certificate
You receive a digital completion certificate. Final exercise feedback is delivered within 2 business days of submission, and the completion certificate is issued within 2 business days after passing the final exercise.
Frequently asked questions
When does access start?
Enrollment is activated within 15 minutes after payment.
Is payment taken on this website?
No. After you submit your enrollment request, we reply by email with payment details and enrollment confirmation.
Does this course guarantee a job or income?
No. It is an education and training service and does not include employment, income or placement guarantees.
Can I cancel?
Our Refund and Cancellation Policy lists the terms for self-paced course programs.
