Kev Quirk|

Menu

Author: Kev Quirk

Hi, I'm Kev and I'm a cyber security professional from England. I use this site to share my thoughts and ideas from time to time.

Removing Comments – 3 Months On

Three months ago I decided I was removing comments from this website. Did I make the right decision, or will I be bringing them back?

If you can’t be bothered to read my previous post, the TL;DR is that dealing with spam and useless comments was taking too much of my time.

Was it the right move?

In short, yes, I think it was. Since removing comments I’ve been able to free more time up for writing posts, and I haven’t had to deal with comments that add nothing to the post itself.

The addition of the contact me link in place of the comments form seems to have worked really well. There has been a marked increase in people emailing me with questions.

This is great, because taking the time to actually email me means that they have something they really want to say, which means the engagements have been much more positive and interesting.

Will I bring them back?

No. Well, not in their traditional form at least. If I ever do decide to bring comments back, it will be in a similar way to how Gilles Chehade does it on his blog.

Basically, any post he creates has a corresponding Github issue. This issue is linked at the bottom of each post, and if people want to comment, they can do so by adding a comment to the issue.

I think this is a great way of providing a mechanism for people to comment easily, but it has enough of a barrier to entry to stop the spammers and useless comments.

Conclusion

Overall, removing comments from this site has been successful, I feel. My interactions with readers have improved, both via email and via my social accounts. And I haven’t had to manage troves of spam comments.

If you’re on the fence about removing comments from your site, I’d say do it. It has really worked well for me so far.

The Case For WordPress

Apparently, WordPress is slow, insecure and hard to maintain. I disagree and wanted to take a minute to explain why I think none of this is actually true.

This morning, I saw a post from one of the Fosstodon team, Gina. She was asking about creating a blog and wondered if Ghost would be a good recommendation:

Obviously Gina ended up getting a tonne of different recommendations, which included WordPress, Hugo, Jekyll, Grav and a few others I’d never heard of.

My personal recommendation was WordPress over Ghost. Mainly because I know PHP better than Node.js, and for me, WordPress just works. However, that recommendation was met with a few of the common misconceptions around WordPress.

WordPress is slow

In and of itself, WordPress is NOT slow. WordPress can be slow, but it isn’t inherently slow. Look at this website for example, it’s running WordPress, but it loads very quickly and scores 95% for mobile & 99% for desktop on Google PageSpeed Insights.

There’s no magic going on here. I use a standard VPS hosted with Ionos for my web server, and I run the W3 Total Cache plugin. Apart from that, I just follow good practices where I can. I don’t even use a CDN.

I don’t have a tonne of plugins installed, I use a well coded theme that doesn’t have a load of features I don’t need, and I make sure there aren’t huge images littered throughout my posts.

Marko Saric has a great post that goes into a lot of detail on how to optimise WordPress – it’s really not that hard.

So yes, WordPress can be slow and heavy, but can’t every site? The point is, it doesn’t have to be slow and heavy, and it’s easy to make it light and fast.

WordPress is hard to maintain

Honestly, I was surprised this came up. I didn’t realise people thought that WordPress was hard to maintain. Most web hosts have a one-click installer for WordPress and the core application updates itself automatically.

If you decide you want to disable auto updates, updating WP core is literally a single click. So I’m really not sure where the idea that WordPress is hard to maintain comes from.

When I was running Grav and Ghost, I found these much more difficult to maintain than WordPress. Once everything is setup, WP lets me focus on writing content, not messing around with maintenance.

WordPress is insecure

This is similar to whole speed thing. Yes, WordPress can be insecure, but that’s true of any piece of software if you don’t maintain it.

WordPress gets a bad rep for security because of a number of security issues that have been disclosed in the past. This is because WP runs on something like 30% of websites on the entire web.

It’s popular, so it’s a big target. But that doesn’t make it inherently insecure. Administrators having poor security hygiene is what makes those sites insecure.

Not updating WP core and plugins, using really old and unsupported versions of PHP, using a tonne of plugins instead of coding features into the site’s theme and using poor passwords all reduce security.

  1. Disable pingbacks to prevent DDoS attacks.
  2. Use strong passwords and multi-factor authentication.
  3. Update your shit (including PHP).
  4. Reduce the number of plugins you’re using where possible.

