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

[@somjrgebn]

Frankly, as someone who has been building software for so many decades, I prefer things this way than all these frameworks. While these frameworks are great, the "less friction" from them make people make bloated frankensteins from some engineer's fit of genius... which nobody will have time to maintain, let alone use. Just a complete, bare-bones fundamental approach forces the simplicity people need long-term.

[@ronsantos8343]

Bob you are the freakin man! clear and easy to understand with just the right information!

[@codedjango]

yes indeed this tutorial was awesome...i always wondered if i can use css grid for creating only layouts....n this helps me a lot

[@ninjaoftherift1620]

I have a small startup web dev and design agency. I am a an IT student specializing in web dev and design. I love your tutorials. I have only coded sites from scratch or used cms systems like wix and WordPress and added code to make them more advanced. We currently use bricks builder and oxygen builder that let ylu add code and make your own elements so im happy im learning these things because i see how you can break this down jnto small er elements your great ! I want tk build my own dashboard and I think this is great

[@BobsProgrammingAcademy]

Thank you for the kind words 🙂 We are glad you've found our videos helpful.

[@edwardfabunmi]

You're the best, sir. I love this❤, and it's well explanatory.

[@yasinbicer5924]

you're speaking very well ı am not a native speaker but ı can understand very well THANK YOU

[@BobsProgrammingAcademy]

Happy to hear that 😊

[@ThanhManDiep-tg1to]

So do I

[@joshuamaebanyamasege9437]

best instructor ever

[@BobsProgrammingAcademy]

Thank you for the kind words 🙂 We really appreciate it.

[@kimcondeignacio8697]

I'm so thankful for this Video so very helpful 💕

[@relaxe3015]

good job !! I really appreciate making this

[@banelemalinga232]

Great tutorial bro, the way you explain makes everything easier. Can you please make another one where the dashboard interacts with a database?

[@BobsProgrammingAcademy]

Thank you for the kind words. We really appreciate it. In the future, we will add more tutorials.

[@AmazingRecipes1481]

thank you perfect man

[@josiasvandermerwe3710]

THnx for all the effort. It is appreciated. If I may, I do have a question. As not to repeat the menu and general page layout. Is there a way to have a single index.html file and to load different page content into it when clicking on the menu items.

[@Cazado20C]

Muchas gracias. Thank you too much.

[@edriantadena.04]

I'm also having a trouble in the icon, i think there is one link that's not working at all, do you have any update about this, instead of icon the text showing instead

[@JustForFun1426-t4k]

Can you please make video about how customize django dashboard using bootstrapp 5 Thanks

[@PIDOtomasyon]

thank you so much

[@BobsProgrammingAcademy]

You're welcome! 🙂 We are glad you've found this video helpful.

[@johnangelomidel1972]

I cannot get to the icons it does not convert it into icons rather it stays as texts

[@BobsProgrammingAcademy]

Hi John. Have you added a link to Material Icons in the head section of your index.html file? The link should look like this: Please also make sure that you've modified the link from the website and added the +Outlined part to your link. In this tutorial, we use outlined icons, not filled ones, so the link has to be modified to work correctly.

[@johnangelomidel1972]

@@BobsProgrammingAcademy I have done it all, it just took a restart of computer to work. Thanks

[@BobsProgrammingAcademy]

That's good to hear 🙂

[@hunterbeach732]

@@BobsProgrammingAcademy Restart did not work, ill keep looking

[@poko6936]

Thanks a lot for this

[@BobsProgrammingAcademy]

Thank you for the kind words 🙂 We really appreciate it.

[@2005Azm]

Fantastic!!

[@MrAznRixe]

Im having trouble with the icons, they are not showing up instead text is shown.

[@BobsProgrammingAcademy]

Have you added a link to Material Icons in the head section of your index.html file? The link should look like this: Please also make sure that you've modified the link from the website and added the +Outlined part to your link. In this tutorial, we use outlined icons, not filled ones, so the link has to be modified to work correctly.

