How to make a website in HTML/CSS
Tags: html, javascript, css, webdev
Published: 2023-03-24 19:19:03

**In this guide I'm going to be teaching you how to make a simple website in HTML and CSS.**

Lets start with a simple introduction - What is HTML and CSS?
HTML and CSS are both programming languages (although some people say they aren't). HTML stands for Hyper Text Markup Language and is used to structure and create content for a website, CSS stands for Cascading Style Sheets and it's a styling language used to style for example websites. 

**Programs and other stuff you need to start:**

- Visual Studio Code [code.visualstudio.com](https://code.visualstudio.com/). It's a great code editor for making websites.


**Start writing some code.**

So first of all create a directory where you want your website to be, I usually create a folder on my desktop. You can call it whatever you want but I usually call my websites `(project name) website`.

Now to open this file in your code editor, open VS code. Click the `File` button in the top left corner, then click `Open Folder` and navigate to your selected folder.

Now on the left side you will see a file explorer, hover over it and right click. Select `New File` and call the file `index.html`. This is our HTML file.

Now you're in the HTML file. Start by typing `!` and then clicking tab, this will give a little bit of boilerplate code so you don't have to write everything by yourself. It should look something like this:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial
scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
``` 

Now the `<>` objects such as `body`or `head` are called tags. In the `body` tag all of the website content will be while in the `head` tag all of the website information will be such as title or icon.

You can modify the title for example by changing the text that says `Document` to whatever you want like this:
```html
    <title>Document</title>
``` 

Then just to have something to display on the website, lets add text to the website like this:

```html
<body>
    <h1>Welcome to my website!</h1>
    <p>This is a text on my website, it was made using HTML/CSS</p>
</body>
```

All of the content should be in the `body` tag, the `h1` tag stands for header1 which should be used for headers, the `p` tag stands for paragraph which should be used for paragraphs.

To view the file in your browser just navigate to your folder in file explorer and double click it to open. It will open in a browser and look something like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vprbxa3mw98eigyuufh.png)

That's just a simple little website in HTML just to set it up you can use multiple different tags and stuff to make the website look better. I'll go over those things later in the guide, for now we just want to set up the basics.

Now it's time to add the styling or the CSS into the project, to make it look better. So go to the file manager in VS code, right click and click `New File` call it `style.css`.

This is your css file, to include it in the HTML you have to modify the HTML `header` tag by adding this line of code (in the `header` tag):

```html
   <link rel="stylesheet" href="style.css">
```

The HTML file should look something like this now:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>My Website</title>
</head>
<body>
    <h1>Welcome to my website!</h1>
    <p>This is a text on my website, it was made using HTML/CSS</p>
</body>
</html>
```

Now in the CSS file lets start by changing the background colour of the website. We will start by defining the `body` tag from our HTML into the css by doing:

```css
body {
    
}
```

To change the background colour of the website/body we'll have to do this:

```css
body {
    background-color: black;
}
```

You could either set the colour to a text like `red` or `blue` but you can also set it to a hex code like `#000` or `#FFF`.

Now because I set the background colour of the website to black we want to change the text colour to white, we can do this by adding a line below the background colour line. The text colour is just called colour:

```css
body {
    background-color: black;
    color: white;
}
```

Remember to end the line by using a semicolon `;`.

Now after we've done some very simple css the website should look something like this:

(BTW: reload the website to see changed results)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1yzo9jtb51ijoq2l1l3f.png)

Now lets say we want to change the colour of the `h1` to a gradient and change the size of it:

```css
h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
```

Then we can do something like this. 

CSS does not support to set the colour of the text to a gradient, if we wanted a normal colour we could've just set the colour by doing `color: white;` but now we have to add all of the other stuff.

The font sizing (and all other sizings) in CSS works pretty simple as you can see, it has some units though like:

- `px` which is pixels
- `in` which is inches
- `vw` which is the width (relative to the website width)
- `vh` which is the height (relative to the website height)


Now the full CSS file should look something like this:

```css
body {
    background-color: black;
    color: white;
}

h1 {
    font-size: 72px;
    background: -webkit-linear-gradient(#eee, #333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
```
and the website something like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ftyybl3ubnis5vjs2m7.png)

(you can of course change the colour of you do not like the colour-combination provided)


Now lets say you wanted a titlebar with multiple pages on your website, to do this we are first going to create the titlebar element by making a `div` in the html with a class of `titlebar` (in the body tag on the top):

```html
<body>
    <div class="titlebar"></div>
    <h1>Welcome to my website!</h1>
    <p>This is a text on my website, it was made using HTML/CSS</p>
</body>
```

You can do this quickly by just typing `.titlebar` in vscode then clicking tab.

Now the titlebar needs some links. To create links we'll create a couple of `a` tags based on how many pages/links you want. Something like this:

```html
    <div class="titlebar">
        <a href="">Home</a>
        <a href="">About</a>
        <a href="">Contact</a>
    </div>
``` 

Lets style the titlebar a bit to make it look more like a titlebar. First we'll get the titlebar tag in the CSS by doing:

```css
.titlebar {
    
}
```

Then in the titlebar we want to modify some stuff, like the width. I'm going to set it to 100% to make it stretch all over the page. Then we'll set the height, I'm going to set it to 40 pixels and then finally the background colour which I'm going to set to green.

Here's how you do that:

```css
.titlebar {
    width: 100%;
    height: 40px;
    background-color: green;
}
``` 

