Build an Admin Dashboard with CRUD | HTML, CSS & JavaScript (Step by Step)

Описание: Let's build a modern admin dashboard step by step, starting from an empty file: a sidebar layout with CSS grid, stat cards, a users table with animated rows, role badges, edit and delete buttons, and a modal form. Then about 50 lines of plain JavaScript add full CRUD: create, read, update and delete users. Finally, a media query makes it work on phones. No frameworks, no libraries. 🍬

⏱️ Chapters
0:00 Intro
0:25 Step 1: Layout & Sidebar
1:17 Step 2: Header & Stat Cards
2:03 Step 3: Users Table
3:08 Step 4: Badges & Action Buttons
3:42 Step 5: Modal Form
5:01 Step 6: Read & Delete
6:00 Step 7: Create & Update
6:59 Step 8: Mobile
7:52 Final result

💻 Full code on GitHub: https://github.com/benshabbat/stylesh...
🔔 Subscribe to StyleSheet Snacks for a new CSS snack every day:    / @stylesheetsnacks  

💬 Which part should we build next? Tell me in the comments!

🧠 How the CRUD works
• The users live in one array. Every change updates the array, then render() redraws the table from it.
• One click listener on the table body handles every edit and delete button (event delegation).
• The same form is used for create and update. A variable remembers which user is being edited.
• In a real app, the array would come from an API, and each change would also be sent to the server.

📱 On a phone
• The sidebar moves to the top, and its menu becomes a 2 x 2 grid.
• The least important column (email) is hidden on small screens.
• The form uses width: min(420px, 80vw), so it always fits the screen.

#css #javascript #webdev #frontend #admindashboard #crud #html #tutorial #coding