Building a product website in half a day with no web dev knowledge

I had an interesting challenge at work a month or two ago. It went something like this, “Michael, while we’re waiting for the official website to get rebuilt, it would be great if you could build a website for our product as an alternative. Spend a day on it, let’s see what you can get.”

I love this kind of task or challenge.

I’m going to talk you through the process of how I did exactly that. I unfortunately can’t show the final result (since the product hasn’t officially launched yet – nor is it guaranteed we’ll be using this rapid-fire website), but I’ll be giving some general advice and my approach for getting a great-looking product page up fast.

Just a warning, this isn’t a step-by-step guide. It’s a chronicle of my mindset, and how I approached this problem. If you write code for a living or as a hobby, you’ll be able to follow in my footsteps without any major issues.

Realize a few things

Time-pressed projects are all about understanding your strengths and weaknesses, and aggressively embracing them. A few things I had to realize before starting:

1. I don’t know much about web design (or design in general).
2. I want designing and adding content to be as simple and quick as possible.
3. I want hosting to be as simple as possible.

I don’t know much about web design

There’s two important things to understand when it comes to web design. There’s structure, and then there’s styling. HTML is structure. CSS is styling.

I didn’t know very much about web design, but I did know some. The usual elements, h1, h2, p, img, etc. were familiar to me (as they should be to anyone who is mildly technical – especially given how often we interact with the internet). I was also loosely familiar with some very basic styling using CSS. But actual principles of arranging elements (such as the peculiarities of the different position types, for example) and some deeper CSS topics were wholly unfamiliar to me.

I don’t have the time to blindly hack-by-example without having some more fundamental level of understanding, so I had to address this hole in my knowledge first. At least then I’d know what terminology to Google.

Enter Skillshare. Specifically, The Basics of Web-Design Layout. You can try Skillshare for a week for free without any promotional code and, since we’re only after a vertical slice of knowledge for one day, that’ll suit our purposes just fine. By the way, I’d highly recommend giving the rest of Skillshare a go (even beyond the trial, if you have the cash). Some of the other courses are really fantastic too. Fun shout out to the instructor, Rich Armstrong, who is South African (recognized the accent almost immediately)!

You can blast through the course in just over an hour, and it should give you a general enough understanding of HTML / CSS to not be completely lost. I found it was perfect for me.

I want designing and adding content to be as simple and quick as possible

This is important. I only have a couple of hours after all. There are two approaches here given the time constraint.

I could write plain HTML + CSS.

This is, by far, the simplest approach. It’s even relatively easy to bootstrap – there are plenty of templates floating around online that look ok (or, you can go so far as to actually use Bootstrap).

The problem is that it’s difficult to maintain and write content if you’re editing HTML by hand – especially across (potentially) tens of pages. HTML also isn’t the best file format to write prose in – formatting and layout isn’t friendly, and you have to wrangle with tags and various elements constantly (while keeping in mind the behaviour across multiple browsers). Worst of all, if I needed to rely on others to write or modify content, they’d have to familiarize themselves with HTML.

No. Unless you’re writing the simplest of websites, I don’t want to be writing HTML by hand.

I could write it in Markdown + generate the HTML

But what about Markdown? Markdown, although not perfectA testament to this is the literally hundreds of Markdown dialects out there, is a relatively wonderful markup language that is easy to learn, looks great, and enjoys ubiquitous support.

The great think about Markdown is that there are plenty of toolsPandoc being perhaps the most famous. that can convert Markdown into anything – from PDFs to HTML. All we’ll have to do is attach some CSS to make things attractive, and we’ll have something resembling a website.

This makes Markdown the obvious markup language of choice for writing content for the website.

I want hosting to be as simple as possible

Simple hosting means minimal setup (ideally, none), low cost and minimal infrastructure.

“Why not just use Wordpress?” is something you’ll hear a lot. Wordpress is wonderful. But it requires a database, a PHP server, a web host, an admin account, yada yada etc. The list goes on. Sure, shared hosting costs only a few handful of dollars per month, but there’s friction. I don’t have time for friction. I don’t want to deal with friction. I want a website I can archive up and mail to somebody, or FTP to a web server. So something like Wordpress is out.

