raymart-evangelista / admin_dashboard

project from The Odin Project's Intermediate HTML and CSS Course

admin_dashboard

project from The Odin Project's Intermediate HTML and CSS Course

• Font: https://fonts.google.com/
• SVG Icons: https://materialdesignicons.com/
• SVG Avatars: https://getavataaars.com/
• Box Shadows: https://getcssscan.com/css-box-shadow-examples

With this project, I didn't really put much thought into the responsiveness for when the window becomes smaller than usual. I focused primarily on formatting the layout for desktop windows. I thought I would only be utilizing Grid during this project, but I found myself also utilizing Flex as well. With this project, I focused mainly on layout and look, so I didn't implement a real search text field, search button, or clickable elements on the webpage.

First, I created the html flow with div containers and placeholders for descriptions or images, and I decided to also create classes I thought would be useful such as "icon" or "profile-photo". Next, I used CSS to start creating the overall layout of the webpage. Then I started focusing on sections at a time such as working on the navigation menu, then the header area, then the main articles area and working on each sub area. I would add more div containers into the html when I believed one was necessary to group elements together as well. Furthermore, By utilizing Google search I was able to look for css styles I didn't know how to do. Some search examples include "css box shadow examples" and "css one side border colors". I also utilized previous lessons I completed from The Odin Project.

Overall, this project was challenging and fun enough to complete over the course of a couple days. This project focused on using Grid, and I'm looking forward to the lessons where I learn about more responsive design where I can turn a desktop webpage into a mobile webpage.