Frontend Mentor - Single price grid component solution

This is a solution to the Single price grid component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Overview

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• See a hover state on desktop for the Sign Up call-to-action

Screenshot

Desktop Screenshot

Mobile Screenshot

Links

• Solution URL: View
• Live Site URL: Visit

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Next.js - React framework

What I learned

Throughout this project, I gained valuable insights in the following areas:

• Semantic HTML5 Markup: I prioritized using semantic HTML5 tags to enhance accessibility and maintain a well-structured code. This included utilizing tags like <main>, <section>, and <footer> appropriately.

• Flexbox: By employing CSS Flexbox properties like display: flex, justify-content, and align-items, I achieved a responsive and centered design for the component.

• CSS Grid: I leveraged CSS Grid properties such as grid-template-rows, grid-template-columns, and grid-template-areas to create complex and responsive grid structures.

• Mobile-first Workflow: I followed a mobile-first approach, designing and developing the component for mobile devices initially and then enhancing it for larger screens.

• Next.js - React Framework: I utilized Next.js, a React framework, to build the component. This included creating a Next.js project, installing dependencies, and setting up the project's folder structure.

Additionally, I addressed specific user requirements by ensuring the component's layout adapts seamlessly to different screen sizes. I also implemented a hover state on desktop for the Sign Up call-to-action, enhancing user engagement and interaction.

Continued development

In future projects, I plan to focus on the following areas:

• Responsive Design: Enhancing my understanding of media queries and advanced techniques for seamless experiences across devices.
• CSS Animation: Exploring CSS animation techniques to create engaging and visually appealing interactions.
• JavaScript Interactivity: Improving my JavaScript skills to add dynamic and interactive elements to components.
• Performance Optimization: Further optimizing code and assets for faster load times.
• Accessibility: Deepening my knowledge of accessibility standards to create inclusive experiences.

Useful resources

• I found the article titled A guide to learning CSS Grid by @jonsuh to be immensely beneficial. It provided a comprehensive guide on CSS Grid and equipped me with the knowledge necessary to successfully implement it in this project.

Author

• Website - Ahsan Raza
• Frontend Mentor - @AhsanCommits
• Twitter - @AhsanCommits
• LinkedIn - @AhsanCommits