This is a solution to the Results summary component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
-
View the optimal layout for the interface depending on their device's screen size
-
See hover states for all interactive elements on the page
-
Note: Although there is a JSON file included, I did not use it to populate the data dynamically as I still haven't learned JavaScript as at the time of deploying this (3:33 PM; 7th Oct, 2023)
Screenshots of the site to give you a quick view of the site on both the desktop and mobile view.
- Solution URL: GitHub Repo
- Live Site URL: GitHub Page
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
This is my first attempt at both mobile-first and responsive design. It is honestly easier than I thought it would be. I'm sure I'm saying this only because I haven't been into it for a long time, but still, it was pretty easy. It took two days to complete though lol.
I would love to dive deeper into flex and grid layouts. I believe they're very powerful tools that would aid in my becoming a better web developer.
For this project, like usual, I googled a ton of things, even basic things that I honestly should've know by heart at this point. I also used the free version of OpenAI's ChatGPT and Google Bard.
Can't forget the MDN Web Docs now can I. Best guide I've received so far in my journey.
- Website - Ibrahim Suleiman Muhammad
- Frontend Mentor - @ebeeraheem
- Instagram - @ebee_sule
- Twitter - @ebeesule
I would like to acknowledge myself for being resilient and not giving up.