The small website guide

"i am totally a web designer"


Basic HTML layout

When I start writing my website, I always start with this one layout. Always.

<html>
  <head>
    <title>My awesome website</title>
    <meta name="description" content="This is my amazing site!" />
    <!-- EITHER THIS -->
    <style>
      /* Stylesheet goes here */
    </style>
    <!-- OR THIS -->
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>

    <header>
      <h1>My awesome website</h1>

      <!-- THIS PART IS OPTIONAL, I DON'T ALWAYS HAVE ONE -->
      <nav>
        <a href="somelink">some link</a>
        <a href="anotherlink">another link</a>
        ...
      </nav>
    </header>

    <main>
      This is the main content of the website, where you put in
      the content of your page.
    </main>

    <footer>
      Made by AUTHOR. whatever license notice goes here. basically
      a footer.
    </footer>

  </body>
</html>
		

The use of semantic HTML tags is very important to me because it allows to keep the structure clean. using non-semantic tags like div can get unpleasant to read the html code and reduces it's simplicity.

In the head of the HTML source, there is only the basics such as a title, metadata to describe your website and the tags for styling (you don't have to put styling but I don't think you follow this tutorial to not add some CSS in there :p). I personally think that the meta tag for description is a nice thing to add. It allows (messaging) applications to add a little embed with your site title and this description. There are much more tags like this to make "fancy" embeds. If you are curious I suggest you take a look at the OpenGraph protocol.

The body is divided into 3 semantic tags: header, main and footer.

The header and the footer are parts that won't change across pages in your website. Only main changes. In the header, you will put stuff to "present" your website such as a title, a subtitle and a navigation menu. Even if I don't always use a navigation menu on my websites all the time, I do think it is very useful for the user to quickly navigate through your site from any page.

If you need some inspiration for your header/footer, I suggest you look in the source of my websites. Since the code is written by hand, the source is easily readable.

Basic CSS

We are now getting into the interesting part of this guide: the CSS. I don't know how I am going to explain the CSS as I am very inconsistent in the use of CSS. If you have seen the example screenshots in the introduction page, I think you may know what I am talking about.

However, there is always a CSS base. Like on HTML. For basic things such as the maximum width of the page. I don't like when content is too wide because long lines are unpleasant. Both in the aesthetics than the readability. I also recommend that links in the nav are seperated with a bit of padding and margin.

Another important thing is to have a good colorscheme to let the reader (and yourself) have a pleasant experience when navigating through the site. I wouldn't recommend saturated colors. I mean, why would you even appreciate a website with saturated colors? It's very stiff and is absoutely not pleasing to read the content of the website with such colors.

Here is some basic CSS code made according to the criteria I have mentionned above:

body
{
  background-color: #eee;
  font-family: "SF Mono", monospace;
  text-align: center;

  margin: 64px auto;
  max-width: 650px;
  left: 0; right: 0;
}

nav a
{
  display: inline-block;
  padding: 8px;
  text-decoration: none;
  color: blue;
}
nav a:hover
{
  background-color: blue;
  color: white;
}

header, main, footer
{
  margin: 16px;
  padding: 16px;
  background-color: white;
}
		

In the CSS code for the body, you can see there is a background color, of course, different font family. I don't have much opinion about font families but I suggest you avoid using external fonts as it makes the page heavier. So pick sans-serif, serif or monospace. You can also add actual font names in the stack, assuming some of your visitors also got these fonts installed on their computer.

If you looked in the source of this guide, you may have noticed that the sources are very similar. Such as the nav links. They are buttons that highlights when the user hovers their cursor over them. It is important to use display: inline-block as it avoid word-wrapping and make the navigation menu look ugly.

The header, main, footer part however differs from this website, it divides the site into 3 parts. It does not "blend" like here. Examples of site that uses this are my website and unix.lgbt.

Depending on what elements you use around in your website, you may want to add more CSS to style the elements you want to use such as pre tags or tables.

Some CSS snippets

Here are some code snippets of elements like pre to add in your CSS code if you need it.

/* `pre` tag used style in this guide */
pre
{
  word-wrap: break-word;
  white-space: pre-wrap; /* Essential to avoid words going out of the tag */

  background-color: #ccc;
  padding: 8px;
  border: 1px black;
  border-radius: 4px; /* nice rounded corners */
}
		
/* `table` used in ccpr.matthil.de */
table
{
  border: solid 1px lightblue;
}
th
{
  background-color: lightblue;
}
th, td
{
  border: solid 1px lightblue;
  padding: 5px 10px;
}
		

Like on the HTML, I suggest taking a look at the sources of my websites to get some inspiration.

Site Generation

Finally, I'd like to talk about static site generators because they are quite useful to avoid writing too much HTML. For my sites, I use a small script I have written named buildsite. If you want it, I use it almost everywhere I write a website. It is quite a mess, though. For example, my personal website uses it. It takes some markdown, compile it to HTML and stuff it in a template, the result is copied into the out folder. All the content of the static folder is then copied into this same folder.

Use whatever floats your boat though, this is completely optional.

Anyway you now know the (not that secret) secret recipe of how I write my websites. You can now build your own. Remember to look into sources of handmade websites to find some inspirations.

Good luck on your website :)