Spring 2021
Web Development Challenge

Breathing App Product Page

Project #6 - Album Landing Page

Band Demo screenshot, mobile and desktop views

Start Date: April 14

End Date: April 16

Blog Post

Here I gave myself something a little more fun to work on - a promotional landing page for some fictional band’s new album. I ended up using Parcel again for my development and build environment, though this time I used Sass for my stylesheet preprocessing, and I ended up migrating to V2 toward the end of the process due to build errors. To deal with the project’s image-reliant design, I also spent some time learning how to work with the .webp image format - and now that I’ve seen the difference it makes, I realize that I should have been using these all along.

Similarly to the desserts blog I did earlier, I feel like I failed the design I started out with, though I’m starting to get a feel for why that is. I can capture the look and feel of a design in CSS fairly easily at this point, but I’m falling short on implementing layouts in a few ways. While I don’t really have the space to expound on those here, I will try to improve on them when I’m implementing more “ambitious” designs like these ones.

Remarks

I'm not sure why I failed to mention it in the initial blog post, but I also made some use of Javascript-based animation for this project. Maybe I left it out because it's fairly underwhelming - the polaroid featured on the site's title/hero section sways back and forth slightly in midair. In the design, the polaroid was meant to be hanging from a string, but then I couldn't work out how to add the string.

Beyond that, the execution of this project failed for mostly the same reason my earlier recipe blog did - my layout skills are lacking in a few areas, and I even mention as much in my initial post. Unfortunately, I don't get much chance to improve on these skills for the rest of April, since I'm too preoccupied with other concerns. Now that the month is over, though, this isn't a shortcoming I intend to let stand for long.

Breathing App Product Page