Frontend Mentor - Sunnyside agency landing page solution

This is a solution to the Sunnyside agency landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

This project was bootstrapped with Create React App.

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

Or you can see the final result in our site deployed in Netlify.

Table of contents

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

Note: Delete this note and update the table of contents based on what sections you keep.

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

At the end, the project should be like:

Links

• Solution URL: Git repository
• Live Site URL: Site deployed in Netlify

My process

Built with

• JSX
• CSS custom properties
• SCSS
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library

What I learned

In this project, I learned to use SCSS and its ways of concatenating and nesting classes. In addition, I learned the most used React hooks: useState and useEffect.

Continued development

In my conception, I need to understand better some hooks, like useMemo and useCallback. In some parts of this project, I think I could have use some React hooks, not only these I mentioned.

Author

• Website - Portfolio
• Frontend Mentor - @angelicamarttins
• LinkedIn - LinkedIn
• GitHub - GitHub