https://github.com/luzefiru/odin-admin-dashboard

A Dashboard View Page based on The Odin Project's guidelines to practice intermediate HTML/CSS with a strong emphasis on CSS Grid.
https://github.com/luzefiru/odin-admin-dashboard

Last synced: 4 days ago
JSON representation

A Dashboard View Page based on The Odin Project's guidelines to practice intermediate HTML/CSS with a strong emphasis on CSS Grid.

• Host: GitHub
• URL: https://github.com/luzefiru/odin-admin-dashboard
• Owner: Luzefiru
• Created: 2023-02-17T06:41:26.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-20T11:56:13.000Z (almost 2 years ago)
• Last Synced: 2024-11-09T20:12:51.783Z (2 months ago)
• Language: HTML
• Homepage: https://luzefiru.github.io/odin-admin-dashboard/
• Size: 691 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# odin-admin-dashboard

A Dashboard View Page based on The Odin Project's guidelines to practice intermediate HTML/CSS with a strong emphasis on CSS Grid.

This project was the synthesis of all the Intermediate HTML/CSS lessons I studied during the course. After making the [Holy Grail Web Layout]() with Flexbox, I am ecstatic to use Grid instead due to its simplicity and `grid-template-areas` and `grid-area` string value flexibility.

Using Flexbox with Grid allows for very simple layouts because of the accuracy of Grid and the flexible growth of elements to take up extra grid space thanks to Flexbox. I finally understood when to use `auto` `margin` for Flexbox children. It gives me more flexible in positioning my items in a container, notably the bottom-right side for my cards' buttons. `margin-top` basically forces the element to consume all extra space on top of it and pushes it to the bottom of the Flexbox container. `align-self: flex-end;` is used to push the element to the right side, achieving that bottom-right alignment.

```CSS

.projects__card__buttons {

  align-self: flex-end;

  margin-top: auto;

}

```

This was my biggest takeaway for bottom box shadows for that "floating header" effect. `box-shadow` allows us to manipulate the shadow's width with the 4th value right after the shadow's blur radius. This allows me to shrink the shadow's width to the center and since my horizontal offset was `0px` with the `12px` vertical offset towards the bottom, it makes the shadow only appear at the bottom of the container.

```CSS

nav {

  box-shadow: 0px 12px 8px -8px var(--primary-shadow);

  z-index: 1;

}

```

I'm still not sure when to use `repeat(auto-fit, minmax(, 1fr)` though. I hope I can use it in the future other than these:

I need to improve on:

- Flexbox alignment in conjunction with Grid

- semantic HTML

- staying consistent with BEM CSS

# Output

### [Visit the Website Here](https://luzefiru.github.io/odin-admin-dashboard/)



# Requirements

These were the requirements in The Odin Project's [Project: Admin Dashboard](https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-admin-dashboard) site to serve as a guide for layout. Other aesthetic choices and implementations solely depend on the programmer.