Common Questions

I sometimes try to help out over at the /r/Neocities subreddit, and I've noticed that the same questions keep coming up.

How do I build a layout like this...?

Firstly, don't use tables and floats, like some people want to tell you; it's what web developers did decades ago. We don't have to torture ourselves like that anymore. It's difficult to do, and not very accessible since the elements are not semantic. (This means that screen readers (and search engines) don't know what's what.)

Use CSS grid rules. It's a great and easy solution for modern layouts, and it's very simple to make them responsive (by changing the grid-template for smaller screens).

Here's what it could look like: (This example uses semantic elements to make the site more accessible.)

.container {
  display: grid;
  grid-template:
    "header header" /* row 1 */
    "sidebar main"  /* row 2 */
    "footer footer" /* row 3 */
	/ 1fr 2fr;  /* column widths (1fr = one fraction) */
  grid-gap: 10px;   /* (optional) space between areas */
}

/* assign your elements to the areas you defined in the grid-template rule: */
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
			

Make sure not to use quotation marks (") when using the grid-area rules. It won't work.

Here is a working example of a grid layout:

Very simple layouts can also easily be made using flexbox. I highly recommend learning how to use flexbox because it makes a ton of things easier, it's probably my favorite CSS rule.

What do I do so I don't have to change my layout in all HTML files for every change?

There's lots of things you could do. Here are 3 popular options:

• Load your pages as iframes. Not recommended (though prevalent on Neocities), more info see here.
• Load everything that stays the same on every page per JavaScript. This is what I recommend for beginners. I have a tutorial and ready-to-paste code on my layout base code page. Note: Rarely - but sometimes, users have Javascript completely deactivated. Those users won't be able to browse your site, so make sure to include a noscript tag on every page.
• Use a static site generator. This has the best result, but it's much more difficult than the JavaScript solution mentioned above, so you should already be comfortable with coding. There are many static site generators to choose from, for example:
  • 11ty (Eleventy). I highly recommend 11ty because it is very simple to use. I have a tutorial here!
  • Jekyll (requires Ruby). I don't recommend this honestly, but if you're interested in using Jekyll I recommend lostletters' tutorial.
  • Spike

Why does my script/widget not work? (Neocities)

Are you trying to use an external script (= a script that isn't hosted on your own website)? Unfortunately, if you have a free website on Neocities created after ~2022 you are not allowed to use external scripts, such as guestbooks, shoutboxes, status/mood widgets, and even hit counters unless they are iFrames:

iFrames, and any widgets that use them, do work. For guestbooks I recommend using smartgb (which is what I use for my guestbook iframe) because it is very customizable and looks good in an iframe. For a chatbox you can use cbox, because it works via an iframe.

I have also created some other iFrame widgets you can use with a free account, e.g. status.cafe and last.fm. Check them out here.