Andrew Duhig

Starting again with web design

January 2019

Having worked on the web for about a decade I have picked up a few things along the way. I'm a designer and my day to day is spent working on visuals not code. I’ve always thought myself “Not very good at coding” but after completing an online CSS test one evening and scoring 9 out of 10, I thought, maybe I’m not that bad after all.

Working as part of a team I very rarely if ever get to code something from scratch. I do love to write code but find my knowledge is what limits me. I have decided I want to get better so I’m going back to basics and building this site from the ground up. Not having my own website makes this the perfect place to start.

I'm only going to use HTML and CSS for the first iterations. I’m not going to fire up a CMS, site builder or refactor any code. I’m going to write it from scratch and then when the time comes I will add other code bases or tools.

Documenting the process

I’m going to document as much of the process here as I can, mainly for my own reference and learning aid but it may be of use to someone else. I will also try to make sure I add a new version number to the footer as I make changes. I’m not going to change it for every small word change but I will do for anything more substantial visual or not. This way I can track how many iterations I create.

I will be working on the site intermittently as and when I get time. That way I’m not setting myself any deadlines to meet and I can just enjoy the process of building.

Start and the rest will follow

Using VS Code text editor and I created an index.html and main.css. I am not going to add any Javascript until I decide it’s needed. I’m also used to using SCSS to simplify my style sheets but for now, I will stick to CSS.

Using the Emmet code completion tool in VS code you type HTML hit tab and it creates the basic structure of an HTML document. This sets up the HTML 5 Doctype, the character set of UTF8, a page title and a link for your style sheet. I made sure my CSS file was named correctly and there you go as simple as that you have a basic website.

My checklist

This is my basic list of things to do, I will add more detail on each point below.

Validation

After running the site through the W3C validator I added a language to the HTML tag lang="en". And I found a few tags that I had just mistyped. Validators are something I often forget to use as browsers these days are so good at fixing issues. It is such good practice, one I’m sure you can automate in some way.

Back home