The Challenge

Jukebox was the final assignment for a 10 week web development class, completed in March 2020 at BrainStation. BrainStation provided the design and assets.

About the Project

Timeline: 2 weeks
Role: Web Developer
Languages: HTML, CSS
Tools Used: Visual Studio Code

Jukebox Requirements

• Be fully responsive leveraging media queries and demonstrate different column dimensions on mobile than they do on desktop

• Use Flexbox

• Include proper semantic HTML and CSS class naming

• Incorporate CSS modifier classes

• Include multiple images, including a hero with a text overlay

1. Plan

I broke the design down into sections and components. Consideration was given to different components, styles and sections that could be reused, as well as how to leverage CSS positioning and Flexbox.

2. Build

Section by section, using HTML and CSS, I built Jukebox, taking pains to ensure that the syntax was correct and to avoid duplicating components and styles where possible.

3. Make Responsive

To make Jukebox responsive, I leveraged media queries, taking into consideration breakpoints, as well as placement and styles of components at various viewport sizes.

4. Refine

The final step was to refine Jukebox to make it pixel perfect, as well as to add some extra features, such as hover-states to to the buttons.

Concluding Thoughts

As a product designer I spend a lot of time thinking about the user, their challenges and how I can improve their experience and remove friction. However, I took this web development course as I wanted to understand more about another important stakeholder: the developers I work with on a daily basis, how they think and work. This course helped me understand a little about how digital products are built and the challenges developers face. It also helped me learn to speak some of the same language.

While the user will always be top of mind, I now have a greater appreciation of some of the challenges that developers face, and the importance of working together to solve problems in ways that make sense from a backend perspective in addition to from a user perspective.

Lessons Learned

• The mobile experience needs to be considered upfront when designing for desktop, including layouts, sizes, padding, breakpoints and so much more.

• Like when designing, Google is a great resource if you need help or inspiration.

• It is hard to develop others’ designs—ensure that decisions and designs are clearly documented so that developers understand the functionality and intended impacts of a design.