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 Folderand find the folder.
Create a new folder named "1".
Inside the "1" folder, create a new file named
Make sure to name the file in all lowercase. No capital letters!
Copy the HTML code below and paste it into your
<title>REPLACE THIS WITH A TITLE FOR THE PAGE</title>
<meta name="description" content="My first HTML document.">
<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>
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
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 Controltab and then click the
+option to the right of the file name.
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
Commitbutton, 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
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.
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
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
refreshthe page to see the changes.
View your HTML file on the web:
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:
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:
See this part of the first lesson for information about that.
Rejoice! Compared to most people, you are now a web expert! :)