Follow these 4 simple rules and your WordPress site will be significantly more secure.

WordPress needs MySQL & PHP

Yes, that’s right. WordPress requires a database and PHP. So? Why is that a problem? As long as you’re using a modern, supported version of PHP, then you’re good.

The vast majority of web hosts allow for using both PHP and creating MySQL databases – this really isn’t anything special. Lots of other web applications require MySQL and PHP too.

Ghost requires Node.js, which still has problems being used on a lot of shared hosting environments. Want to run a Ghost blog? You’re going to need a VPS for that.

Conclusion

WordPress, Ghost, Hugo, Jekyll, Grav, or coding a blog yourself. Who really cares as long as it works for you. For me, WordPress is the best option.

Yes, there are many insecure and slow examples of WordPress out there, but that’s the fault of site admins, not WordPress.

How To Add CSS Dark Mode To A Website

A lot of people like to have the option of having a dark mode for a website. Maybe they prefer the look, or maybe they want to save their eyes from strain. This post will show you how to implement an automatic CSS dark mode that changes depending on your visitor’s theme.

CSS Dark Mode

On this site, I define variables to set the colours of my theme. I’d suggest you do the same, as it will make this process a lot easier. My standard variables are as follows:

:root {
  --accent: #226997;
  --main: #333;
  --light: #666;
  --lighter: #f3f3f3;
  --border: #e6e6e6;
  --bg: #ffffff;
}

If you want to use these variables throughout your stylesheet, you do so like this:

p {
  color: var(--main);
}

This way, if you ever want to change the colours of your theme, all you need to do is amend the variable you defined and everything using that variable will be updated.

Now we need to define a new set of variables that will be used when CSS dark mode is invoked. For me, the additional variables look like this:

/* Define colours for dark mode */
:root {
  --accent: #3493d1;
  --main: #f3f3f3;
  --light: #ececec;
  --lighter: #666;
  --border: #e6e6e6;
  --bg: #333333;
}

Adding Dark Mode Support

We now have our two sets of variables defined. The only thing left to do is add the prefers-color-scheme media query to our dark variables.

Take your dark colour variables and add the @media query below:

