Skip to content
Internet of Things - Knowledgebase

Front-end

Every time you visit a webpage, your browser is downloading files from a webserver. These files are then rendered into a webpage. These files consist of:

  • HTML
  • CSS
  • Javascript
  • Images
  • ...

source: https://dribbble.com/shots/5299243-What-is-Front-end-Development

HTML is a fundamental coding language that forms the backbone of virtually every web page you encounter on the internet. It's the building blocks that structure and define the content you see on a website. Imagine HTML as the framework of a house – it provides the structure and layout.

CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed. For example the color of the text, the size of the text, the font, the background color, the position of the text, the position of the image, ...

Javascript is a programming language that adds interactivity to your website. This allows you to create dynamic content. For example, you can create a button that changes the color of the background when you click on it.

Structure your webpage with HTML

HTML is a markup language, not a programming language. The structure of HTML is very simple. It consists of tags. A tag is a keyword surrounded by angle brackets, like <html>. The tag tells the browser how to display the content. Most tags have an opening tag and a closing tag. The closing tag is the same as the opening tag, but with a forward slash in front of it, like </html>. The content that is between the opening and closing tag is the content that will be displayed on the webpage.

1
<html></html>

To make this HTML runnable you open your favorite code editor and create a new file. You save this file as index.html. The .html extension tells the browser that this is an HTML document. You can open this file in your browser by double clicking on it. You will see a blank page. Lets add some content to this page.

The <html> tag is the root tag. It is the parent of all other tags. It is the first tag that you will write in your HTML document. The <html> tag tells the browser that this is an HTML document. Inside the <html> tag, you will find the <head> and <body> tags. These tags are the children of the <html> tag. The <head> tag contains information about the document. The <body> tag contains the content that will be displayed on the webpage.

1
2
3
4
<html>
    <head></head>
    <body></body>
</html>

The <head> tag contains information about the document. It contains the title of the document, the character set, the description, the keywords, ... The <title> tag is the title of the document. It is displayed in the browser tab.

1
2
3
4
5
6
<html>
    <head>
        <title>Hello world!</title>
    </head>
    <body></body>
</html>

Save this in your index.html file and refresh the page in your browser. You will see that the title of the document is now Hello world!.

HTML, CSS, Javascript

The <body> tag contains the content that will be displayed on the webpage. Lets add a heading to the body. The <h1> tag is a heading tag. It is used to display a heading on the webpage. The <h1> tag is the largest heading tag. The <h2> tag is the second largest heading tag. Up to <h6>.

1
2
3
4
5
6
7
8
<html>
    <head>
        <title>Hello world!</title>
    </head>
    <body>
        <h1>Hello world!</h1>
    </body>
</html>

Save this in your index.html file and refresh the page in your browser. You will see that the heading is now displayed on the webpage.

If we want to add a paragraph of text to the webpage, we use the <p> tag. The <p> tag is a paragraph tag. It is used to display a paragraph of text on the webpage.

1
2
3
4
5
6
7
8
9
<html>
    <head>
        <title>Hello world!</title>
    </head>
    <body>
        <h1>Hello world!</h1>
        <p>This is a paragraph of text.</p>
    </body>
</html>

Save this in your index.html file and refresh the page in your browser. You will see that the paragraph of text is now displayed on the webpage, below the heading.

To display an image on the webpage, we use the <img> tag. The <img> tag is an image tag. It is used to display an image on the webpage. The <img> tag is a self-closing tag. It does not have a closing tag. The <img> tag has an attribute called src. The src attribute is used to specify the path to the image. The path can be a relative path or an absolute path. A relative path is a path relative to the current file. An absolute path is a path relative to the root of the website.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<html>
    <head>
        <title>Hello world!</title>
    </head>
    <body>
        <h1>Hello world!</h1>
        <p>This is a paragraph of text.</p>
        <img src="https://thecatapi.com/api/images/get?format=src&type=gif" />
    </body>
</html>

Styling with CSS

CSS is all about styling. You can style the text, the background, the position, the size, ... of the elements on the webpage. To do this you have create a new file in your code editor. You save this file as style.css. The .css extension tells the browser that this is a CSS document. Make sure you save this in the same directory as your HTML-file.

1

If we look at our previous example with HTML, let's say we want to change the color of the heading to red. In CSS we can select all the <h1> tags and change the color to red.

1
2
3
h1 {
    color: red;
}

Now save this in your style.css file and refresh the page in your browser. You will see that the color... didn't change! Why is that?

Well, we have to tell the browser that we want to use this CSS file. We do this by adding a <link> tag in the <head> tag of our HTML document. The <link> tag is a self-closing tag. It does not have a closing tag. The <link> tag has an attribute called rel. The rel attribute is used to specify the relationship between the HTML document and the linked document. The rel attribute has the value stylesheet. This tells the browser that the linked document is a stylesheet. The <link> tag has an attribute called href. The href attribute is used to specify the path to the linked document.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<html>
    <head>
        <title>Hello world!</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h1>Hello world!</h1>
        <p>This is a paragraph of text.</p>
        <img src="https://thecatapi.com/api/images/get?format=src&type=gif" />
    </body>
</html>

Now save this in your index.html file and refresh the page in your browser. You will see that the color of the heading is now red.

Libraries

Building a website from scratch can be a lot of work. To help you get started you can use a library. A library is a collection of code that you can use in your own code. There are a lot of libraries out there.

A list of populair HTML/CSS libraries:

We recommend not to use a full template from the internet.