How to create a website: The simple part
Tags: beginners, html, css, javascript
Published: 2019-10-27 21:51:37

---
title: How to create a website: The simple part
published: true
description: The basis to get started...
tags: beginners, html, css, javascript
series: How to create a website
---

Learning how to create a website is not the most difficult undertaking, but it can be tedious because of all the skills and technologies that may be required, especially if you're starting from scratch. And for beginners, it can be overwhelming. I remember getting stuck, my mind blank, not knowing what to do next. I'm here to give an overview of the different elements that go into creating your own site web.

# A text editor: The tool of the trade
First, you need a text editor. If you're on Windows, you can use Notepad because you only want the basic text (other programs add a lot of stuff in the file). Or you can download Visual Studio Code or Sublime Text which is more powerful than Notepad. And you can use them on other platforms too (Mac and Linux). Open the text editor, type `Hello, World!` and save it as `first.html`. Double click on the file created and it should be opened in your default browser. Congratulations! You've just created your first webpage.

# HTML : Creating elements
You may be wondering now how to add title or image (Who wouldn't?). For this, you need to use **HTML** (HyperText Markup Language). It allows you to specify elements and their properties (attributes) on your document. Let's start with a default template:
```html
<!doctype html>
<html lang="en">
<head>
  <title>Greetings Page</title>
</head>
<body>
  <h1>Greetings</h1>
  <p>Hello, World</p>
</body>
</html>
```

The first line is a special one and it indicates that you will be writing **HTML5** (There are multiple versions) which is the default on the web. The second line is the root tag. A tag is always written like these: `<*>children</*>` or `<*\>`. The `*` is the name of the element and the children can be other tags or text. 

`html` is a special tag and represents your whole document. It always has two children: `head` and `body`. The first one is mostly for specifying the document metadata like the title as we're doing now. The second one is where you put the content that will be showing on your web page. Now we're displaying a level 1 heading, specified by `h1`, and a paragraph, specified by `p`.
You can learn more about the different tags with this interactive tutorial [here](https://www.w3schools.com/html/).

# CSS: Make it pretty
Your next question will be probably how to change the default styles for the text as we can do in a word processor (It's kinda boring now). You will be using another language called **CSS** (Cascading StyleSheet) for that. Your browser has already a set of default styles for the different HTML tags. To create your own, there are two different ways.
The first is to put it in the same HTML file. You will use the `style` tag for that.
```html
<style>
h1 {
 color: red;
}
</style>
``` 

You can put this line of code inside the `head` tag or the `body` tag. The browser usually reads HTML files from top to bottom, so if you put your CSS after all elements, they will be briefly rendered with the default styles before the browser applies your own. So the usual way is to put them in the `head` tag.
```html
<!doctype html>
<html lang="en">
<head>
  <title>Greetings Page</title>
  <style type="text/css">
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>Greetings</h1>
  <p>Hello, World</p>
</body>
</html>
```

You should see that the heading text color is now red.

The other way is to write a new file (let's call it first.css) and reference it inside the HTML file. The content of the new file will be:
```css
h1 {
 color: red;
}
```

And you will reference it inside the HTML file like this (still in the `head` tag):
```html
<!doctype html>
<html lang="en">
<head>
  <title>Greetings Page</title>
  <link rel="stylesheet" href="./first.css" />
</head>
<body>
  <h1>Greetings</h1>
  <p>Hello, World</p>
</body>
</html>
```
When writing CSS, you will specify the targeted elements by using a selector (now we're using `h1` which targets every `h1` element on the page. Then you can specify the properties that you want to change for the elements targeted, like the text color as we do now. By using various combinations of selectors and properties, you can create almost every layout you want (People have implemented really awesome designs with it).
The same site has another tutorial just for CSS [here](https://www.w3schools.com/css/).

# JavaScript: Action, yeah!!!
So now, you know how to create elements and how to style them. But you have seen that a website is not only a document that presents information, but it can also have a lot of interactions (including those annoying popups). To interact with your web page, you will use a third language, JavaScript (Welcome to the Dev world, where almost everyone is a polyglot).
As for CSS, you can use a tag or a file to include JavaScript code. But it will usually be placed at the end of the HTML file (inside the `body` tag) to ensure that everything else has been created.
```html
<!doctype html>
<html lang="en">
<head>
  <title>Greetings Page</title>
  <link rel="stylesheet" href="./first.css" />
</head>
<body>
  <h1>Greetings</h1>
  <p id="greeting">Hello, World</p>
  <script type="text/javascript">
  	setTimeout(function() {
  		document.getElementById('greeting').innerHTML = 'Hello JavaScript!';
  	}, 3000);
  </script>
</body>
</html>
```
The same example using a JavaScript file (named `file.js`):
```javascript
setTimeout(function() {
  document.getElementById('greeting').innerHTML = 'Hello JavaScript!';
}, 3000);
```
and the HTML will be:
```html
<!doctype html>
<html lang="en">
<head>
  <title>Greetings Page</title>
  <link rel="stylesheet" href="./first.css" />
</head>
<body>
  <h1>Greetings</h1>
  <p id="greeting">Hello, World</p>
  <script type="text/javascript" src="./first.js"></script>
</body>
</html>
```

What we're doing in this code is wait 3 seconds (3000 milliseconds) then select the HTML element identified by greeting and change what's inside.
[Here](https://www.w3schools.com/js) is the tutorial for JavaScript.

# Wrapping Up

Those are the basics that you need to learn. Even with the advent of WYSIWYG tools, you need to be aware of these three in order to be proficient at using them.