Now the titlebar still looks pretty bad, I'm first of all going to change the links to make them look a bit better by changing the colour, size and decorations (the underline). To define the links we do this:

```css
.titlebar a {
    
}
```

To modify the colour, size and decoration we can do this:

```css
.titlebar a {
    color: white;
    text-decoration: none;
    font-size: 25px;
}
```
(you can always change it to whatever properties you want)


Now the website should look something like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0x19r9vq54ctyj0eiaqu.png)

But the titlebar still looks very bad, to change this I want to center my items and add some spacing to them, we can do this by doing:

```css
.titlebar {
    width: 100%;
    height: 40px;
    background-color: green;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 50px;
}
```

We basically change the display type to flex, center the items and adding a gap, you can always modify the gap.


Now our titlebar looks a lot better:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xws4ytrlsxk0uf0yqnbc.png)

But the links on the titlebar still doesn't work, now it's time to add some pages.

So lets create 2 more html files, one called `about.html` and one called `contact.html` for the pages. When we have created those we will add them to the items modifying this:

```html
   <div class="titlebar">
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
    </div>
```

This should send you to the page based on where you click. now when we have that setup lets create the 2 other pages. We can start with the about page. For the simplicity I will just copy the `index.html` file and modify that code.

We can change the title to something like About. Then we can change the text of the about me page to something about me like this:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>About</title>
</head>
<body>
    <div class="titlebar">
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
    </div>
    <h1>About</h1>
    <p>Hello I'm AzE a developer from Sweden.</p>
</body>
</html>
```

Then we can do the same for the contact page, copy the `index.html` and modify it as we like:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Contact</title>
</head>
<body>
    <div class="titlebar">
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
    </div>
    <h1>Contact</h1>
    <p>You can contact me at aze@gmail.com</p>
</body>
</html>
```

Now the website should look something like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oibfgw4eqok53llyvn2a.png)

You should be able to click on the `Home`, `About` and `Contact` to go to those pages and see the content of those pages. That is how you create simple pages in HTML.

Now lets add some elements like videos and images, to do this lets create a new folder in our folder called `img` where we can store all of our images. So put the images that you want in that folder, I'm just going to put some random sponge bob image. I will rename it to spongebob just to make things easier for us:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2mrhbk020eyp7bp79a0.png)

Then lets create the image. I want to put this image on the home page so lets go to the `index.html` and add a `img` tag and set the `src` to `img/spongebob.png`. Like this:

```html
<img src="img/spongebob.png" alt="">
``` 

To change the width and height of the image I can go into the style.css file and define the `img` tag:

```css
img {
    
}
``` 

and then we'll set the width to whatever we want, the height will automatically get adjusted - no need to set that. It should look something like this:

```css
img {
    width: 100px;
}
``` 
and the website something like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gd9nyd5ejbk0mr4l6h4.png)

If you want to add some space between the text and the image you can use a property called `margin` this can be used like:

```css
img {
    width: 100px;
    margin-top: 150px;
}
``` 

To add some space between the text on top and the image by pushing the image down with the `top-margin`. The website should now look something like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i70f5q5wmq6pokbr2mur.png)

The image is pushed down a bit. If you do not like it you can always remove it, in the example I removed it since I didn't like it, but that's how you use margin. You can use it with:

- `margin-top`
- `margin-bottom`
- `margin-left`
- `margin-right`
- `margin`

Now that was the very basics of HTML and CSS if you want to learn more I recommend you check out [this guide](https://www.w3schools.com/html/).

**Hosting/Deployment**

Now this is a part that not all of the guides usually show, but now I'm going to show you how you can host a website for free.

First of all create an account on [GitHub](https://github.com/).

When you've done that create a new repository by clicking the `New` button on the top right of the screen.

Now set some details of the repository, I recommend setting it to private:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94z1dclbpjzde47o2io3.png)

When you are done click "Create Repository".

Then install GitHub desktop on [desktop.github.com](https://desktop.github.com/) and set it up. Once you have it set up click the `Set up in Desktop` button on the repository page.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qby0amjyjhkmk5ms84ao.png)

Now GitHub desktop desktop should launch and display that page. Set the destination you want and then click Clone.

Go to that folder in file explorer and then open the folder where all of the files to your website are in a different window. Copy all of the files from the website and paste it into the empty folder which GitHub desktop made.

Then go into GitHub desktop which should look something like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6p65mpke7yz7empptexa.png)
 
Now set the Summary down in the left bottom corner to `Initial Commit` and click commit. Then click the `Publish branch` button. This will send the files to your GitHub repo (repository).

Now if you go to your GitHub repo it should look something like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/86abkgj4o0mcj0rb0hyy.png)

To host this website then go to https://vercel.com/Dashboard and login with github. Click `Add New` and then click `Project`. Now it should look something like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6nwijxk8i08baxlhevl.png)

Click the Import button on your repo to import it. Change the project name to something you want like I'll change it to azes-website. Then click the big `Deploy` button. Just wait for a bit and the website will eventually deploy, it should look something like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ba7j4imcqrggcey3g43.png)

Just click on the image on the page to go to your website and bam that's your website that you just made and deployed to the world wide web! You can access my website example at:

**https://azes-website.vercel.app/**


Thanks for reading this guide, please note that these are just the very basics to get started making websites, it doesn't show much about HTML/CSS just the simple stuff. If you want to do more stuff please check [this guide.](https://www.w3schools.com/html/) but I hope this guide was a starting point atleast.

Bye 👋