Webpages

We're going to put a new web page on the internet.

Example: Gargoyles fan page.

Example: To infinity and Beyond.

There are two steps: we set up an example page, then you add your own content.

Let's go!

Make a Neocities account

Go to neocities.org
Under 'Sign up for free', fill out the form to create your account.

Choose the 'Free' option and click 'Continue'

You will have to check your email to get the code for the next page.

One the page after that, click 'Go to the dashboard >>' to skip Neocities' tutorial. (We want you to do our tutorial instead!)

The Dashboard

This is the dashboard, which shows all the files in your website.

Delete some files

You can hold your mouse over a file and you will see 'edit' or 'delete' or both.

Delete neocities.png, not_found.html and style.css. We don't need those!
You now have only 1 file: index.html.

Editing

Edit your index page by moving your mouse over the index.html file and clicking the 'Edit' link that appears.

This opens a tab where you can change your page.

Tab 2: Click on the 'View' button on this page.

This opens a new tab where you check how your page looks.

Right now, your page will be a white page with some instructions on it. You can ignore those instructions. We are going to delete them in a moment.

Now you have two tabs that you will use: One to look at your site, and one to edit your site.

Put your link on Slack

Copy the link to your page, and paste it into our team chat on the girl code slack.

Copy the link like this... (this is the link from the tab where you view the page, not the one where you edit.)

In Slack, join your class channel. A channel is like a chatroom and they are listed on the left-hand side.

Paste your link into your class channel.

Now it's in the Slack, so your team can see what you're working on. It's really important to be comfortable sharing your work, even when it's not finished!

Replace the HTML

Go to the tab for editing (it says Dashboard > index.html)

Delete all the code until the dark grey area is empty. That's right, delete it all!

Then copy and paste this in instead:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        color: red;
        background-color: blue;
      }
    </style>
  </head>
  <body>
      <h1>Welcome to my page</h1>
      <p>This is a paragraph.</p>
  </body>
</html>

Click 'save' at the top right to save.

Now switch to the tab that shows your website. Refresh the page and you should see your changes appear.

It should look like this.

Congratulations! You have made a beautiful website! Well, kind of.

Maybe you want to change it a little…

Continue on to part two!