/* Define colours for dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #3493d1;
    --main: #f3f3f3;
    --light: #ececec;
    --lighter: #666;
    --border: #e6e6e6;
    --bg: #333333;
  }
}

That’s literally it! Your site will now automatically switch to dark mode if someone is using a dark operating system theme and visits your site.

My light theme
My dark theme

Testing It Works

I’m sure you will want to test this change works. To do so, you can simply enable a dark theme on your operating system, such as the iOS dark theme.

Alternatively, if you don’t want to mess around with your OS themes, you can force this test in Firefox. Here’s how:

  1. Open Firefox and type about:config in the address bar and hit enter.
  2. You will be asked to accept the risk. Accept it.
  3. In the search bar, search for ui.systemUsesDarkTheme.
  4. Change the checkbox to number and click on the + symbol.
  5. Change the value to 1 and click on the tick button.
  6. The page should now turn dark.
  7. Head back to your website and the theme should have automatically updated to dark mode.
  8. If you want to test it switches back, change the value to 0.
  9. Once you have finished testing, click the trash can to delete the option.

Conclusion

You should now have a website that is not only responsive in terms of mobile interface, but also by theme too. I’m sure your late night visitors, or those who just prefer a dark themed site, will thank you.

Making A Website 06 – Finishing Touches

It’s time for the final post in my Making A Website series. In this 6th and final post, we’re going to be adding some finishing touches to our website. This is mostly going to be CSS changes, to improve our theme.

Custom Fonts

Let’s add some custom fonts, shall we? We’re going to use the same fonts as I use on this site, which are Fira Sans for the headers and Merriweather for all the body text.

You could add a reference to Google Fonts and simply host them from there, but I prefer not to use external services, especially ones owned by Google. So we’re going to self-host our fonts.

This is relatively easy to do, but it requires both HTML and CSS changes. I recently wrote a step by step guide on how to self-host your web fonts. So go and follow that guide. Once we’re done, our light website should look something like this:

Additional CSS

Now we have some slightly nicer fonts on our light website, we’re now going to add some additional CSS to format our typography further.

I will cover some of the high level additions, but by the end of this step our style.css file will contain 170 lines of code, so I can’t cover it all here. Remember, you can download all of the source code on the downloads page of MyLight.Website.

Adding Buttons

The first thing we will add to our stylesheet, are buttons. Buttons are basically hyperlinks that are styled differently. We will format the buttons for our website to look just like the buttons I have on this site:

This is a button

The CSS for buttons works in two parts, just like normal links. The first is to format the raw button, and the second is to format the animation that takes place when you hover or click on the button:

.button {
  padding: 0.5em .5em;
  margin: 0 .5em 0 0;
  border: 1px solid var(--main);
  border-radius: 4em;
  color: var(--main);
  transition: 0.5s;
  line-height: 3rem;
  white-space: nowrap;
}

.button:hover, .button:active, .button:focus, .button:visited {
  background: var(--lighter);
  color: var(--main);
  text-decoration: none;
}

To make a normal link a button, simply add the button class to your hyperlink code. Like this:

<a class="button" href="https://kevq.uk">My Homepage</a>

Inline Code

When writing about technical subjects, I like to use inline code highlighting to draw attention to certain elements of my posts. So next we’re going to add some CSS to highlight inline code elements on our website.

code {
  font-size: 1.2em;
  font-family: monospace;
  color: var(--accent);
  background: #eaf4fa;
  line-height: 1.25;
  padding: .1rem .2rem;
}

This CSS will give inline code a light blue background, the text will be our accent colour and the font will be monospace. Monospace characters all have the same width and are used in command line terminals.

To add inline code within a line of text, simply wrap the code in the <code> tag, like this:

<p>You can use the <code>ifconfig</code> command to check your computer's IP address</p>

Blockquotes

Blockquotes can come in handy from time to time, especially when you’re quoting a person/text. Once we’re finished, our blockquotes will look something like this:

I wanted to make a light website that not only looked good, but was also easy for people to use and make their own.

— Kev Quirk

There are two items we need to format with CSS here. The first is the actual blockquote, and the second is the citation. Here’s what the CSS looks like:

blockquote {
  margin-left: 2em;
  margin-bottom: 2rem;
  margin-top: 2rem;
  padding: .4rem .8rem;
  border-left: .35rem solid var(--accent);
  color: var(--light);
  font-style: italic;
}

cite {
  font-style: italic;
  font-size: 0.8em;
}

Adding a blockquote is pretty simple, here is what you need to add to your HTML:

<blockquote>Friends don't spy; true friendship is about privacy, too.<br><cite>-- Stephen King</cite></blockquote>

Again, I don’t intend to cover all of the CSS elements in this post, you can review the source code yourself for that. But these were some highlights of what I added.

Typography Page

I added a typography page to the light website. You can use this as a reference on how to code the various elements with HTML. It’s also a good way of viewing all the different elements on the site, in one place.

That’s all folks!

That’s it, we’re at an end of this whole process. MyLight.Website is now ready for you to take away and use. If you want to use it as is, feel free, but if you want to play around and make it your own, even better.

Over the course of this series, we have made a website that achieves an awful lot in a simple way, such as:

  • The site has been completely handwritten by you!
  • The entire thing, including images, is less than 700KB in size and scores 99% for mobile and a perfect 100% for desktop on Google’s PageSpeed Insights.
  • No JavaScript has been added to this site – it’s all HTML/CSS.
  • It looks good, not only on your computer, but on your mobile too.
  • There is a blog that you can use to share your thoughts, ideas and knowledge with the world.

I really hope you have enjoyed this series. If you have any feedback, or if you want to show me what you did with your light website, please get in touch.

Making A Website 05 – Adding A Blog

Creating this light website has been really fun, but in its current form, there isn’t much you can do with it. You may want to use it as a place for sharing your thoughts or knowledge with the world. So in this post we’re going to add a blog.

Why have a blog?

Personally, I really enjoy writing on this blog. I find the process of writing cathartic, and I really enjoy the engagements I have with my readers.

However, you may want your light website to be nothing more than a kind of online business card, or a place to easily give people your contact/social links. That’s absolutely fine; and the website we currently have will do that well. If that’s you, feel free to skip this post.

But if like me, you want to share your thoughts, likes, interests and knowledge with other people, you’re going to need a blog. So let’s look at adding a basic blog to our site.

Blog Home

The first thing we need to do is add a home for our blog. This is a page that displays links to all of the blog posts on our site. If you go to the homepage of this site, you will see what I mean.

To do this, we will start off with the template file we created in step 03 of this series. Here’s what you need to do:

  1. Create a new folder and call it blog.
  2. Copy your template.html file to your blog folder.
  3. Rename the copy to index.html.
  4. Add a menu item to all of your pages that points to /blog.
  5. Precede all links in your menu with a forward slash.

Remember to add class="active" to the menu links that are active for each page.

Once you have made all of the changes above, here is what the menu should look like on your blog page:

<!-- *** NAVIGATION SECTION *** -->
<ul class="nav">
  <li class="nav"><a href="/index.html" >Home</a></li>
  <li class="nav"><a href="/about.html">About</a></li>
  <li class="nav"><a href="/contact.html">Contact</a></li>
  <li class="nav"><a href="/blog" class="active">Blog</a></li>
</ul>
<!-- *** END NAVIGATION *** -->

Once you have the main blog page added, it’s now time to add our first post. The first thing we need to do is create another folder within the blog folder, called posts. This is where we will store all of our blog posts.

Now we’re in our new posts folder, create another folder called 00-template. Within that folder, create another folder called images.

Each blog post will have it’s own folder. I would recommend using a sequential number, followed by the blog post’s title for this:

If you look at the blog on step 5 of MyLight.Website, you will see the two blog posts shown in the image above.

Next we need to make a blog post template. You can use the page template we already have, and make some changes to it.

I’d also recommend adding a checklist at the bottom of the page, so you don’t forget to update anything when writing a new post. This can be in the form of a HTML comment, so it’s not visible within the post.

Once that’s done, the source code for your post template should look something like this:

<!DOCTYPE html>
<html>
<head>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/images/favicon.png" />
<title>CHANGE ME</title>
</head>
<body>
<div class="main">
<!-- *** NAVIGATION SECTION *** -->
<ul class="nav">
  <li class="nav"><a href="/index.html" >Home</a></li>
  <li class="nav"><a href="/about.html">About</a></li>
  <li class="nav"><a href="/contact.html">Contact</a></li>
  <li class="nav"><a href="/blog" class="active">Blog</a></li>
</ul>
<!-- *** END NAVIGATION *** -->

<!-- *** START PAGE CONTENT *** -->

<h1>YOUR TITLE HERE</h1>
<p class="meta">Posted DATE</p>

<img src="images/image.jpg"</img>

<p>START TYPING YOUR CONTENT HERE...</p>

<!-- *** END PAGE CONTENT *** -->

<!-- **PUBLISHING CHECKLIST**

Here's a checklist of all the things you need to change:
  - Change the page title (line 7)
  - Change the post title (line 22)
  - Change the post date (line 23)
  - Change the img link to add a header image, or remove it completely (line 25)
  - Add your content!
  - Update the blog page with a link to the new post.

** END CHECKLIST** //-->

</div>
</body>
</html>

If you want to add images to your blog post, add them to your /images folders within the posts’ directory. Then add the correct <img> html to embed your images. For example, if you’re adding an image called laptop.jpg the code would be as follows:

<img src="images/laptop.jpg"</img>

Once you have created your blog posts, you need to add them to your list of posts on the main blog page. You do this by adding the following HTML to the content section of your blog page:

<p><a href="posts/02-getting-used-to-html/">Getting Used To HTML</a></p>
<p class="meta">Posted 01st Feb 2020</p>

<br>

<p><a href="posts/01-my-first-post/">My First Post</a></p>
<p class="meta">Posted 14th Jan 2020</p>

The <br> tag adds a line break, so you can make the gap between the post titles bigger. All this does is separate the blog post titles a little, so it’s clear where one ends and another begins.

Our main blog page
A blog post

Meta CSS

Notice how the date on both the template page and the post page is formatted a little differently? It’s smaller, italic and light grey. This is because we have used class="meta" when coding the date.

What we need to do now, is add some CSS to our style.css file so that it’s formatted correctly:

/* Custom typography */
p.meta {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--light);
  margin-top: -1em;
}

