Making Your First Website Reference!

https://itsragman.neocities.org/reference

Neocities

https://neocities.org
Free hosting platform, where your website will live!

.html files

Hyper Text Markup Language
Declares the content of your website.
Files end in ".html"

HTML looks like this:

        <html>
          <body>
            <p>Hello World</p>
            <img src="/cats.jpg" alt="a picture of my cats"></img>
          </body>
        </html>

Note: You'll get an error message if you don't have the semicolon at the end of each line!

Content lives in "tags" that look like: <p>my paragraph</p>
Newlines inside of tags don't get rendered in the website. For a newline, use the <p>tag.

.css files

Cascading Style Sheets
Declares the presentation of your website.

CSS looks like this:

        
          body {
            background-color: red;
            color: white;
          }
          
          img {
            max-width: 95vw;
          }

Note: You'll get an error message if you don't have the semicolon at the end of each line!

.js files

JavaScript
A programming language that adds interaction to your website.
Beyond the scope of this workshop, but here's a tutorial from MDN.

Neocities Troubleshooting

Get to your dashboard by clicking the chevron in the top right, and then clicking "Edit"
You can reload your website by hitting ctrl + r, you don't need to hit the "View" button each time.
Remember to hit the "Save" button after making changes!
If your changes aren't showing, try refreshing multiple times.

If that still doesn't work, try opening the developer tools (see section below), right clicking on the refresh button in your browser, and clicking "Empty Cache and Hard Reload".
Hit ctrl + / to "comment out" a line so it's not active on your website.

Browser Developer Tools

The way to inspect another website's HTML and CSS
Right click on whatever you want to inspect, and click "Inspect" or "Inspect Element" (depending on your browser). ctrl + i usually works too!
Any changes you make are temporary and only on your computer.
More info here.

Accessibility

i.e., does your website work for the wide variety of humans out there?

This is all for fun, and the basic HTML and CSS we're using today are accessible out of the box, so don't worry too much about this right now.

But as your website gets more complicated you should try to make sure it's comfy for as many people as possible.

Some things to ask yourself are:

What if somebody has less good eyesight?
- Does this look ok when super zoomed in?
- Is background color/text color contrast high enough? Use https://accessible-colors.com/ to check!
What if somebody is using a screenreader?
- Do I have alt text for my images?
- Am I using specific HTML tags like <p> instead of <div>?
What if somebody gets motion sick/headaches/seizures from flashy lights?
- Do I have a content warning?
- Advanced: Am I using the prefers-reduced-motion CSS query to hide or pause moving things?
What if somebody is looking at this through Google Translate?
Does it still look good if somebody is looking at this sideways on their phone?
What if they have a slow internet connection?
What if they can't use a mouse/keyboard and can only tap?

Where to Learn More?

The Neocities tutorials.
The Mozilla Developer Network is the canonical reference for all things HTML and CSS.
https://landchad.net/ has easy-to-follow resources for getting your own domain name and website hosting.
Website to convert images to WebP: squoosh.app
Hell Yeah CSS: Zine about CSS (all her zines are great)
Flexbox Froggy: Game that teaches you flexbox
Flexbox Tutorial: Writing that teaches you flexbox