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 and focus states for all interactive elements on the page
- Bonus: Use the local JSON data to dynamically populate the content
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Vanilla JavaScript
- JSON data handling
This project helped me practice several important front-end development concepts:
-
Responsive Design: Creating a layout that works well on both mobile and desktop screens using CSS flexbox and media queries.
-
CSS Custom Properties: Using CSS variables to maintain a consistent color scheme and make future updates easier.
:root {
/* Primary colors */
--light-red: hsl(0, 100%, 67%);
--light-red-bg: hsla(0, 100%, 67%, 0.1);
--orangey-yellow: hsl(39, 100%, 56%);
/* More color variables... */
}-
Dynamic Content Loading: Working with JSON data to populate the page content dynamically using JavaScript.
-
CORS Understanding: Learning about Cross-Origin Resource Sharing (CORS) issues when working with local files and how to resolve them. I had to modify my approach to handle JSON data directly in the JavaScript file to avoid CORS errors when opening the HTML file directly from the file system.
In future projects, I plan to focus on:
- Implementing more advanced JavaScript functionality
- Exploring CSS Grid for more complex layouts
- Learning about proper error handling in fetch operations
- Setting up local development environments to avoid CORS issues
- MDN Web Docs - Fetch API - Comprehensive guide to using the Fetch API.
- MDN Web Docs - CORS - Helped me understand CORS issues and how to resolve them.
- CSS-Tricks - A Complete Guide to Flexbox - This helped me implement the responsive layout.
- Frontend Mentor - @Ayokanmi Adejola