Practice 1

Make sure to complete every step on the Technical Setup page.
Make sure you are logged into your GitHub.com account in your web browser.
Start up Visual Studio Code.
If your "webdev1" repository is not already opened, you can go to File -> Open Folder and find the folder.
Create a new folder named "1".
Inside the "1" folder, create a new file named index.html
Make sure to name the file in all lowercase. No capital letters!

Copy the HTML code below and paste it into your index.html file.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>REPLACE THIS WITH A TITLE FOR THE PAGE</title>
    <meta name="description" content="My first HTML document.">
</head>

<body>

    <h1>REPLACE THIS WITH A TITLE THAT WILL SHOW ON THE PAGE</h1>

    <p>REPLACE THIS WITH SOMETHING <strong>AND PUT SOMETHING SUPER IMPORTANT HERE!</strong></p>

    <p>REPLACE THIS WITH SOMETHING ELSE.</p>

</body>
</html>

Remove the text that is in all-caps and replace it with your own text.
Make sure to SAVE the file.
Publish your practice exercise to the web.
There are 3 steps involved in publishing your changes to the GitHub repository: stage, commit, and push
Stage:
I like to think of this as "putting my actors on the stage" :)
We are establishing which changes will be included in our new version of the repository.
To do this, select the Source Control tab and then click the + option to the right of the file name.
Commit:
A "commit" is like a version. You are creating a new version of the repository. Your "staged" changes will be included in this version.
In the text field above the Commit button, type a message that describes the changes being made in this commit.
As an example, you could simply enter "practice 1" as the message.
Then click the Commit button.
If you forget to type a commit message...
If you forget to type a message before clicking Commit, a scary file will appear :)
No worries. Simply type your commit message on a line that does not begin with a hash symbol.
Then save and close the file.
Push:
When we submit our changes off to an external repository on a web server, it is called pushing.
To push your changes to GitHub.com, click the 3-dot menu and select Push
Once successful, you will see the new "1" folder inside your repository on GitHub.com.
If your GitHub.com repository was already open in your browser, you will need to refresh the page to see the changes.
View your HTML file on the web:
https://github_user_name_here.github.io/webdev1/1/index.html
If it doesn't work immediately, wait a few minutes and try again. Sometimes, it takes a few minutes to process.
You can see an example here:
https://40px.github.io/webdev1/1/index.html
You can right-click on the page and select "View Page source" to see the HTML code in the index.html file.
tip
Since the file is named index.html, we don't actually have to provide the file name in the URL.
This URL will also work:
https://github_user_name_here.github.io/webdev1/1/
See this part of the first lesson for information about that.
Rejoice! Compared to most people, you are now a web expert! :)

Stage:​

Commit:​

Push:​

Stage:

Commit:

Push: