This is a responsive Admin Dashboard implemented with CSS Grid and Flexbox.
This project is hosted on GitHub Pages. Feel free to 👉 try it out!
- Implement overall layout with Grid.
- Implement sectional layouts.
- Implement buttons, pictures, lists.
- Implement avatars.
- Implement shadow and button animation.
- Use Flexbox or Grid based on context.
- Utilize functions like
minmax(),clamp()to improve grid responsiveness. - Add interactive elements and greetings to header.
- Implement card-like layouts.
- Tone down card description contrast.
- Make it pretty!
- None, as all the requirements of this project were met.
Below are a collection of resources which helped improve my skills ✨ while building the project:
- Cannot include node_modules - Help - Jekyll Talk
- Font Awesome Intro
- css - How do I remove the default link color of the html hyperlink 'a' tag? - Stack Overflow
- css - CSS3 Transition Ease in and out Box Shadow - Stack Overflow
- How To Style the HR Element with CSS
- Practical Uses of CSS Math Functions: calc, clamp, min, max | Modern CSS Solutions
- CSS Grid vs. Flexbox: Which Should You Use and When?
- html - Create a circle avatar from a rectangle image keeping proportions and just using centre of image - Stack Overflow
- Advanced Grid Properties | The Odin Project
Built with ❤️ to The Odin Project, a wonderful Web Development curriculum ~
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent