1 of 19

HOW TO CODE

2 of 19

3 of 19

STEP 2

Make a GitHub account.

Login to that account on�GitHub Desktop.

4 of 19

STEP 3

Make a new repository on GitHub.

Call it “wp22”.

Set its visibility to Public.

5 of 19

STEP 4

In your new repository, �click “Set up in Desktop”.

6 of 19

STEP 4.5

In GitHub Desktop now, �set the Local Path (where�you want your files stored)�and click “Clone”.

7 of 19

STEP 5

Download this .zip file.

Move its contents inside of�your repository.

It should look something�like this.

8 of 19

STEP 6

Your GitHub Desktop should look like this now.

Give your first commit (i.e. upload of files) a name, and press “Commit to main”.

9 of 19

STEP 6.5

To actually get your files online, press “Publish branch”.

10 of 19

STEP 7

Go back to the GitHub page for your repository and reload.

It should look like this now!

Click on “Settings”.

11 of 19

STEP 7.5

Click on “Pages”.

Under “Branch”, click on the dropdown menu.

12 of 19

STEP 7.6

Select “main” and then press “Save”.

13 of 19

STEP 8

In a couple of minutes your site will be up!

Your website’s URL is:

yourusername.github.io/wp22

This version of your site is LIVE, meaning anyone can see it.

14 of 19

STEP 9

If you want to see the local version (i.e. NOT LIVE) version of your website, you can drag the “index.html” file into your browser window. Notice how the URL is totally different.

15 of 19

If you make changes to your HTML and CSS files, you’ll only see those changes in your local files.

Every time you make a change, you’ll need to refresh your browser tab to see it.

You need to commit/push changes to see them online!

16 of 19

TIPS FOR�VSCODE

17 of 19

Set word wrap to “on” in the settings so that you can actually see what you’re doing when writing code.

(This keeps all of the code visible so that you don’t have to scroll left or right!)

18 of 19

Command+B (Mac)

Control+B (Windows)

This shortcut hides the side panel!

19 of 19

If you’re feeling fancy, download the Live Server extension to easily test your website!

This lets you preview changes without having to refresh your browser every time.

Check out the linked page for more info.