Start Date: April 4
End Date: April 6
Blog Post
This was my first design-centric project: two sample pages depicting a hypothetical, dessert-themed recipe blog. In the past, I’ve typically preferred to stick with vanilla CSS when working on stylesheets, so this time I decided to try out a preprocessor to see what it could do for me. I wanted to save some of the more popular ones for later in the month, so I went with Less.js this time, plus Parcel.js for a simple development and build environment. One thing I didn't use was an HTML preprocessor, which was definitely a mistake - keeping the common elements in sync across both plain HTML files wasted more of my time than I’d have liked.
As for the design itself, this one kind of broke my heart. I was able to produce a mock-up that I thought looked quite good, but it seems my CSS layout abilities weren’t quite up to realizing it in the browser. I also didn’t give myself enough time to pick out and process the site’s imagery - there are a handful of jagged edges from lazy crops on display. I’m happy with a few pieces of the final product, though. In particular, the colored overlays on the front-page recipe summaries look almost exactly as they did in the mock-up.
At the end of the day, I had no real trouble with my tools this time. And while the final result was disappointing, figuring out what I can and can’t deliver quickly is the whole point of this month, so I can’t call it a loss.
This isn’t the last time I’m going to focus on design this month, though. But I think I’ll go for a more standard, template-driven design for my next attempt, and see if I can nail down exactly where I’m falling short.
Remarks
My feelings on the layout and overall CSS haven't changed in the weeks since I wrapped this one up - I feel as if I could probably produce a better version of this concept with just a bit more time and practice. Practice being important in this case, because one running theme this month was that I've got a few bad habits when it comes to designing and implementing web layouts. In particular, I need to learn to work more effectively with screen size and aspect ratio, both at the mockup and CSS stages.
This also marked the first time I used the Parcel.js bundler, which I ended up relying on a few times throughout the month. I can't say that using it was a mistake, but the other running theme this month was project tooling - the development and build pipelines that make modern web development so easy and efficient. I hadn't realized how much I'd come to take these pre-built, black-box tools for granted. That realization would come soon enough, though, during my attempt at Project #3.