Overview

Nectar was my first time coding a website from scratch using Visual Studio Code.

The project gave us a lot of creative freedom, so I created a fictional futuristic drinks brand and built a complete website around its product range.

The site included a promotional hero video, a horizontally scrolling drinks range, product ratings, customer reviews, brand story content, behind-the-scenes content and a newsletter section.

Problem

The main challenge was that I had never coded before.

Unlike designing in Figma, where I could visually move something into place, coding meant understanding why something was not working properly and finding the exact part of the HTML or CSS that was causing it.

I also did not want the final result to feel like a completely static beginner website.

Solution

I built the site gradually using HTML and CSS, starting with the main content structure before moving into more interactive parts.

The product range uses horizontal scrolling so multiple drinks can sit within the same section without making the page unnecessarily long.

I also added hover behaviour to buttons, including a shine effect that moves across them, and used a looping drink advertisement in the opening section.

The purple, teal and bright product colours helped support the slightly futuristic style I wanted for Nectar.

Reflection

This was probably one of the most challenging projects I had completed at the time, but it was also surprisingly fun.

Coding gave me a completely different understanding of websites. Instead of only thinking about where something should sit visually, I started thinking about how the interface actually has to be built.

I did run into technical problems, particularly around the horizontal sliders, but getting those parts working made the final result much more satisfying.

If I rebuilt the website now, I would refine the responsiveness, accessibility and consistency of the code, but for a first coding project I was really happy with how much I managed to get working.