Creating a Dummy Site - HTML

Take a Step Back

Before jumping straight into a Jekyll site, I decided to create a single page "Dummy" site to practice my HTML and CSS and to use as a reference when it comes to creating Jekyll layouts and structuring the site.

Whilst this was probably a bit of a long-winded way of proceeding, I felt it was helpful to make a concrete example of what I wanted my page to look like before adding the extra layer of generality that Jekyll can provide.

HTML Bare Bones

For my website, the HTML was pretty standard stuff, although, this was my first time using the semantic tags helpfully introduced into HTML5 (such as header, nav and footer.)

The layout of my HTML structure is pretty standard stuff, a header section with a picture, h1 heading (title) and a nav bar with links (ul li a) to the different sections of the site.

Beneath the header, I've got a main section which houses most of the pages content. For my dummy site, I only require a brief page intro, plus I added some Lorem Ipsum filler text to help me see what text will look like as it flows around images etc.

At the bottom of the page I have a footer, with two seperate divs, a contact section, and a small copyright info div. (Not that I think anyone would want to pinch my work just yet...)

All this is again very standard stuff that hasn't REALLY changed much since the old skool HTML I was used to almost a decade ago...

These basic elements end up looking like this:

and the HTML looks like this.

After we have our skeleton, it's time to spruce it up a little with some CSS!