[@hunterbeach732]

@@BobsProgrammingAcademy I also ran into this bug, That line of code you offered is exactly what I used, I'll try to keep you updated if I find a way to fix this, @MrAznRixe, any chance you found something Span Reference menu

[@icarodeveloper]

How can i integrate it with django?

[@dhanvil3225]

Hello sir can we do it in windows 11 ?!...

[@BobsProgrammingAcademy]

Yes, you can.

[@lourrizemarielocampo4685]

My bar chart isn't showing in my website. How to fix it?

[@BobsProgrammingAcademy]

Hi Lourrize. Have you included both the ApexCharts library and your custom JavaScript code (the scripts.js file) in your index.html file? If the answer is yes, the next step is adding div tags to your HTML page that would hold both charts. For the bar chart, you need a div with an ID of bar-chart, and for the area chart, you need a div with an ID of area-chart. Have you added those div tags? If the answer is yes and your page structure in the index.html file matches the structure we showed in the video, then the next step is to examine the scripts.js file. Do the IDs of the charts in your scripts.js file match those in your index.html file? For the bar chart, the ID is bar-chart, and for the area chart, the ID is area-chart. The IDs in the scripts.js file should be preceded by the hash symbol (#). For the bar chart, your code should look like this: var barChart = new ApexCharts(document.querySelector("#bar-chart"), barChartOptions); barChart.render(); And for the area chart, your code should look like this: var areaChart = new ApexCharts(document.querySelector("#area-chart"), areaChartOptions); areaChart.render(); We discuss all these steps in the video. Here is the timestamp: 00:50:51 Building Charts using the ApexCharts Library We hope this helps.

[@Lantzcer]

What’s the best way to show other pages linked in your menu, show all new page, refresh only main, or other?

[@BobsProgrammingAcademy]

Hi Lantzcer. When you build a website with multiple HTML pages, there are several ways to link the pages together. In this article, you can find some very basic information on how to build a multi-page HTML website and how to create simple navigation between pages: www.learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/multi-page-html-sites Usually, when you build a website with multiple pages, you will have some common elements on all the pages - for example, a header, a sidebar, and a footer. Unfortunately, the simplest method to link HTML pages together, where you create multiple HTML files and, in each file, repeat the common parts of the page, is not very efficient. Every time you need to make a change, like adding a new link to the navigation menu, you would need to repeat the same steps in all the files so the menu stays consistent between the pages of your website. This is very inefficient and creates more potential for errors. It's good to keep in mind the DRY principle (Don't repeat yourself) for sharing identical content between multiple HTML pages so that the code is easier to understand and maintain. There are several ways to share common parts (like headers, footers, etc.) across multi-page websites, and the best method for you depends on the technologies you want to use in your project. In this article, the author describes and demonstrates one of the methods: medium.com/@dtkahn/sharing-headers-and-footers-across-multi-page-websites-4396f9034669 Several excellent posts on StackOverflow discuss this subject and demonstrate different methods and technologies. For example: stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file stackoverflow.com/questions/18712338/make-header-and-footer-files-to-be-included-in-multiple-html-pages stackoverflow.com/questions/418503/common-header-footer-with-static-html stackoverflow.com/questions/38837835/include-html-in-another-html-file stackoverflow.com/questions/37314279/how-to-deal-with-a-static-header-footer-with-10-pages

[@Lantzcer]

@@BobsProgrammingAcademy Thank you for taking the time with your response very nice of you. I currently use JS to build a lot of my pages so already have DRY code, one js file for the menu. I will try react and vue to load all the pages but wanted to know if you had a way you would load just the new pages on a dashboard. I don't know if you have a Udemy account but I would pay for your classes if you did. You do good work and if you are not on their site you should put your stuff up there. It's very helpful and you do a good job. Thanks again.

[@BobsProgrammingAcademy]

