Neocities 101: HTML, CSS, & the Personal Web

or: you, too, can make a website of your own!

Here you can find the materials for our Discord workshop, including extended notes, live links, and collected resources that might be useful.


Syllabus

Prerequisites

What are HTML & CSS? — Finding & Using Documentation

Commonly Used Code Editors

Exercise 1: Visualize Your Site

Designing a website is easier if you have a rough idea of what you want it to look like. Even if it's a visual picture, it helps you stay on track when designing. For this exercise, sketch out a very rough idea of what you have in mmind for your site.

  1. Spend a moment thinking of websites you like. Are there any elements or colors you want to emulate?
  2. What do you want to include on your site? Showing off your art portfolio, yuor photography, and writing all have different layouts that may work better than others.
  3. Create a sketch of your website to use later.
  4. Bonus: If you have multiple pages in mind already, try creating a site map!

Exercise 2: Create Your Homepage

Put some content on your site! It's ok if it looks plain now, we'll be adding styles to it in the next exercise.

  1. Save this file: index.html and open it in your code editor.
  2. Give your site a title and description inside the <head> tags.
  3. Use tags to give your page a heading (<h1>), some paragraph text (<p>), and an image (<img src="">). You can copy the code inside index.html and modify it as needed.
  4. Wrap all your content in a (<div>) element so you can modify it later.
  5. Save your work & open it in a browser. Congrats! You've made a webpage.

Exercise 2.5: Add a Second Page

Link between two pages and learn to expand your site as needed. Copy index.html and give it a different name—remember it! Then add some content like you did before, and now add a link.

  1. Add this code to the bottom of your index.html: <a href="(pagename).html">(page title)</a> and save the file.
  2. Create another, similar link at the bottom of your new page, this time with this: <a href="index.html">home</a> and save the file.
  3. Open up either page and make sure you can navigate back and forth between them.

Exercise 3: Style Your Homepage

Now we'll be adding styles to our webpage.

  1. Save this file: style.css and open it in your code editor.
  2. Find the body { }; tag and take a look at the CSS properties.
  3. Give your site a different font, font size, font color, and background color.
  4. Find the img { }; tag and give it a size in pixels (px).
  5. Find the div.content { }; class tag and add the following code:
    display: block;
    margin-left: auto;
    margin-right: auto;
  6. Remember this code—it helps you center <div> elements no matter the screen size. You can choose the width (max-width) and height (height) with those properties.
    • For responsive images, use max-width: ##%; and height: auto;
  7. Save your work & open it in a browser to make sure it looks like you want it to.

Exercise 4: Publish Your Site

Ready to go live? Even if you're not, you can always edit it later! Your site is very much a living thing & will evolve a you add to it and learn more advanced code.

  1. Log into Neocities & edit your site, linked in the drop-down where your username is.
  2. Find your files & drag them into the "Home" directory.
  3. That's it! You can view your site at yourusername.neocities.org.


Bonus: Resources, Code Snippets, and More

Want to add a little more to your site? Maybe adapt a layout instead of building one from scratch? Here are a bunch of resources to help you out. When in doubt, copy and paste! And be sure to credit the source, if they request it.

Premade Layouts & Generators

Transparent Graphics

General Resource Hoards