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.

Table of contents

• Overview
  • The challenge
  • Desktop design preview
  • Links
• My process
  • Built with
  • Useful resources
• Author
• Read more of starting with Vite
  • Available Scripts
  • Deployment

Overview

My challenge was to build out Sunnyside agency landing page and get it looking as close to the design as possible. Designs could be found inside the /design folder and Style Guide in file style-guide.md.

The challenge

Users should be able to:

• View the optimal layouts for many screen sizes.
• See hover states for all interactive elements on the page

Desktop design preview

Links

• Github repo: https://github.com:Mary2021/sunnyside-landing-page.git
• Live URL: https://mary2021.github.io/sunnyside-landing-page/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• This project was bootstrapped with Vite. Read more

Useful resources

• HTML5 Semantic Tags - This helped me better understand of the aim of HTML semantics.
• the Folder Structure for React Project - This article explains the Folder Structure for React Project.
• Re-render a React Component on Window Resize - This article explains how to add an event listener for the resize event.
• Build A Responsive React JS Website - Clint Briley Code Commerce video channe has very good tutorials for begginers.
• The Markdown Guide - Get more help with writing markdown.

Author

• Website - Mary P

Getting Started with Vite

Run npm create vite@latest my-react-app -- --template react to start a React app template.

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. Vite requires Node.js version 18+ or 20+.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Available Scripts

In the project directory, you can run:

npm run dev

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

The page will reload when you make changes.\

npm run build

By default, the build output will be placed at dist. You may deploy this dist folder to any of your preferred platforms.

npm run preview

The vite preview command will boot up a local static web server that serves the files from dist at http://localhost:4173. It's an easy way to check if the production build looks OK in your local environment.

You may configure the port of the server by passing the --port flag as an argument.

{
  "scripts": {
    "preview": "vite preview --port 8080"
  }
}

Now the preview command will launch the server at http://localhost:8080.

Deployment

• Set base in vite.config.js:

export default defineConfig({
  ....
  base: '/reponame/'
})

• Add workflow. Read more https://vitejs.dev/guide/static-deploy.html#github-pages