This is a solution to the Social media dashboard with theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
- Couldn't figure out how to do gradient for border-top for the instagram stats (both mobile and desktop) as shown in the image below.
- Desktop view: There is a huge gap between the "stats div" and the "daily stats div" as shown in screenshot below.
- Solution URL: Solution on Github here>>
- Live Site URL: Live site here>>
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Mobile-first workflow
This really forced me to improve my HTML, CSS and JS knowledge:
a. How to group elements that belongs to a same parent together to give them same style if they share same style and futher give them specific style when necessary.
a. How to do mobile first design using css "@Media screen to define the size of the screen" and same applies to other device(s) sizes.
Example:
/* Mobile style */
@media screen and (min-width: 375px) {
}b. How to use "grid - display" to do layout in CSS - very important thing to know in css.
Example:
/* Grid */
.main-comp{
display: grid;
grid-template-rows: repeat(3, auto);
}
/* The CSS style takes a class of main-comp that has 3 divs or 3 elements and breaks them to a 3 horizontal layout or divided it into 3 seperate rows on the screen with auto size of the screen. */- Understand more about CSS
- Convert this to React.
- Website - Damilare Oyediran
- Github - @ddoyediran
- Fork on Github - @Github
- View solution - (https://social-media-stats.vercel.app)
This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.