That’s It!

You’ve just added a blog to your light website. When you want to write a new blog post, just copy and past your 00-template folder, then edit your post and update the main blog page.

In the 6th and final post in this series, we will be adding a few finishing touches to our light website to finish things off.

You can follow along with the entire series on my dedicated website, MyLight.Website. It will show you each step in a wizard-like format, and there are also links to download all the source code.

Decentralised SMTP Is For The Greater Good

If found this post on Lobte.rs today and thought it was an excellent piece, so worth sharing.

The writer talks about how the big mail corporations, like Gmail and Office 365, are so popular that they’re centralising an open standard. This can be a problem for a number of reasons, which the OP (Original Poster) talks about.

I won’t go into detail, as I would much prefer you went to his site to read it in detail. I currently host my email with Zoho, but after reading this post I’m seriously thinking about self-hosting my email again.

Link to the post: https://poolp.org/posts/2019-12-15/decentralised-smtp-is-for-the-greater-good/

Making A Website 04 – Responsiveness

Our light website is coming along nicely! By now you should have a light website that looks good, has multiple pages and a menu. But there’s still some work to do – today we’re going to make our website responsive.

What is responsiveness?

Before we start making our website responsive, I think it’s important to understand what responsiveness actually is. Put simply, responsiveness tells your website to respond in a certain way under particular conditions.

