As a web developer, it’s an individual responsibility to make sure your skills are always improving. Actually challenging yourself to Build A Thing is what improves your skills. There are many distractions and activities that can give the illusion of skill, but do not be fooled! You don’t know everything there is about how to Build A Thing, so you work around your knowledge gaps, and produce something anyway, rough edges and TODOs included.
Front-end mentor is a website for front end developers to improve their skills through challenges of various skill levels. The idea is you are provided with some basic materials that you would expect to have access to in a “real-world” situation, and you are invited to do the challenge and submit it for community feedback. I decided to take up one of the more challenging ones, but I found the blank page looking back at me intimidating. Where do I start? How do I fit this into my day among my many other responsibilities? What would Bob Ross do?
Bob Ross famously learned how to paint over years during his lunch breaks. His style of painting grew out of his constraints.
The challenge is to build a fictitious space travel website. The provided design file shows responsive layouts for mobile, tablet, and wide screen. It has fluid font sizes, responsive background images, and interactive gallery components. There’s some dynamic JSON content that, in the real world, might come from a content management system. This challenge happens to come with a video walkthrough course from Kevin Powell, the prominent CSS youtuber. I completed the challenge while getting a walkthrough creating my own CSS utility classes and grid system.
I built it using Hugo, Sass, and a small JavaScript library called surreal. Hugo comes prebuilt with Sass in the snap package binary, so switching from vanilla CSS to Sass here was quite easy. I definitely think Hugo should see more use, given the amount of utilities built in. Surreal lets you write js inline with your html in <script> tags, saving you the effort of managing js in some other file. I highly recommend it for adding a bit of js to a static website. It works great with Hugo!
Having access to the detailed figma designs and video series saved me a lot of decision fatigue. I know that the thing I built aligns with current trends in web development. Furthermore, having the expert commentary provides a lot of background knowledge. Even though I do this for a living during the day, I generally don’t Build A Thing entirely from start to finish. I’ve already started the next challenge without a video series. Here is a link to the finished product, feel free to have a look!