This is a solution to the Stats preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

Users should be able to:

• View the optimal layout depending on their device's screen size

• Solution URL: Github Repository
• Live Site URL: Github Pages

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

In this project, I had the opportunity to learn and apply several key concepts:

• Semantic HTML Markup: I reinforced my knowledge of semantic HTML5 markup. I utilized appropriate HTML elements like <main>, <header>, <footer>, <section>, and <h1> to structure the content logically, making it more accessible and SEO-friendly.

• Responsive Design: I gained experience in creating a responsive web design that adapts seamlessly to various screen sizes. This project allowed me to practice a mobile-first approach, ensuring that the card component looks appealing on both small and large screens.

• CSS Flexbox: I improved my understanding of CSS Flexbox for layout design. I utilized flex containers and flex items to create a two-column layout within the main content container. This approach helped achieve a responsive and visually pleasing design.

• CSS Custom Properties (Variables): I leveraged CSS custom properties (variables) to define and reuse design-related values, such as fonts, colors, and font sizes. This approach improved code maintainability and made it easier to update styles consistently throughout the project.

• Mix-blend-mode: I explored the use of the mix-blend-mode property to create a color overlay effect on an image. This technique allowed me to add an appealing visual element to the right column, enhancing the overall design.

As I continue to develop my frontend skills, I plan to focus on the following areas for improvement and exploration:

• CSS Grid: While this project primarily utilized CSS Flexbox for layout, I intend to delve into CSS Grid as well. Learning how to combine Flexbox and Grid effectively will provide more layout possibilities and enhance my overall CSS proficiency.

• Accessibility: I want to prioritize web accessibility in my projects by ensuring that the code meets accessibility standards. This includes using appropriate ARIA roles, alt text for images, and keyboard navigation.

• Cross-browser Compatibility: I will continue to focus on ensuring that my projects are compatible with various web browsers. This includes testing and addressing any compatibility issues that may arise.

• Responsive Images: Exploring responsive image techniques, such as using srcset and sizes attributes, will be a part of my ongoing development. This will optimize image loading for different screen sizes and resolutions.

• Code Optimization: I will work on optimizing my code for performance and maintainability. This includes minimizing file sizes, reducing unnecessary code, and adhering to best practices.

• Frontend Mentor - @HectorKayman

I'd like to thank Frontend Mentor for providing challenging projects.