Responsive Admin dashboard Using HTML, CSS, and JavaScript | Dark Mode
2.7 هزار بار بازدید -
ماه قبل
-
How to Create Responsive Admin
How to Create Responsive Admin dashboard Using HTML, CSS, and JavaScript | Coding Atlas
In this tutorial, you are going to see how to create a responsive admin dashboard in dark mode using HTML, CSS and JavaScript. You will also see how to use chart.js library to render graphs by giving it the appropriate input values. We will also use some cool CSS features like CSS flexbox, CSS grid, CSS variables, media queries to achieve responsive design using the mobile first approach. CSS transitions are also used to achieve smooth transitioned effects.
Don't forget to like this video and drop your comment.
Source code: github.com/toyosiola/YT-Sales-Management-Dashboard
Subscribe: / @coding_atlas
Chapters
00:00:00 Intro
00:00:54 Project setup
00:02:43 Nav section
00:06:15 CSS Setup
00:09:23 Nav styles
00:21:50 Main header section
00:23:48 Main header styles
00:29:13 User profile
00:30:16 User profile styles
00:31:33 Navbar JavaScript functionality
00:35:54 Active nav-links functionality
00:39:34 Dashboard section
00:40:30 Sales summary section
00:46:27 Level chart
00:49:08 Dashboard styles
01:02:39 Level chart styles
01:14:04 Top products section
01:17:56 Fulfillment chart
01:20:31 top product styles
01:31:20 Fulfillment chart styles
01:34:30 Chart.js cdn link
01:34:55 Fulfillment chart construction with chart.js
01:42:38 Earnings section
01:45:40 Earnings section styles
01:47:46 Earnings chart styles
01:57:25 Large screen earnings chart styles
02:01:09 Visitors chart section
02:05:05 Visitors chart construction with chart.js
02:05:54 Round up
ماه قبل
در تاریخ 1403/05/17 منتشر شده
است.
2,708
بـار بازدید شده