HTMLAdmin dashboard

dash-1 — HTML Admin dashboard Template

By risaltte

A dashboard layout template built with HTML, CSS, and JavaScript, implemented following EGATOR's YouTube course.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-13View source

What stands out

A quick read of the recorded project description.

01

Built with HTML, CSS, and JavaScript

02

Uses Material Icons for icons

03

Implemented based on EGATOR's YouTube course Lesson 01

04

Provides desktop and mobile layout screenshots

05

Includes GitHub Pages and Vercel demo links

Template Details

dash-1 is a dashboard layout template built with HTML, CSS, and JavaScript, using Material Icons for icons. The README states that the layout was created based on EGATOR's YouTube course (Lesson 01) and provides desktop and mobile layout screenshots. After cloning the project via Git, you can view it locally by installing and running Live Server in VSCode; demo addresses include GitHub Pages and Vercel. The README does not describe the template's specific functional modules, data interaction methods, or production suitability, nor does it provide details beyond the layout.

HTMLAdmin panel

Is it right for your project?

Use Cases

  • Learning how to build a dashboard layout with HTML, CSS, and JavaScript
  • Using as a reference project for front-end layout practice
  • Quickly viewing how the dashboard appears on desktop and mobile

Suitable For

  • Front-end beginners learning HTML, CSS, and JavaScript layout
  • Front-end developers who need a reference for dashboard layout structure
  • Learners who want to see the implementation results of EGATOR's course

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Git and Node.js or Yarn must be installed in advance

  2. 2

    Using VSCode to edit the code is recommended

  3. 3

    After cloning the repository, install and run Live Server in VSCode

  4. 4

    The local access address is http://localhost:5500

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version's code are permitted.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; they cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text
https://github.com/risaltte/dash-1/blob/main/LICENSEhttps://github.com/risaltte/dash-1/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-13. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
Partly documented · 65 / 100
Technologies
HTML
Website type
Admin dashboard
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2024-05-22
Screenshot last checked
2026-10-13

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies HTML as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: codex-user-requested-batch-review-20261015 · 2026-10-15

Inspect the recorded source material

SHA-256: 58aacddb1f3c49ba431bb88fd436f910791a4a8f303f4f518d2e4c9a05b600f0

2026-10-13T22:38:10.593Z

Source file / repository
<h1 align="center" id="project_name">
  <br />          
    <img height="120" width="120" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" />
    <img height="120" width="120" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" />
    <img height="120" width="120" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" /> 
  <br />
</h1>

<p align="center">
  Layout Dashboard.
</p>

<p align="center">
  <!-- GitHub last commit -->
  <a href="https://github.com/risaltte/dash-1/commits/master">
    <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/risaltte/dash-1?color=81D8F7">
  </a>
  <!-- GitHub language count -->
  <img alt="GitHub language count" src="https://img.shields.io/github/languages/count/risaltte/dash-1?color=81D8F7">
  <!-- GitHub top language -->
  <img alt="GitHub top language" src="https://img.shields.io/github/languages/top/risaltte/dash-1?color=81D8F7">
  <!-- Repository size -->
  <img alt="Repository size" src="https://img.shields.io/github/repo-size/risaltte/dash-1?color=81D8F7">
  <!-- Repository status -->
  <img src="https://www.repostatus.org/badges/latest/unsupported.svg">
  <!-- Link repo -->
  <a href="https://github.com/risaltte/dash-1/blob/master/LICENSE">
    <img src="https://img.shields.io/github/license/risaltte/dash-1?color=81D8F7" alt="License">
  </a>
</p>

<p align="center">
 <a href="#about">About</a> •
 <a href="#layout">Layout</a> • 
 <a href="#technologies">Technologies</a> • 
 <a href="#prerequisites">Prerequisites</a> •
 <a href="#demo">Demo</a> •
 <a href="#author">Autor</a> • 
 <a href="#license">License</a>
</p>

<h4 align="center">
  	🚧 Layout Dashboard with HTML, CSS and Javascript | Done 🚧
</h4>

<h2 id="about">
💻 About
</h2>

