CF

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

Related courses

  • CS50's Web Programming with Python and JavaScript thumbnailFreeUpdated 2y ago

    CS50's Web Programming with Python and JavaScript

    By: HarvardX (Harvard University)
    Topics include database design, scalability, security, and user experience. Through hands-on projects, you'll learn to write and use APIs, create interactive UI
    14h 3m5/5
  • Youtube clone thumbnailClassic

    Youtube clone

    By: Nomad Coders
    Learn to create a comprehensive YouTube clone covering front-end and back-end with JavaScript, Node.js, and MongoDB. Enhance your developer skills by building
    15h 41m5/5
  • The Ultimate JavaScript Animation Course thumbnailUpdated 3y ago

    The Ultimate JavaScript Animation Course

    By: Dev Ed
    Learn how to do creative and engaging animation with no previous experience. Animation is so important in front end design as it grabs the attention of the user
    8h 32m

Frequently asked questions

What prerequisites are needed for this course?
The course assumes a basic understanding of HTML, CSS, and JavaScript. Familiarity with using a code editor like VSCode and experience with web development concepts will be beneficial. The lessons include setting up your development environment on Mac, Linux, or Windows, which should help you get started if you're not fully comfortable with these tools yet.
What will I build in this course?
In this course, you will build a dynamic data table that interacts with a real API. Features include sorting, pagination, theme switching between light and dark modes, and responsive design for different screen sizes. You'll learn to use JavaScript for DOM manipulation and handle asynchronous requests, resulting in a professional-looking and functional data table application.
Who is the target audience for this course?
The course is designed for individuals looking to enhance their frontend development skills, particularly those interested in working with JavaScript, CSS, and APIs. It's suitable for learners who have a foundational understanding of web development and wish to build practical, real-world applications.
How does the course depth compare to similar courses?
This course focuses on practical, hands-on experience in building a functional data table using real API data without mock data. Unlike some other courses that may use static data or focus solely on theory, this course emphasizes real-world developer tasks such as state management, responsive design, and accessibility.
What specific tools or platforms are covered?
The course covers JavaScript for DOM manipulation and asynchronous operations with fetch and async/await. CSS is used for styling, including responsive and theme-based designs. The course also includes lessons on setting up and using VSCode with specific extensions, which are essential for a streamlined development workflow.
What topics are not covered in this course?
The course does not cover advanced backend development, database management, or server-side programming. Its focus is on frontend development, particularly building dynamic user interfaces and handling data retrieval from APIs using JavaScript.
How can the skills learned in this course be applied to other courses or careers?
The skills acquired in this course, such as JavaScript DOM manipulation, API integration, and responsive design, are foundational for any frontend development role. These skills will support further learning in more complex web development projects and are valuable in job roles that require creating interactive and responsive web applications.