Jordypx / photosnapWeb

Frontend Mentor - Photosnap Multipage Website

A marketing website for a photo-sharing application.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources

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: [https://photosnap-web-gold.vercel.app/]

My process

Built with

• Semantic HTML5 markup
• SASS/SCSS
• Flexbox
• CSS Grid
• JavaScript ES6

What I learned

The purpose of this project was for me to get more comfortable using various tools to optimize layout and responsiveness. Through this, I've gained more awareness in which layout tool (Flexbox or CSS Grid) I had to use in which situation.

Useful resources

• A Complete Guide to Flexbox - This helped me incorproate Flexbox into my project.
• A Complete Guide to Grid - This helped me incorporate Grids into my project.