The layout dashboard were created based on <a href="https://www.youtube.com/@EGATORTUTORIALS">EGATOR</a> classes available on YouTube:
- **[Lesson 01](https://www.youtube.com/watch?v=BOF79TAIkYQ&ab_channel=EGATOR)**

<h2 id="layout">🎨 Layout</h2>

<p align="center">
  <img src=".github/img/desktop-1.png" alt="Layout Desktop">
  <br></br>
  <img src=".github/img/desktop-2.png" alt="Layout Desktop">
</p>
<br></br>

<p align="center" style="display: flex; align-items: flex-start; justify-content: center; gap: 16px;">
  <img src=".github/img/mobile-1.png" alt="Layout Mobile">
  
  <img src=".github/img/mobile-2.png" alt="Layout Mobile">
</p>

<br />
<h2 id="technologies">🛠 Technologies</h2>

The following tools were used in the construction of the project:

- **[HTML]**
- **[CSS]**
- **[Javascript]**

**Utilities**

- Icons: **[Material Icons](https://developers.google.com/fonts/docs/material_icons?hl=pt-br)**

<h2 id="prerequisites">💿 How to run the project</h2>

### 🧰 Prerequisites

Before you start, you will need to have the following tools installed on your machine:

> [Git](https://git-scm.com), [Node.js](https://nodejs.org/en/) or [Yarn](https://yarnpkg.com/) if you prefer.
> In addition it is good to have an editor to work with the code as [VSCode](https://code.visualstudio.com/)

### 🧭 Running the Project

```bash
# Clone repo
$ git clone https://github.com/risaltte/dash-1.git

# Access the project folder in the terminal/cmd
$ cd dash-1

# Open the project in the vscode
$ code .

# Install and run Live server on vscode

# see on http://localhost:5500

```

<h2 id="demo">🧪 Demo</h2>
<a href="https://risaltte.github.io/dash-1/" target="_blank">
  <img src="https://img.shields.io/badge/github-%231877F2.svg?&style=for-the-badge&logo=github&logoColor=white&color=black" />
</a>
<br>

<a href="https://dash-1-navy.vercel.app" target="_blank">
<!-- Link externo ou local(.github). -->
  <img src=".github/img/vercel_button.png">  
</a>

<h2 id="author">🦸 Autor</h2>
<a href="https://github.com/risaltte">
 <img style="border-radius: 50%;" src="https://avatars.githubusercontent.com/u/38223948?v=4" width="100px;" alt="Rafael Risalte"/>
 <br />
 <sub><b>Rafael Risalte</b></sub></a>

[![Linkedin Badge](https://img.shields.io/badge/-Linkedin-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/rafaelrisalte/)](https://www.linkedin.com/in/rafaelrisalte/)
[![Gmail Badge](https://img.shields.io/badge/-Gmail-c14438?style=flat-square&logo=Gmail&logoColor=white&link=mailto:[email protected])](mailto:[email protected])

<h2 id="license">📝 License</h2>

Distributed under MIT license. See [LICENSE](LICENSE) for more information.

Made with ❤️ by Rafael Risalte 👋🏽 [Contact!](https://www.linkedin.com/in/rafaelrisalte/)

[⬆ Back to top](#project_name)<br />
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

AdminLTE

AdminLTE

An HTML admin dashboard built with Bootstrap 5 and vanilla JavaScript. Astro builds the documentation; React, Vue and Angular editions live in separate repositories.

HTML · Admin dashboard

gentelella

gentelella

Gentelella v4 is a free, open-source admin dashboard template maintained by Colorlib, built with vanilla JavaScript, SCSS, and Vite 8 without Bootstrap or jQuery.

HTML · Admin dashboard

coreui-free-bootstrap-admin-template

coreui-free-bootstrap-admin-template

A free Bootstrap admin template maintained by CoreUI, built on CoreUI's own UI component library. It provides compiled HTML pages and Pug template source code, covering dashboards, authentication, forms, components, icons, and error pages.

HTML · Admin dashboard

dashboards

dashboards

A collection of responsive dashboard HTML templates open-sourced by Keen IO, built on CSS Grid, offering multiple prebuilt admin data interface layouts.

HTML · Admin dashboard

SB Admin 2

SB Admin 2

SB Admin 2 is a classic Bootstrap admin template from Start Bootstrap, offering dashboards, charts, tables, and common management pages.

HTML · Admin dashboard

Adminator-admin-dashboard

Adminator-admin-dashboard

Adminator 4 is a vanilla HTML, CSS and JavaScript admin dashboard template with a CSS-variable token design system, built-in light and dark themes, no jQuery or Bootstrap dependency, and 18 pages covering dashboards, mail, calendar, charts, forms, tables and error pages.

HTML · Admin dashboard