Skip to content

Basics

Useful Websites

W3Schools

Link to website

In my opinion, this is the best place to check how different HTML tags work.

Mozille Developer Documentation

Link to website

Great site for checking references to different html tags and Javascript APIs.

caniuse.com

Link to website

This can be used to check if some html tag or technique works in older browsers.

Editor

To make websites and apps, we use the Visual Studio Code editor. You can use a lot of other editors, but this is our choice for this course.

Also, in order to make development faster, please install the Live Server plugin for VSCode.

Browser

During this course, we will use the Chrome browser. Please install Google Chrome for your computer if you do not already have it. In my opinion it includes the best development tools for web development and it is easier when we use the same browser during the course, because:

  1. Different browsers can render your website in different ways
  2. I would need to teach how to use development tools in variety of different browsers

Getting Started

  1. First, create folder on your computer which holds your HTML code.
  2. Create file index.html in the folder you just created.
  3. Now, open the folder that contains your index.html file with Visual Studio. HTML files usually have the extension html. Now, open your html file and create this basic structure:

Basic page structure

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first site</title>
    <meta name="description" content="First cool stuff">
  </head>
  <body>
  </body>
</html>

doctype: doctype defines type for the document. In the example above we defined a html document. Read more
html: all html code is written inside the html blocks. Read more
head: head defines the metadata for the website. Read more
title: This tag can be used to define title for your website which is visible in the top bar on your browser. Read more
meta: Meta tags can be used to set default character set for the website, author name, description for the website and such. A lot of these attributes are used in search engines to show your website search result. Read more
body: All your html body code is added here. Read more

Opening your page

There are couple ways to open your page on your browser:

  1. You could navigate to your folder where you have the files, right click on the file and "open with Google Chrome". Or double clicking the file would open the file on your default browser, if your default browser has been set to open .html files. However, opening the file this way would need you to reload the file every time you make change to your code.
  2. Recommended way: We could serve the content using web server. The Visual Studio Code extension called Live Server can be used just for this purpose. Read below how to get this working.

To get your page opened up on Live Server:

  1. In VSCode right click on your index.html file. Select Open with Live Server.
  2. Your browser should open a page like this: http://127.0.0.1:5500/index.html
  3. Now, try doing any change to your page. It should automatically reflect on your live server. No need to refresh the page anymore!

Info

What is the address http://localhost or http://127.0.0.1 from where we host the files?
Both of these addresses refer to your own computer. The IP Address 127.0.0.1 is always reserved to be your computer. Address localhost is actually an alias of the address 127.0.0.1.

Recap

What we just learned:

  • Basic HTML structure
  • How to open your page with browser from your computer and using live server extension