Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

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

via Zero To Mastery Path

Go to class Write review

Overview

Level up your front-end skills by building an interactive, dynamic data table UI from scratch. Learn to use real-time data with API integration, sorting, pagination, dark mode, responsive design and user-first UI techniques. Build job-ready skills that get you hired.

Fetch and display real data from APIs
Add real-time interactivity with JavaScript
Implement sorting and pagination features
Build responsive layouts for all devices
Create dark mode using CSS variables
Show loading states with spinners
Handle events to update UI dynamically
Improve accessibility and user experience

Syllabus

Introduction

Introduction
Exercise: Meet Your Classmates and Instructor
Developer Setup

Dynamic Data Table

Overview
Page Elements UI
Color Variables UI
Table Styling UI
Pagination & Toggle UI
Table Mobile UI
Dark Mode JS
Fetch Users JS
Pagination JS
Sorting JS

Where To Go From Here?

Let's Keep Learning Together!
Review This Project!

Appendix - Developer Setup

Introduction
Mac / Linux Device Setup
Windows Device Setup
VSCode Setup & Template
VSCode Extensions
DevTools
GitHub

Taught by

Jacinto Wong

Reviews

Start your review of Build a Dynamic Data Table using JavaScript, CSS, and APIs