The purpose of this article is to introduce one of the popular ways of displaying data - web pages. We will build a very simple one to get started, and also get a basic understanding of how to use some of the tools installed in the prior chapter.
While we are just starting our first project, we still will want to make sure that we do not lose any work nor the history of that work. Since we are using GitHub, it is time to ready our first project. Please log in, and create a new project with the New button.
Next, give a name, and choose if you want to allow others to be able to see the repository. As this is a tutorial series, I am using the name practical-programming-web-page-display-intro. You may name it something else if you want, so long as you can easily tell what it is for. I am making everything Public so that it can be viewed and used by others (though not changed directly), but if you want to keep it to yourself you can choose Private. We will also check Add a README file so that we have something available.
I am choosing a license of The Unlicense to allow others to do what they would like with it without restrictions. Most likely, you will not want this license for most things - at a later point, we will talk more about licensing. Suffice it to say, it is good to read through it before putting it in your own public repository as it tells others what the code may be used for.
I selected this one so that you do not have any legal obligations when using the code in this series. Though looking at licensing is something you will eventually have to deal with as a developer, it is something when learning that is best to not have to worry about. Here is a quick summary page for some open source licenses.
After filling out the details, click the Create respository button, and you will see a screen similar to the following.
There are several methods to git the project to your computer. As it was requested that git be installed on the computer last time, we will use it with the command line to get started. I do the majority of my projects on the root of my hard drive under an organized workspaces folder. Figure out where you would like your projects, make sure it exists, then open Visual Studio Code to your projects folder. You can either do so by opening a folder via the right click context menu (if it was checked during installation), or through opening Visual Studio Code and selecting the menu option
Now that we have Visual Studio Code open, we can use its integrated terminal to do our first clone. Open the terminal either using
Your screen should look similar to the following.
Now that we have a terminal open to the location where we want our project to be, we can go back to our project page on GitHub and click the Code button. There are several options that become available, but to keep it universal we are going to copy the first thing, HTTPS Link.
Armed with this url, we can now run the command
git clone <url-here>
Because this was a public repository, and anyone can download it, I did not have to log in yet. If you have made yours a private repo and are running into issues, we will be covering the login a little further down.
Now, we can make a change and see it reflected on GitHub - able to be retrieved from any computer in the future. In this case, I am going to swap the readme title by editing the
After making your changes, you may notice some things changing colors and seemingly random symbols. You may also realize that your project is in its own folder. When you cloned the project, it made a folder to stick it into, and when you edited Visual Studio Code detected that this folder is a git project, and started keeping track of changed folders.
Since your project has some items changed, it would be good to open to the folder that was created. You now have two choices as to how to push your code back to GitHub. The first is to run the commands
git add .
git commit -m "My first git commit after editing"
git config --global user.name "YOUR NAME HERE"
git config --global user.email "YOUR EMAIL HERE"
Now that we have pushed our code successfully, it is possible to see the changes right away on the github page.
While it seems like a lot to get started, what we have done so far is something that must be completed when starting most projects, though not necessarily with the exact same tools. However, we can now make a new file to do some code in! You can do so by making sure that the Explorer pane is open (Double Page Icon) then clicking the New File Icon (Folded Paper with a +) or right clicking and selecting New File. Name the new file
In the new file, place the following.
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My first page</title> 5 </head> 6 <body> 7 <div> 8 <h1>My first Title</h1> 9 <p>My first random paragraph</p> 10 </div> 11 <div> 12 <h2>Bullet List Header</h2> 13 <ul> 14 <li>First</li> 15 <li>Second</li> 16 </ul> 17 </div> 18 </body> 19</html> 20
Now that we have this, we want to take a look at it. To do so, we will use a simple Visual Studio Code plugin called Live Server. You may also view it directly through the file system and opening in a browser, but Live Server will allow making changes and see them instantly. To use this, click the icon that looks like a stack of blocks with one falling on it (called the Extensions button when hovering - it can also be opened through
After the extension has finished installing, you may click the new Go Live button that has appeared in the lower right hand corner of Visual Studio Code.
When you click this button it should launch a new browser tab as well as changing the icon and text to show a cancel sign and what port it is live on.
If you try changing some text in the index.html file that you made earlier, you should see it instantly change on the web page. Without using the extension, you would need to manually refresh the page.
Now that we have a page to play with, we should push it to GitHub so that we don't lose it. This time, we will use the Visual Studio Code built in Source Control instead of the command line, to experience a graphical representation of the changes.
To do so, click the Source Control button on the side - it has three circles connected by a line. Then, write a message where it says Message, such as "Created Simple Index Page" and either click the check mark or hit
This is the equivalent of the first two
To get the changes from our computer to GitHub, we must push them. Either use the ellipsis (three dots) menu and click push or look for the syncing icon on the lower left and click it. Syncing will push and pull changes, meaning if there were changes from another computer they will be pulled in.
Looking at the index.html file, you will notice that that aside from the text, it has a structure with indents and other text inside of angle brackets (
The first line
All other lines are wrapped in a pair of tags of the form
We will go over each tag in detail, in the left-to-right top down method, and what it does here.
One level into the
The first div contains an
In the second div, we have a smaller header with the
Next up is the
In fact, let us combine both to see what happens. Remember, one of the keys to practical programming is experimentation to see what happens. Many times something will work in theory, but you can not be certain of the practicality of it until trying it.
1<ul> 2 <li>First</li> 3 <li>Second</li> 4 <ol> 5 <li>Indent One</li> 6 <li>Indent Two</li> 7 </ol> 8</ul> 9
After making these changes, we should again commit our changes and push to GitHub, giving a message explaining what we have done, such as "Added an ordered list to the unordered list". If you use the graphical way, you can now see easily what has changed on the file directly in the editor by clicking it.
In this lesson, we have started to become familiar with our coding environment, as well as getting our changes backed up regularly. In addition, we started to explore the structure of a web page, and now have the ability to make changes and see them right away. Full code to this point may be found at GitHub, or StackBlitz.