Sunnyside Landing Page

Frontend Mentor - Sunnyside Landing Page

This is a solution to the Sunnyside Landing Page 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
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

Links

• Solution URL: Sunnyside Landing Page Solution
• Live Site URL: Sunnyside Landing Page

My process

Built with

• Semantic HTML5 markup
• Accessibility:
  • Keyboard test
  • Screen reader
  • Testing tools: axe DevTools, Wave, pa11y
• CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework
• Styled Components - For styles

What I learned

Figuring out how to develop the grid section was a big challenge. I'm not satisfied with the way I did it, but it was interesting and fun to see the final result.

Some interesting topic I discovered while doing this project was Responsive Images. Since Next.js take good care of it, I'll probably apply this concept in some vanilla project or with Vite.

Continued development

• Buttons with "Learn More" text isn't that accessible. Giving a better description should be a good improvement.

Useful resources

• Google web.dev | Responsive images
• MDN | Responsive images

Author

• Frontend Mentor - @EstherMarie

Acknowledgments

I would like to thank every happy person who helped me with suggestions, links and examples! 😄