@@Lantzcer Thank you for the kind words. We really appreciate it. We weren't aware of your skill level, and since this is a tutorial for beginners, we assumed a beginner level and put together a reply for a total beginner :) In your case, if you're already using JavaScript in your projects, we highly recommend React. It's a great JavaScript library for creating scalable and fast user interfaces, and it would be our technology of choice to create a more complex website. Here you can find a lot of information about React, including some nice tutorials: reactjs.org/docs/getting-started.html You could use pure React or, alternatively, Next.js, which is a React framework for production. By default, React runs on the client side (meaning that it runs on the web browser), so a web application written entirely with that library could negatively affect Search Engine Optimization (SEO) and initial load performance, as it takes some time to be correctly rendered on screen. In fact, to display the complete web app, the browser has to download the entire application bundle, parse its content, then execute it and render the result in the browser, which could take up to a few seconds (with very large applications). Next.js, on the other hand, allows for server-side rendering, static site generation, and incremental static generation. The most significant difference between React and Next.js is that while React is just a JavaScript library, Next.js is a framework for building rich and complete user experiences both on the client and server sides, adding tons of incredibly useful features. Here you can find a lot of information about Next.js, including tutorials: nextjs.org With React, we would typically use React Router to create client-side routes only, meaning that all the pages will be created and rendered on the client side; no server-side rendering is involved. Next.js uses a different approach: filesystem-based pages and routes. A default Next.js project ships with a pages/ directory. Every file inside that folder represents a new page/route for your application. Therefore, when talking about a page, we refer to a React component exported from any of the .js, .jsx, .ts, or .tsx files inside the pages/ folder. We have a number of projects on this channel built using both React and Next.js, so you can check the code of those projects as well. In the future, we will add more tutorials, including React and Next.js tutorials. At some point, we might also start doing tutorials on Udemy. But we have day jobs outside of KZbin, so, unfortunately, it takes some time to prepare new content for the channel.

[@JunkyardReboot]

@@Lantzcer Since you already saying you are familiar with JS. Then i would say the way i would do it is .... - Add styling for a sidebar menu in the main html file; - build the sidebar and attach YourRandom Text - build JS event listener for that sidebar ( something like ..... const url = event.target.getAttribute('data-content-url'); ) - use fetch and display with content.innerHTML On theory this should give you a static page that loads dynamically content from pressed buttons. Something like a dynamic Iframe

[@reginaldarmah2381]

How do you deploy and host an admin panel/dashboard (noob here)

[@BobsProgrammingAcademy]

Hi Reginald. Here you can find some general information about the process of publishing a website: developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website When publishing a website, there are many options to choose from. It all depends on whether it is a personal project or a commercial project and how much money you want to spend on a domain and hosting (if any). One of the options is Heroku, and their free tier is good for non-commercial apps, such as proofs of concepts and personal projects: www.heroku.com/pricing If you google how to deploy a static HTML & CSS website to Heroku, you will find plenty of tutorials (including many videos on KZbin). Another option is GitHub Pages: pages.github.com/ It's a good option, and you can still use a custom domain on GitHub Pages. Here is another option for hobby projects - W3Schools Spaces. They have a free plan as well: www.w3schools.com/spaces/ Here is a simple tutorial: www.w3schools.com/howto/howto_website_host_staticwebsite.asp For commercial projects, there are many options as well. Here are some articles describing different hosting options: uk.pcmag.com/web-hosting-services/8310/the-best-web-hosting-services www.forbes.com/advisor/business/software/best-web-hosting-for-small-business/ Here is an article about domain registrars that compares different options: themeisle.com/blog/best-domain-registrars/ We hope that helps.

[@powerbaqhang]

this code can i run in Visual Studio code also? anyone can anwer me?

[@nguyenphuocthuan7006]

thanks so much

[@-SUPRAJAR-IT]

Hi ,my barchart isnt showing ....even after applying codes and link in index html