Build a Dynamic Data Table using JavaScript, CSS, and APIs
Course description
This project is a practical immersion into modern frontend development. You will create a stylish and interactive data table that fetches up-to-date information from a real API — no mock data. The table will instantly respond to user actions: sorting, pagination, as well as switching between light and dark themes.
You will learn to use JavaScript for DOM manipulation, handle asynchronous requests with fetch and async/await, and apply responsive design to ensure the interface looks great on any screen. Loading indicators, state management, accessibility — all of this is as close as possible to real-world developer tasks.
By the end, you will have a beautiful, functional interface and confident skills that will help you move on to more complex projects or stand out in your next interview.
Watch Online
All Course Lessons (18)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Introduction Demo | 03:43 | |
| 2 | Page Elements UI | 13:36 | |
| 3 | Color Variables UI | 12:24 | |
| 4 | Table Styling UI | 08:56 | |
| 5 | Pagination & Toggle UI | 08:16 | |
| 6 | Table Mobile UI | 10:03 | |
| 7 | Dark Mode JS | 09:00 | |
| 8 | Fetch Users JS | 16:46 | |
| 9 | Pagination JS | 09:15 | |
| 10 | Sorting JS | 18:59 | |
| 11 | Let's Keep Learning Together! | 01:23 | |
| 12 | Introduction | 05:02 | |
| 13 | Mac / Linux Device Setup | 05:35 | |
| 14 | Windows Device Setup | 06:58 | |
| 15 | VSCode Setup & Template | 19:27 | |
| 16 | VSCode Extensions | 09:11 | |
| 17 | DevTools | 13:57 | |
| 18 | GitHub | 14:34 |
Unlock unlimited learning
Get instant access to all 17 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Remix Bootcamp: Zero to Mastery
Practical Accessibility - Practical Accessibility for web designers and developers
