Frontend Mentor - Photosnap Website solution

This is a solution to the Photosnap Website 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
• Author

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Live Site URL: Photosnap

My process

Built with

• HTML, CSS
• React - JS library
• MUI - React component library

What I learned

• runtime imports to adjust for images at different screen sizes

updatedStories.forEach((story) => {
  import('assets/stories/desktop/' + story.image)
  .then(img => imageList.push(img.default))
})

• using CSS grid for responsive layout of repeated cards at different dimensions
• using styled components as lightweight styling for reused components
• use opacity for creating fainter text colors for body text instead of setting the color directly allows it to be usable for both light and dark themes
• learn to better use figma - measuring distances between layers

Continued development

I will reduce my reliance on UI librarys: Practice good practises in development using React from scratch - PropTypes, CSS variables

Practice using typescript.

Author

• Website - Dean Yang (In development)
• Frontend Mentor - @nekopudding