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
• Run the project

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

Links

• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• EJS - EJS templating language
• Express.js - ExpressJS framework

What I learned

I've had the chance to play with CSS grid and ExpressJS framework. It was really useful to use EJS to display the data that was coming from the mocks I put in the folder named config. The most challenging part was coming back to this project after over 6 weeks. In some parts - notably the container elements for the components and some component's CSS architecture could have been done better, which I realised down the road, but I wanted to move on to the next project. :)

Continued development

I need to get better in overall reusable component/CSS architecture, strike a good balance between reusability and cleanliness of code.

Run the project

1. Clone the repo and npm install
2. Run locally by npm run start-nodemon