Common Mistakes

1. "My changes aren't showing"

Either the file isn't saved, or the browser is showing an old copy it remembered (the cache).

FIX Press Ctrl+S in your editor, then Ctrl+F5 in the browser for a hard refresh. On Neocities, check you uploaded the new version.

2. Homepage not called index.html

Neocities looks for a file called exactly index.html as your homepage.

WRONG Index.html, home.html, index.html.txt

RIGHT index.html

3. Capital letters and spaces in file names

Web servers are case sensitive, so Photo.JPG and photo.jpg are different files. Spaces turn into %20 and break easily.

WRONG My Photo.JPG

RIGHT my-photo.jpg

4. Linking to a file on your own computer

It works on your machine, but nobody else has your C: drive.

WRONG

<img src="C:\Users\student\Desktop\cat.png">

RIGHT Put the image in your site folder and use a relative path:

<img src="images/cat.png" alt="My cat asleep on a keyboard">

5. Unclosed or wrongly nested tags

Tags close in the reverse order they opened, like brackets in maths.

WRONG

<p>This is <strong>important</p></strong>

RIGHT

<p>This is <strong>important</strong></p>

The W3C validator will find these for you.

6. Stylesheet not linked properly

If your page looks completely unstyled, the browser can't find your CSS file.

FIX Check the href matches the file name and folder exactly:

<link rel="stylesheet" href="style.css">

If your page is in a sub-folder, you may need ../style.css to go up a level.

7. Class name doesn't match

A class in CSS starts with a dot. In HTML it doesn't. The names must match exactly.

WRONG

HTML:  <div class=".card">   (no dot needed here)
CSS:   Card { ... }          (missing dot, wrong case)

RIGHT

HTML:  <div class="card">
CSS:   .card { ... }

8. Missing semicolon or curly bracket in CSS

One missing ; or } can break every rule after it.

WRONG

h1 {
    color: purple
    font-size: 32px;

RIGHT

h1 {
    color: purple;
    font-size: 32px;
}

9. Curly "smart" quotes

Code copied from Word, Google Docs or some websites can contain curly quotes, which HTML and CSS don't understand.

WRONG <a href=“about.html”>

RIGHT <a href="about.html">

10. Using <br> for spacing

Stacking <br><br><br> to push things down is fragile and looks different on every screen.

FIX Use CSS margin or padding instead.

11. Huge images

A 6 MB photo straight off your phone makes the page crawl, and can overflow the screen.

FIX Resize and compress it with TinyPNG, and add this to your CSS:

img {
    max-width: 100%;
    height: auto;
}

12. Images uploaded to the wrong folder

If your HTML says images/cat.png, then on Neocities there must be a folder called images with cat.png inside it.

FIX Make your Neocities folders match the folders on your computer.