In this case, we’re going to setup our website to respond to a small display, like a mobile phone, by reformatting the images and menu. This sounds really complicated, but it really isn’t.

The CSS

The first thing we need to do is to add some additional CSS to our style.css file. Here is the CSS you will need to add:

/* Make the website responsive */

@media screen and (max-width: 100%) {
  .main {
    width: 800px;
  }
}

@media screen and (max-width: 640px) {
  ul.nav li {float: none;}
}

.main {
  float: center;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

There are basically three different statements we’re making with this CSS. In the first @media statement we’re setting the width of the .main section (more on that later) to 800px.

In the second @media statement we’re telling our website to reformat the menu to a single item per line if the screen width is 640px or less.

The .main statement formats the body of each page to actually make it all respond how we want it to.

You will also need to make some changes to the body section of your style sheet:

/* BEFORE */
body {
  background: var(--bg);
  color: var(--main);
  font-family: sans-serif;
  font-size: 1.1em;
  display: block;
  text-align: left;
  width: 800px;
  margin: 0 auto;
}

/* AFTER */
body {
  background: var(--bg);
  color: var(--main);
  font-family: sans-serif;
  font-size: 1.1em;
}

The final CSS change you need to make is to add responsive formatting to images so they adapt too. This will stop them scrolling off the screen as it shrinks. Instead, they will adapt and shrink with the screen:

/* Format images */
img {
  max-width: 100%;
  height: auto;
}

img.home-banner {
  padding-top: 20px;
  padding-bottom: 20px;
  max-width: 100%;
  height: auto;
}

The HTML

That’s it for the CSS. We now need to make some HTML changes. These steps will need to be done on every HTML page on your website.

The first step is to add a viewport to the <head> section of every webpage. The additional line is highlighted below on line 3:

<head>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="images/favicon.png" />
<title>MyLight.Website</title>
</head>

Viewports require a bit of explanation, but I think doing so would derail the flow of this post. If you want to learn more about viewports, take a look at this page.

The final step is to add support for the .main section. Again this needs to be done on all pages of the website. This is done by adding a <div> inside the <body> tag. See lines 2 and 19 below:

<body>
<div class="main">
<!-- *** NAVIGATION SECTION *** -->
<ul class="nav">
  <li class="nav"><a href="index.html" class="active">Home</a></li>
  <li class="nav"><a href="about.html">About</a></li>
  <li class="nav"><a href="contact.html">Contact</a></li>
</ul>
<!-- *** END NAVIGATION *** -->

<img class="home-banner" src="images/home-banner.png"></img>

<!-- *** START PAGE CONTENT *** -->

<p>Your page's content will go here!</p>

<!-- *** END PAGE CONTENT *** -->

</div>
</body>

That’s it, your website is now responsive. No, that really is it! I told you it was simple. If you want to test it out, visit your website and shrink your window so it’s not full screen. Then, keep reducing the width of the window, eventually you should see the menu flip to its responsive mode:

Look at that beautiful, responsive website! Great work, folks. As you can see, our banner image, which is 800px wide, has shrunk with the webpage so the formatting remains in place.

Conclusion

We’re nearly at the end of this series now, there’s just two posts left were we will be adding a blog and the finishing touches to our website.

As usual, I have added the source code for everything that’s covered in this post to the downloads page of MyLight.Website. You can also use this site to work through each step in this series in a wizard-like fashion.

Writing On My iPad

Since I decided to start writing more, I’ve been deliberately posting shorter form posts, some of which have been created on my iPad. This post talks about what that experience has been like for me.

How?

I’m writing this post on my iPad using the WordPress app. For the most part the experience is pretty good, but doing things like adding links and text formatting is still a little clunky.

Writing short form posts, like this one, is fine but I don’t think I could write one of my longer, more technical posts on my iPad. Maybe with a Bluetooth keyboard it would be a little easier, but the WordPress app is still not as good as the actual WP admin interface.

Writing on my iPad

I’ve considered buying a Bluetooth keyboard so I can type up posts more easily, but honestly I don’t really see advantage as I might as well use my laptop at that point. Plus, the touchscreen keyboard on the iPad, along with predicted text, means I can still type relatively quickly without a physical keyboard.

Overall, writing posts on the iPad is okay, but I certainly won’t be replacing my trusty Thinkpad anytime soon.

Automatic Dark Mode

I’ve had a lot of feedback in the past about adding a dark mode to this website. I always resisted doing this, as I wanted my theme just how I designed it – to be a first class citizen.

After lots more feedback about it, I ended up adding dark theme support via a WordPress plugin. This was a toggle at the top of the page that invoked some JavaScript when toggled. This JavaScript then applied a dark theme to the site.

I was never happy with this solution, as I try to minimise the JavaScript on this site wherever I can. Mainly so people who disable JavaScript can still read this site in comfort.

The New Solution

I’ve decided to re-implement this feature in CSS using the prefers-color-scheme property. I have removed the toggle and got rid of the JS that changed the theme.

If you’re using a dark theme on your operating system, my website should now respect that setting and render the dark version of this website.

Light Theme
Dark Theme

When I get a chance, I will write a guide on how to implement the prefers-color-scheme property so you can implement this on your website too.

Making A Website – 03 Menus

From the previous post, we now have a pretty good looking webpage, but it’s now time to turn it into a website. In this post we’re going to add additional pages, as well as a menu.

We’re also going to start structuring our code a little better, by adding comments. These will allow us to add useful bits of information that help explain what the code does, but they aren’t visible on the page.

The Menu

The first thing we need to do is to add the code to our index.html file that will display the website menu. For this we’re going to use the unordered list tag, <ul>. We will then add some CSS formatting to menu so it looks like an actual menu, instead of an unordered list!

Just below the opening <body> tag, add the following code:

<!-- *** NAVIGATION SECTION *** -->
  <ul class="nav">
    <li class="nav"><a href="index.html" class="active">Home</a></li>
    <li class="nav"><a href="about.html">About</a></li>
    <li class="nav"><a href="contact.html">Contact</a></li>
  </ul>
<!-- *** END NAVIGATION *** -->

Notice how we have given the unordered list items a class of nav? This is so we can add specific CSS to this particular unordered list, without affecting all other unordered lists across our website. We’re going to add 2 additional pages – an About page and a Contact page.

If you refresh the homepage now, it should look something like this:

Looks just like a standard unordered list at the top of the page – pretty rubbish menu, right?

Adding CSS

That’s it for the HTML for now, we will add some more additions later, but for now let’s make this unordered list look like an actual menu.

To format the unordered nav list so it looks like a proper menu, add the following CSS to your style.css file:

/* Format Nav Bar */
ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--main);
}

