First web project

These slides are going to walk through setting up a new project in your Codespace where you will do your first web programming.

Open your codespace

Make sure you are on the main branch.

If, for some reason, you are not on main, click the indicator and use the menu to change to main.

Make sure you’re synced up

Go to the version control tab.

If you see this, press the “Sync changes” button.

Otherwise

Sync up via ººº ⇨ Pull,Push ⇨ Sync.

This makes sure your Codespace has all the latest changes from your Github repository.

Back to the command line

To get the starter code into our Codespace we need to go back to the command line.

As before, right click on the start-project file in the file explorer and choose “Open in Integrated Terminal”

Getting starter code

Now type:

./start-project first-web trivial-web

and hit return.

You should see something like this:

If it worked

The start-project script created a branch for your new project and a directory under projects matching the branch name, then fetched the starter code and installed some libraries you’ll need.

See the new files

If you click the triangle next to the projects folder in the file explorer it should show you some new files.

Start your web server

Now right click on first-web and choose “Open in Integrated Terminal”. In the new terminal type:

node index.js

You should see:

Open preview

At the bottom right of the screen, this dialog should pop up:

Choose “Preview in Editor” for now.

You should see this

If that all worked …

Congratulations! You have successfully started a web server and served up a page of HTML!

🎉🎉🎉

Commit starter code

Before you do anything else, use the version control icon in the sidebar to commit the new files.

Play with the HTML

Now navigate to first-web/public/index.html in the file explorer and click on it to open it in an editor.

Then play with the HTML and click the reload button to refresh the page.

Things to try

• Add more paragraphs.

• Add <b> and <i> tags to bold and italicize some text.

• Make a list with <ul> and <li> tags.

• Look back at MDN html basics for more ideas.

Commit your changes

Whenever you make some interesting changes, you should commit them with a descriptive commit message. This makes it easier to see what you were doing and also creates checkpoints that you can go back to if you want to later.

Make a pull request

At the end of class, go to the Github website and create a pull request for the projects/first-web branch and request my review.