Build a good website

Prerequisites

To get the most out of this article, you should have a basic understanding of HTML, CSS and JavaScript as well as some common terms (e.g. accessibility, dependency, deployment, build).

Static site generators

While you could simply create a few .html, .css and .js files and link them together to create your website, using a Static site generator (SSG) can make things a lot easier.

SSGs make your project a bit more complicated, but you will get used to it quickly and greatly benefit from the many advantages. Here are a few of them:

Reuse snippets of code with components
Scoped CSS styles to avoid complex selectors
Optimizing your code (e.g. minifying CSS or JavaScript) at build time
Live development server
File based routing

There are a lot of SSGs out there, and I tried many of them, but the one I liked the most and recommend is Astro. It is actively maintained, has a great documentation and a lot of cool, unique features.

Semantic HTML

Using the right HTML element for the right job makes your website more accessible, SEO friendly and can also make your life easier, so it makes a lot of sense to learn when to use which element.

Page structure

To get started with the general layout of your page(s), you can use the following template:

<body>
  <nav>
    <div class="container">
      <a href="/">Logo</a>
      <ul>
        <li>
          <a href="/projects">Projects</a>
        </li>
        <li>
          <a href="/blog">Blog</a>
        </li>
        <li>
          <a href="/contact">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
  <header>
    <div class="container">
      <h1>Headline</h1>
    </div>
  </header>
  <main>
    <div class="container">
      <section id="about">
        <h2>About</h2>
        <!-- ... -->
      </section>
      <section id="features">
        <h2>Features</h2>
        <!-- ... -->
      </section>
    </div>
  </main>
  <footer>
    <div class="container">
      <small>Copyright © 2023 Your Name</small>
    </div>
  </footer>
</body>

Semantic elements

Of course there are many more, the elements listed above are just some of the ones I used a few times. Navigate to the MDN HTML elements reference for a well structured overview of all the elements.

Accessible styles

While styling your elements with CSS, you should also keep accessibility in mind. Here are some simple guidelines:

font-size should be at least 16px and line-height 1.5 or 1.6 for good readability. Another improvement would be to limit the width of text to 70ch.
Color contrasts are important, do not put dark gray text on a black background
Pay attention to responsiveness, so your website is usable on any screen size
Interactive elements, such as <button> or <a> should have a large tap area for mobile users

After applying the styles shown above and some more simple ones to the HTML page template:

body {
  line-height: 1.6;
}

nav {
  border-block-end: 0.0625rem solid hsl(0 0% 50%);
}

nav > .container, nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

nav .container {
  justify-content: space-between;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.container {
  max-inline-size: 70ch;
  margin-inline: auto;
}

a {
  display: inline-block;
  padding-inline: 1rem;
  padding-block: 0.5rem;
}

footer {
  border-block-start: 0.0625rem solid hsl(0 0% 50%);
}

we have an accessible, and solid looking website:

Accessible website preview

There are wonderful recipes on how to deploy your website for different hosting platforms in the Astro documentation, so I will not try to replicate them here.

In case you are not using a SSG, you can follow the Cloudflare Pages deployment guide.

Conclusion

I hope this article helped you to create an accessible and performant modern website. There is also a section in my resources page which lists multiple useful tools for building websites and web applications.