https://github.com/dak79/odin-admin-dashboard
CSS Grid
https://github.com/dak79/odin-admin-dashboard
css git html
Last synced: about 2 months ago
JSON representation
CSS Grid
- Host: GitHub
- URL: https://github.com/dak79/odin-admin-dashboard
- Owner: dak79
- Created: 2022-08-12T19:59:59.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-05-26T13:16:15.000Z (about 3 years ago)
- Last Synced: 2025-04-07T17:22:02.410Z (about 1 year ago)
- Topics: css, git, html
- Language: HTML
- Homepage:
- Size: 732 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Admin Dashboard
## Live Preview
[Admin Dashboard](https://dak79.github.io/odin-admin-dashboard/)
## Description
This project is part of
[The Odin Project - Full Stack JavaScript Path](https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-admin-dashboard).
The main goal for this project is to use CSS Grid, so as layout choice I apply
Grid almost everywhere even is some occasion when Flexbox could be a reasonable
choice.
## Technologies
- HTML
- CSS
- Git
## Assignment
- Step 1: Set Up and Planning
- Set up your HTML and CSS files with some simple dummy content, just to make
sure you have everything linked correctly.
- Set up your Git repository.
- Download a full-resolution copy of the
[project design](./dashboard-project.png) file and get a general idea for
how you’re going to need to lay things out in your HTML document.
- Step 2: Layout
- Start by writing out the HTML elements for the sidebar, header and
main-content containers.
- In your CSS file, apply Grid properties until you have this basic layout
built.
- Step 3: Nesting
- Taking it one section at a time, begin nesting child elements under the
parent elements in the HTML. Remember that you can keep making grid
containers within grid containers.
- In the sidebar, use more grids to lay out the navigation and branding
sections.
- In the header, use more grids to lay out the search bar, user info and
buttons.
- For the main-content, use more grids to lay out the projects, announcements
and trending items.
- Fill out some dummy content and placeholder images so you can position all
of your grid items.
- Step 4: Gather Assets
- Once you have your grid layout complete you can either recreate the
dashboard example above or style your own design.
- Check out some color palettes from Tailwind.
- All of the icons and more can be downloaded as SVGs from Material Design
Icons.
- Choose your own fonts! The design example uses Roboto, which is available
with Google fonts.