#Off-Platform Project: Fotomatic

A repository for my Codecademy Off-Platform Project: Fotomatic project in Module 8 of the Full Stack Dev course.

The aim of this project was to fix a broken version of a responsive website, following a spec document provided by Codecademy.

The project spec included pixel-defined font sizes, margin sizes, colors, font families, a navbar with changing content and different specifications for phone, tablet and desktop versions of the page. The assignment specified that proportional measurements such as REM be used, rather than pixels, in defining sizes using CSS.

I chose breakpoints for phones, tablets and desktop at 480 and 800 horizontal pixels.

The site uses a breakpoint between phone and tablet resolutions to maintain unwrapped nav bar and heading text, and several breakpoints above 800 and below 1280 horizontal pixels to avoid issues with wrapping text and margin sizes creating unpleasant layouts. The site varies from spec at these in-between breakpoints.

Personal challenges that arose in this project included:

- not being able to find a solution to adjusting picture length with a dynamically changing width to maintain a desired width to height ration using only CSS and HTML

- how to deal with specs that led to poor layout results at resolutions other than the ones taken into account by the specs (e.g. at sizes close to but not quite reaching tablet size)

- how to define horizontal resolutions for phone, tablet and desktop