How to make a good website
Since this seems to be a popular topic here on Neocities. I thought I'd make a page on it as well.
Structure Your Page
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Title</title> <link href="/style.css" rel="stylesheet"/> <link rel="icon" href="favicon.png"> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body> <header> </header> <nav> </nav> <main> <h1>Title</h1> <p>...</p> </main> <footer> </footer> </body> </html>
Lay out your page with “display: flex;” and “flex-direction” or “display: grid;”. You can still have your navigation scroll with the screen in a static layout (which you should be using) by using “display: sticky; top: 0px;” instead of “display: fixed;”. Header and footer are entirely optional and you don't need a main either if your page doesn't contain other things.
Adjust the Page for Devices With Small Width
This is what I use to adjust my layout.
@media only screen and (max-width: 60rem){...}
Keep Your DOM Flat
Instead of nesting things, always look whether you can achieve the same with less tags. Deep DOMs are a horror for browsers. That's why CSS was invented to begin with!
CSS
The biggest hit on CSS performance is unused CSS. So do not use any CSS frameworks. Put CSS in an external file, so it will be cached.
Avoid Javascript
The best option is not to use JS at all because it is very slow. Compile pages serverside or statically. If you do use JS, you should define all scripts in the head and use the argument “defer” on them. If you don't, the page won't load until the script is processed. If you do, the page will be rendered and then the JS is run. The later is always the better option.
Do not use frameworks. The time where every browser had different functions is over. It only adds overhead.
Use Preview Images
Large images will take time and bandwith to load and having them all on the same page is a horror.
Don't Animate
Animation always means reflows every single frame which is very expensive in browsers.
Set Cookies Through HTTP
You probably knew that you can set cookies through Javascript but did you know you can do the same with HTTP itself? Yes, astonishing.
No Pixel Based Layout or Text
For sizing paddings, margins, widths, heights, and font-sizes you should use em or rem. For those who do not know, em is just m spelled out because it is the width of an M. If you set width, always make sure to also set max-width to 100% to avoid the horizontal scroll bar. Em depends on the font-size of the element being sized and is the same as a percentage when applied to font-size. (font-size:1em=font-size:100%) Rem on the other hand inherits from the root element, the html tag, and is thus not dependant on the font-size of the parent but on the default font-size. By not using anything but em/% or rem on font, the readers font-size choice in his browser settings will be respected. And who knows better than the reader what DPI and eyesight he has? Not even the OS knows.
Escape UTF-8 in CSS
While it seems tempting to put a character like “, ”, − (real minus), ▼, ▲, ➤ or ♡ into a content attribute of ::before or ::after, do not do that! I know you can specify the encoding of a CSS file but that is actually supposed to be the same as that of the document and Internet Explorer does not even know about it. However browsers tend to fuck up. If I reload the page 20 times in Chromium , some of these times it will show multiple ASCII characters instead. The best solution is to simply use backslash encoding for the characters in question. For that I recommend that you paste the character into Unicode-Table.com and use it in your CSS. Example: content: '\201CExample\201D';
Avoid CSS-Float
It is in every CSS tutorial, taught right at the start. What they always forget to mention is that it does not come without its problems. There is no way to prevent sentences from being squashed by the image at certain monitor widths, so that only about one word fits in each line making it unpleasing to read. And you should never use float for layout! Use flexbox or grid instead. If you need float anyway, disable it for small screens or big pictures.
No All Caps
Use <b>old, <u>nderlined, <i>talic,