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. 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:
<!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 bodyor 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:
<title>Document</title>
Then just to have something to display on the website, lets add text to the website like this:
<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:
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):
<link rel="stylesheet" href="style.css">
The HTML file should look something like this now:
<!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:
body {
}
To change the background colour of the website/body we'll have to do this:
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:
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)
Now lets say we want to change the colour of the h1 to a gradient and change the size of it:
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:
-
pxwhich is pixels -
inwhich is inches -
vwwhich is the width (relative to the website width) -
vhwhich is the height (relative to the website height)
Now the full CSS file should look something like this:
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:
(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):
<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:
<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:
.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:
.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:
.titlebar a {
}
To modify the colour, size and decoration we can do this:
.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:
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:
.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:
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:
<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:
<!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:
<!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:
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:
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:
<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:
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:
img {
width: 100px;
}
and the website something like this:
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:
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:
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-topmargin-bottommargin-leftmargin-rightmargin
Now that was the very basics of HTML and CSS if you want to learn more I recommend you check out this guide.
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.
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:
When you are done click "Create Repository".
Then install GitHub desktop on desktop.github.com and set it up. Once you have it set up click the Set up in Desktop button on the repository page.
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:
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:
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:
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:
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. but I hope this guide was a starting point atleast.
Bye š
Top comments (0)