CourseFlix

Build a Dynamic Data Table using JavaScript, CSS, and APIs

3h 7m 5s
English
Paid

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.

About the Author: Zero To Mastery

Zero To Mastery thumbnail

Zero To Mastery (ZTM) is a Toronto-based online coding academy founded by Andrei Neagoie, originally a senior developer at large Canadian tech firms before turning to teaching full-time. The academy's signature is the cohort-based bootcamp track combined with a deep self-paced course library, all aimed at career-changers and self-taught developers preparing to land software-engineering roles at top companies.

The instructor roster has grown well beyond Andrei to include other senior practitioners: Daniel Bourke (machine learning), Aleksa Tešić (DevOps), Jacinto Wong, and others. Courses cover the full software-engineering career path: web development with React and Next.js, Python, machine learning and deep learning, DevOps and cloud, system design, mobile, and the algorithm / data-structure interview prep that gates engineering jobs.

The CourseFlix listing under this source carries over 120 ZTM courses spanning that full range. Material is paid; ZTM itself runs on a monthly / annual membership model. The teaching style favours long-form, project-based courses where students build complete portfolio-quality applications rather than disconnected feature tutorials.

Watch Online 18 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 18 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (18)
#Lesson TitleDurationAccess
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 subscription

Course content

18 lessons · 3h 7m 5s
Show all 18 lessons
  1. 1 Introduction 03:43
  2. 2 Page Elements UI 13:36
  3. 3 Color Variables UI 12:24
  4. 4 Table Styling UI 08:56
  5. 5 Pagination & Toggle UI 08:16
  6. 6 Table Mobile UI 10:03
  7. 7 Dark Mode JS 09:00
  8. 8 Fetch Users JS 16:46
  9. 9 Pagination JS 09:15
  10. 10 Sorting JS 18:59
  11. 11 Let's Keep Learning Together! 01:23
  12. 12 Introduction 05:02
  13. 13 Mac / Linux Device Setup 05:35
  14. 14 Windows Device Setup 06:58
  15. 15 VSCode Setup & Template 19:27
  16. 16 VSCode Extensions 09:11
  17. 17 DevTools 13:57
  18. 18 GitHub 14:34

Related courses

  • Creating a simple portfolio website with WebGL and Barba.js thumbnail

    Creating a simple portfolio website with WebGL and Barba.js

    By: Awwwards
    Nothing beats smooth user experience. That is the reason we love WebGL, because we can do crazy effects with amazing performance. But if you combine that with s
    3 hours 41 minutes 19 seconds
  • Crash Course: Build a Full-Stack Web App in a Weekend! thumbnail

    Crash Course: Build a Full-Stack Web App in a Weekend!

    By: Udemy
    Do you want to learn the fundamentals of modern web development fast ? Do you want to find out if building websites and apps is the right career path for you?
    12 hours 13 minutes 30 seconds
  • Modern JavaScript thumbnail

    Modern JavaScript

    By: UI.dev (Tyler McGinnis)
    This is a 'living' course which updates as JavaScript does. If you haven't taken a look at the latest versions of JavaScript the last few years you've been.
    3 hours 4 minutes 3 seconds

Frequently asked questions

What is Build a Dynamic Data Table using JavaScript, CSS, and APIs about?
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…
Who teaches Build a Dynamic Data Table using JavaScript, CSS, and APIs?
Build a Dynamic Data Table using JavaScript, CSS, and APIs is taught by Zero To Mastery. You can find more courses by this instructor on the corresponding source page.
How long is Build a Dynamic Data Table using JavaScript, CSS, and APIs?
Build a Dynamic Data Table using JavaScript, CSS, and APIs contains 18 lessons with a total runtime of 3 hours 7 minutes. All lessons are available to watch online at your own pace.
Is Build a Dynamic Data Table using JavaScript, CSS, and APIs free to watch?
Build a Dynamic Data Table using JavaScript, CSS, and APIs is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Build a Dynamic Data Table using JavaScript, CSS, and APIs online?
Build a Dynamic Data Table using JavaScript, CSS, and APIs is available to watch online on CourseFlix at https://courseflix.net/course/build-a-dynamic-data-table-using-javascript-css-and-apis. The page hosts every lesson with the integrated video player; no download is required.