{the jump} - Homage Piece - NOWNESS

This project was made while studying on the full-stack development course from {the jump}.

The aim of this project was to replicate an existing site from scratch, using only HTML and CSS, so that at a glance it looked the same.

I chose to replicate NOWNESS, as it had all the main elements we had covered while also presenting some challenges in terms of replicating it using only HTML and CSS.

For example, the animated dropdown burger menu and sliding checkboxes used JavaScript, so replicating these in CSS alone was a challenge that allowed me to further my learning.

Changes I have made:

1. Whereas the original NOWNESS site uses Flexbox exclusively, this project uses a mixture of Flexbox and CSS Grid as it was a more efficient way to achieve the desired layout.

2. The original site uses max-width media queries, thus a desktop-first approach. I used a mobile-first approach instead, therefore I have exclusively used min-width media queries. This is to ensure the best display on mobile.

Things to improve

Since the primary aim was to consolidate knowledge of HTML and CSS by creating a visually accurate copy of an existing website, this is where I have focused. However, there are things I plan to revisit and improve in the future:

• Refactor CSS to SASS. This would increase efficiency and keep the overall size smaller, too.
• Refactor classes using Block Element Modifier model.