diff --git a/src/assets/blog/build-a-good-website/accessible-website-preview.png b/src/assets/blog/build-a-good-website/accessible-website-preview.png new file mode 100644 index 0000000..9aa6998 Binary files /dev/null and b/src/assets/blog/build-a-good-website/accessible-website-preview.png differ diff --git a/src/assets/blog/markdown-style-guide/example-image.jpg b/src/assets/blog/markdown-style-guide/example-image.jpg deleted file mode 100644 index 050b817..0000000 Binary files a/src/assets/blog/markdown-style-guide/example-image.jpg and /dev/null differ diff --git a/src/content/blog/build-a-good-website.md b/src/content/blog/build-a-good-website.md new file mode 100644 index 0000000..3efaad0 --- /dev/null +++ b/src/content/blog/build-a-good-website.md @@ -0,0 +1,169 @@ +--- +title: "Build a good website" +publicationDate: 2023-05-07 +description: "Learn to create and publish a performant, accessible and SEO friendly website." +--- + +## Prerequisites + +To get the most out of this article, you should have a basic understanding of [HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML), [CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS) and [JavaScript](https://developer.mozilla.org/en-US/docs/Learn/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](https://astro.build/). 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: + +```html + + +
+
+

Headline

+
+
+
+
+
+

About

+ +
+
+

Features

+ +
+
+
+ + +``` + +### Semantic elements + +- [address](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address) +- [article](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) +- [blockquote](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote) +- [details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) +- [dialog](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) +- [fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset) +- [figure](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure) +- [section](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) +- [time](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time) + +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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) 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 `