li.nav {
  float: left;
}

li.nav a {
  display: block;
  color: var(--bg);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.nav li.nav a:hover:not(.active){
  background-color: var(--accent);
}

.active {
	background-color: var(--accent);
}

That’s 28 lines of CSS that we just added; let’s take a minute to talk through what all this CSS is actually doing.

  • ul.nav removes the actual bullet point from the list, ensures the menu is a bar spanning the whole page and is dark grey.
  • li.nav aligns the menu items to the left of the page.
  • li.nav a displays the menu items like buttons and formats their colours.
  • ul.nav li.nav a:hover:not(.active) ensures that menu items turn blue on hover, and that the active menu item (the menu item that corresponds to the page you’re on) stays blue, even when hovering over it.
  • .active makes the active menu item blue.

We now have something that actually looks like a menu:

Look at that beautiful menu!

That’s it for the CSS changes – we now need to make the additional pages that will be added to our website.

Adding Pages

This part is really simple. All you need to do is copy and paste your index.html page and rename it to template.html. Then, delete the page’s contents. Finally, add comments below the banner image and your template should look something like this:

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
<link rel="shortcut icon" href="images/favicon.png" />
<title>MyLight.Website</title>
</head>
<body>

<!-- *** NAVIGATION SECTION *** -->
<ul class="nav">
  <li class="nav"><a href="index.html" class="active">Home</a></li>
  <li class="nav"><a href="about.html">About</a></li>
  <li class="nav"><a href="contact.html">Contact</a></li>
</ul>
<!-- *** END NAVIGATION *** -->

<img class="home-banner" src="images/home-banner.png"></img>

<!-- *** START PAGE CONTENT *** -->

<p>Start adding your content here!</p>

<!-- *** END PAGE CONTENT *** -->

</body>
</html>

Now you have your basic template file, save it then make 2 more copies of it. Rename those files to about.html and contact.html. You then need to edit the highlighted lines below within each file:

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
<link rel="shortcut icon" href="images/favicon.png" />
<title>MyLight.Website</title>
</head>
<body>

<!-- *** NAVIGATION SECTION *** -->
<ul class="nav">
  <li class="nav"><a href="index.html" class="active">Home</a></li>
  <li class="nav"><a href="about.html">About</a></li>
  <li class="nav"><a href="contact.html">Contact</a></li>
</ul>
<!-- *** END NAVIGATION *** -->

<img class="home-banner" src="images/home-banner.png"></img>

<!-- *** START PAGE CONTENT *** -->

<p>Start adding your content here!</p>

<!-- *** END PAGE CONTENT *** -->

</body>
</html>

Here’s an explanation of why you’re editing these particular lines for each of your new pages:

  • Line 6 – Change MyLight.Website to the name of the page you’re creating. For example, About Me on the about page and Contact Me on the contact page. That title will then be displayed in the browser window title bar.
  • Lines 12-14 – You need to move the class="active" section to the corresponding page you’re creating. This is so the menu items correctly show as active in the menu bar when you change pages.
  • Line 22 – This one is easy, start adding your content for that page.

Once you’re done adding the additional pages, save them to the same location as your index.html in NeoCities, or whatever your hosting provider is.

You should now be able to navigate around your site and when you do, the correct menu items will be highlighted in blue for whatever page you’re visiting.

If in the future you want want to add even more pages, just re-use your template file. You will also need to add an additional line to the nav list for any new pages. The new line will also need to be added to every existing page on your site.

Conclusion

As always, you can see the results in a wizard-like format on MyLight.Website. Step 3 has been published, so you can see our new menu in action.

There are also links to all of the post in this series, as well as the source code for each step, on the downloads page.