This is a beautiful and modern website I built for a trendy full-service hair salon that includes a sidebar navigation menu and a responsive image lookbook.
Link to project: https://wanderlustsalon.netlify.app
Tech used: HTML, CSS, JavaScript
This website started with just an image of a layout template. I coded it from scratch knowing I wanted it to be for a trendy hair salon. This was the second static site I had built so I had some experience under my belt and I felt pretty comfortable with most of the key concepts needed to build it out. While looking at the layout template, I quickly mapped out the HTML elements in my head to form a rough draft of the content structure. With that in mind, I got started with writing the HTML making sure to use proper tags that make the most semantic sense and allow for accessibility options like screen readers. With the site content completed, I got to work on styling with CSS. I built out the core layout first using floats, borders, and placeholder images as a first pass, then added color, and pulled in some beautiful images from Unsplash. I wanted to include a sidebar navigation panel for smaller screens, but I had never built one before, so I watched a couple tutorial videos and read up on documentation from the MDN to help me out. From there I just needed to make some minor tweaks and add media queries for responsiveness.
While I was adding my media queries, I noticed that some parts of the page just didn't look right on mobile no matter how I moved things around. I realized that while vibrant background images look great on bigger screens, they can be too distracting on small screens. In these sections I decided to simplify things with a solid background color for mobile devices. This made for much more readable text and looked a lot cleaner in general.
I learned a lot about the importance of content decisions while building this site. As I was working on the mobile layout, I was having trouble fitting everything on the page and making it look good. Certain sections started looking scrunched up and text was getting harder to read. After stepping away from the computer for a quick break, I suddenly realised that maybe I don't need to fit everything on the screen. Sometimes the best content decision is to completley remove something if it's not that important to the main contents of the site. I also learned how to build a sidebar! It took a bit of trial and error, but I managed to get it looking great, and I think it adds a ton of functionality to the site.