Remember out choice of Markdown? That was deliberate. There are tools known as static website generators that specialize at ingesting Markdown files and generating perfect HTML as output. Choose a beautiful theme, add a few tweaks, et voilà! You have a stunning website.

Sure, you’ll probably need to tweak the theme a little bit. But that’s only a little bit of HTML and CSS, and nothing you can’t handle after a quick blast through Skillshare we discussed earlier.

What’s great about this approach is that the end product is only HTML + CSS. No database. No PHP server. In fact, it doesn’t get simpler. It’s like we’re back in the 90s. We just plop it behind a CDN, and it’s served to the world. It’s as simple as drag-and-drop. It’s great!This concept is rapidly become an influential movement on the internet, collectively referred to as the JAMstack.

Pulling it off

Time to roll up our sleeves.

We’ve addressed all of our concerns. We’ve run through a quick course in an hour or two to grasp the gist of HTML / CSS and web design principles.

We’re going to write content using Markdown, since it’s easy to learn, easy to read and has widespread support.

And we’re going use the simplest possible hosting solution by generating static HTML and CSS from our Markdown files using a static website generator.

Let’s get cracking.

Use Hugo as the backend

There are many static website generators out there. Some are better than others. Some offer more features than others. So how’d I settle on choosing Hugo as my generator of choice? Simple – I looked at a subset of the most popular generators out there (using popularity as proxy for quality), created a shortlist that minimized setup time, and browsed each generator’s theme repositories to get an impression for who had what I was looking for.

Hugo ticked all the boxes.Jekyll came in a close second – but the lack of a centralized theme repository was a bit frustrating for getting set up quickly. As a bonus, it also uses the Go templating language (since Hugo is written in Go), which I’ve worked with before.Fun fact, this very blog is also generated using Hugo!

Use a theme you like, customize it.

Next, we’ll need to choose a theme that’s relatively close to the vision we want. If you don’t have a clear vision, just go with what you like. I liked the Serif theme. Good choice of font, supported different pages, and was reactive (so it looked great across a range of screen sizes).

But some things I didn’t like.

• The “Hugo Serif” title was an image, not generated HTML.
• The dominant colour needed to be changed to our brand colour.
• The default image needed to be changed
• The “Contact” section with the telephone and email needed to be a form instead.
• A few other tweaks that are too small to mention.

This is where we crack open our new-found HTML / CSS knowledge, and modify the theme to look more or less the way we want it to. Remember, this isn’t the time for perfectionism. We only have half a day. So we’re putting in 20% of the effort to get 80% of the benefit. Fix the glaring issues, and hide the rough edges.

Visual resources and elements

But what about visual elements such as images? They’re key to making a website look professional and coherent.

Enter Undraw. This project by Katerina Limpitsouni makes her a personal hero of mine. Undraw is an actively-maintained repository of open-source illustrations that are free for anyone to use (commercial or otherwise). The illustrations are available in both PNG and SVG format, and can even be customized with a dominant colour (to match our brand! Yes!).

The illustrations also happen to be absolutely gorgeous. Katerina, thank you.

I used a number of these images (including on the landing page) where relevant to add some visual flair of professionalism.

For a range of other resources (some freely available, others with a bit more restrictions), check out NoDesign. NoDesign is a repository of design resources for developers to keep them developing, rather than designing (a god-send until you can afford to hire a real designer).

Last steps: write copy and deploy

The last thing to do is populate the website with information relative to our product. This was as simple as re-purposing some planning documentation and content from a slide deck or pitch deck that we had floating around. Thankfully, we’re writing in Markdown, so this is a trivial process.

Once we’re done, we generate out our website to static HTML + CSS using Hugo.

Copy-paste your generated website to an Azure Blobstore container (or S3) for internal hosting (i.e. not exposed to the web, for now), both of which support hosting static websites, and you’re done!

Congratulations – you’ve built a great-looking product website in half a day with almost no prior knowledge.

Conclusion

Thanks for tagging along with me on this whirlwind process where I went from minimal HTML/CSS knowledge to a full-blown product website (pictures, styling, even content) in about half a day by being laser-focused on which technology is best suited to the task (static website generators), and how to leverage existing content (themes, images) to get impressive things done fast.

Till next time, Michael.