Make Your Own Website
Part 3: Workflow and Basic Page Elements
Part: 0 1 2 3 4 5
Boilerplate Code
Last lesson we saw how to make a simple page. What we found was that there was quite a bit of code that just had to be there to make our HTML valid.
Before we could write our paragraph, we needed to declare the type of our document, open an html element, put a head element inside that, with a title element inside that, and a body element underneath the head element, that we could put our paragraph inside.
This type of code, that needs to be there to make things work right and is usually the same every time, is known as "boilerplate" code. Programmers generally prefer not typing out too much boilerplate, so there are shortcuts in many editors to create it for you.
If you are using VS Code, there is a built in snippet for generating HTML boilerplate. To see this, open a new file and save it with the extension .html (alternatively, you can use "create new file" from the file context menu and name the file as you create it). The file must have the extension .html for VS Code to know you're trying to write HTML.
Now if you start typing html (without an opening angle bracket), you should see a list of suggestions from VS Code appear. Select the one that says "html:5" and you should see several lines of text appear at once. This is a snippet of boilerplate, generated by VS Code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>You should also notice that several areas of the snippet are highlighted. If you press the tab key, you'll advance through these one by one and can type to change their values. For example in this snippet, you can press tab several times until Document is highlighted and then change it to add a title to your HTML page.
As you should be able to see, the snippet includes a !DOCTYPE and the html element with a head and a body. The head contains the title tag that we edited a moment ago, but what is all this other stuff?
Tag Attributes
The html tag has an attribute added to it. In this case, the attribute is called lang and the value being given to it is en. The "s are needed around the value but not the attribute name.
As you might guess the lang attribute sets the default language for the webpage and en means English so assuming you were already using English, you shouldn't see any change from this.
There are lots of different attributes that can be set, depending on the type of tag, and we'll see more of the shortly.
Meta Tag
The meta tag explicitly declares a piece of meta-data about the document.
The three pieces of information declared here are
1. The "character set" of this document is "UTF-8". This is almost universally true of all documents on the internet, but it doesn't hurt to mention it.
2. The "viewport", the rectangle on which the page is going to be displayed, should be the same width as the screen and the view shouldn't be zoomed in or out
3. This one is specific to Microsoft browsers - Internet Explorer and Edge - and it really isn't needed any longer 99.99% of the time. You can leave it there or you can delete it and yet again, it won't make any difference to anything.
If you save this file and open it in your browser you should see that it's just an empty page, although it does have a title that you should see displayed on the tab in your browser. None of these attributes and meta tags add or change any content.
Other things that can be set using the meta tag include...
Workflow
Snippets are useful because they speed up a repetitive task. Once we understand what the code does, we don't want to be typing the same thing out every time, so we use the snippet instead.
This is an example of improving our "workflow" to make things easier, faster and more enjoyable.
Programmers are always looking for ways to improve their workflow and it will make your learning experience more enjoyable if you think about how you can improve your own workflow as you go along.
Arranging Your Application Windows
The basic workflow that you're going to be carrying out, to begin with at least, is "switching to" your text editor, making changes to a text file, saving it, switching to your browser and refreshing the page.
To make this switch as effortless as possible, it's usually best to have both the text editor and the browser open on the screen at the same time.
You can either manually arrange them whichever way you prefer, or you can use a "tiling window manager" that will make sure the applications (your editor and browser) don't overlap and that together they fill the whole screen.
If you need your browser to be in full screen, or you don't find that you would prefer your editor to be bigger then you can either overlap the windows partially, so that they do occlude each other, but it's still easy to switch between them with the mouse.
Alternatively, you can put them on different "virtual desktops" and switch between them. This is a very good solution on a Mac, because switching between virtual desktops is very intuitive. The experience is not as polished on the other platforms because you need to visit the task-bar to switch between desktops when navigating with the mouse.
Keyboard Shortcuts
Switching Applications
Because your hands are on the keys already, it can be quicker to switch between applications using keyboard shortcuts, instead of using your trackpad or mouse.
It might not seem, to begin with, that something like this could make much difference, but when you repeat the same action hundreds or thousands of times, making it a tiny bit quicker and easier makes a big difference altogether.
On each platform there are different keyboard shortcuts that will let you switch between applications.
On a Mac, you can press (and hold) the command key and press tab to bring up the application switcher and highlight the next application. Releasing the command key will then switch you to that application. If you press the tab key multiple times, you can instead select a different application before releasing the command key.
Note that the last-used application is always the first in the list, so repeatedly doingcommand-tab (releasing the keys in between) will switch you backwards and forwards between two applications, for example your browser and editor.
Save and Re-load
In addition to keyboard shortcuts that are recognised by the Operating System, there are others which are provided by individual applications. There are usually shortcuts to perform any of the important and often-used actions.
You can often find the keyboard shortcut for a particular action listed on the matching menu item. For example, if you open the file menu in VS Code, you should see menu items for common file actions with the matching keyboard shortcuts are listed to the left of each item.
The VS Code keyboard shortcut to save the current file (on a Mac at least) is 'command-s'. This means you hold down 'command' and press 's'.
To save all the currently open files, you can instead press 'option-command-s' (hold down option whilst performing the same action as before).
In all of the major web-browsers, the keyboard shortcut 'command-R' (Mac) will re-load the current page.
Putting all this together, hopefully you will see why these shortcuts are worth learning. Now, when you make a change to your file, instead of needing to select save from the file menu in VS Code, switch programs with your mouse and then clicking re-load in your browser, you can instead type: "command-s", "command-tab", "command-r" to achieve the same result and then press "command-tab" again to get back to your editor.
Server
In the first lesson and up to now in this one, you have opened your .html files by just (double) clicking them and having them open from your filing system.
If you look at the address bar of your browser, you will see that pages opened that way have an address that starts with file:// which is "file protocol".
As you probably know, webpages on the internet are served instead over the "http protocol" instead and have addresses that start with http which stands for "Hyper-Text Transfer Protocol". HTTP is the standard way of sending and receiving web pages.
The reason for the difference in protocols is that browsers need to be more restricted when they are accessing files on your computer, rather than files that someone has put on a web server, to make sure that the programs they run don't do something malicious.
Even though your pages will load and look fine if you open them as files, some slightly more advanced things might not work as expected. For example, when we add a "favicon" - the little picture that sometimes shows up in the address or tab bar for a website - it won't be loaded correctly if we're using the file protocol.
For this reason it is common practise to run a "local server" and use it to serve your webpage to your browser from it. That way, your site should look exactly as it will when served from a real server.
Running a local server is very easy and doesn't require any complicated configuration like a real web server does. Most operating systems have at least one server built into them already and there are various other options.
People tend to choose whichever server they find easiest, given their skill set. So, for example, Javascript developers would probably install something like http-server using npm (the Node Package Manager) and run that from the command-line.
Live-server
One way to get a simple server that 'just works' is to install one as an extension to VS Code, but if you're going to do that, you might as well have a "live server".
A live-server is a special kind of local server that sends additional code to your browser along with your pages. Every time you save your file the browser will automatically re-load the page, showing the result of any changes.
In many cases, doing this means that you don't have to worry about switching between applications at all, because you can see the result of your changes without needing to bring the browser into focus and refresh the page.
A live-server is a great work-flow improvement because it removes a tedious, repetitive task altogether.
If you are using VS Code, you can install the "live-server" extension from the extensions panel (search for 'live server' and it should then running a live server is as simple as clicking the "go live" button which will be added to the bottom of your editor window.
Note: If you're not using VS Code for some reason, there may be a similar solution for your editor, or you can install "live-server" as an npm module and use it externally to your editor of choice. It will still watch your files and re-load your browser whenever they change.