HTML CSS JavaScript Tutorial for Beginners | Build Admin Dashboard From Scratch

In this tutorial, we will teach you HTML, CSS and JavaScript by building a responsive admin dashboard.

We will not be using any CSS frameworks such as Bootstrap to build this dashboard. Instead, we will teach you how to build a layout using CSS Grid and how to make it look good on devices of different sizes using CSS media queries.

00:00:00 Introduction
00:00:38 Project Overview
00:05:07 About HTML, CSS, JavaScript and Document Object Model (DOM)
00:06:38 Basic Structure
00:14:44 Layout using CSS Grid
00:27:44 Adding Fonts and Icons
00:33:23 Header
00:38:59 Sidebar
00:45:51 Main Section and Cards
00:55:03 Building Charts using the ApexCharts Library
01:06:13 Responsive Web Design using CSS Media Queries
01:13:48 Outro

#HTML #CSS #Javascript #CSSGrid #CSSMediaQueries #ApexCharts #HTMLCSSDashboard #ResponsiveAdminDashboard #ResponsiveDashboard #AdminDashboard #HTMLForBeginners #HTMLTutorial #HTMLCSSTutorial #HTMLCSSJavaScript #HTMLCSSJavaScriptTutorialForBeginners #TutorialForBeginners #Project

[Drazyhaze]

I'm going back and trying to strengthen my programming fundamentals and this is just a great video to sharpen up on all the vanilla basics and foundation/building blocks. Thank you so much!

[hexacoder]

This is the second tutorial I'm following from you, and as for the first, this one is also a great video.
Thank you so much, and please continue to share such content.



It's really helping me work on my own project.

[unruly_ronin]

A true teacher. Thanks you so much sir. Be blessed.

[sithlordsareourspeciality]

Amazing. Beautiful. 10/10 Great instruction.

[gamematerials]

At last I made it, thank you Teacher, you did a great tutorial

[raianecj]

Mais algum brasileiro aqui? Amazing video that helped me with a college project. Thankssss

[Mohammadreza-Dolati]

thanks a lot bro for your useful contents, big ❤ from Iran

[ovieolori]

You are an excellent instructor. This tutorial is easy to follow and there’s a lot to learn

[luise.rodriguez]

Great video! That is the exact content and level of details. For future videos, I would like to learn how to integrate the data in a database using Postgres or other DB tool.

[eltonruco]

really good work here, total thanks man

[rubixio]

Very informative thanks. Sir will love for you to show us how to implement a signature pad where a client can sign with a pen tablet on a Django form he/she just filled up and have the form get emailed back to the client as a pdf containing the information the client just filled up with their hand signature In it.

[sebastianctze]

Great video, only problem I am facing is at 38:45 the icons shown in the video, display at the bottom of the website underneath the sidebar. I’ve gone through the code twice but can’t seem to find the problem. Can anybody please help?

[faxelh]

Thank U Sir. One on the best tuto teach in 2023 from YouTube ❤

[GerrieDonkers]

Hello, i like your workshop, only i get not the icons en list visable.
all equallike your movi.

wat do i wrong?

[josesilveira]

Hi Bob, Thank you for your tutorial, I much appreciate and learn a lot I am mechanical engineer, and fascinate with performance management, and continuous improvement. I am interesting in data and reporting scope. I can create dash board output scanning data from cards which show the actual time in relation to planning time process output like cycle time. Also it is possible to scan
label and make table? Much appreciate.

[gokulvasan]

how to link a page to the side bar items because i can't add a href in the span. please someone help me

[nabilabubakar]

Great Video...I followed your video buh I'm if difficulties with the charts they dont show in my browser and apparently i did everything right

[lazyman]

hey have anybody ever told you, you have beautiful voice. I'm a sub.

[Jigen]

Thanks for the tutorial, it's really clear and complete! Just a question: why, when I run the page in Localhost through LAMPP, it doesn't show the style as specified in the CSS and the page is "naked"?

[aymenlejmi]

where is the charts integration into dashboard ?