This is a website about how to make a website.

One, open this page with developer tools to see and modify the source code (the html).

Two, create a GitHub account. Then create a repository called: yourusername.github.io, download and copy this index.html into it and publish a webpage.

Three, download a code editor, modify the index.html, drag and drop the new file to your repository and see your changes updated on your website.


One

please click option+command+I (mac) or F12 or Control+Shift+I (windows/linux) on chrome for developer tools so you can read the source code. Right click and select "edit as HTML" to make modifications to the code and see the changes on the page.


Two

Go to GitHub.com. Create an account - choose your username wisely.

Create a repository called yourusername.github.io (eg: username is pea, so I create a repository called pea.github.io).

The syntax is very important. If you don't write your very exact username (lower case), your website will not work.

DO NOT TOUCH the other settings. That is: go against your insticts, because yes, the repository needs to be public, otherwise your website will not be publicly visible. Do not add a readme, do not add a .gitignore.

Click on "Get started by ... uploading an existing file."

Go to https://github.com/trhi/website. Click on the green <> code button -> download ZIP.

Unzip. Drag and drop the contents of the folder called "website-main" (it containts a file called index.html) to the screen you have open for uploading files to your repository: yourusername.github.io.

Wait a moment, something like three minutes. Then navigate to yourusername.github.io to see your website published on the internet.


Three

Download visual studio code (or some other code editor). Open the index.html file in VS code and edit it. Save. Press "run and debug" to view the file in the browser. Drag and drop index.html to your github repository to update your webpage.


→ A very simple website

Two very basic things: how to write text and how to display an image.

p, lower case, is for paragraph, the paragraph tag, a p. It is pronounced the same as pea 🫛.

This is how you increase the font size of a pea 🫛.

This is how you add color to a pea 🫛.

This is how you increase the font size and the color of a pea 🫛.

This is how you emphasize a pea 🫛.

The more I repeat pea 🫛, the stranger it begins to sound 🔊.


I will now add an image:

I want the image to be small: fifty percent of the width of the screen.


Now I am going to create a div - a content division element. I am going to make a div that has all my images.

Now I am going to place the div so that it is perfectly centered on my page:

↓ The image below ↓ works like a link. Click on the image. It will take you to a webpage about peas.


→ Some websites

A list of websites written in html for you to explore. Copy and modify their source code:

The first ever website in the world.

Terhi Marttila. Reads like a CV, with links to works.

The website for protection song precare zine, a work by Heather Kelly.

A huge bunch of amazing websites by different artists. Click on their name to access their website.

taper. Lot's of tiny websites that are artworks, open the source code and modify it.


→ Some resources for learning html

Ask https://chat.openai.com/ (chatGPT) for help on how to write html.

Read the reference at Mozilla developer network for information on different html elements and their properties.

Look for advice on https://stackoverflow.com/, a forum where people advise eachother.

Read about and study html on w3schools.

Explore resources or take a free course on html on codecademy.