Jump directly to main content

Your first webpage

In my opinion learning is done by doing, so where better to start than making your own basic webpage. This assumes you already have a text editor; you can use Notepad, Vim, etc. but if you're learning coding, I recommend Visual Studio Code

Create your html file

First you need to create the file where the code will reside. For this guide (and others) I recommend making a new folder/directory to put your files in. Once you've created the new directory, make a new file inside of it, naming said file index.html (you may need to show filetypes to rename .txt to .html. So check here for MacOS, or Windows).

Basic Boilerplate

There are some default things that each webpage needs to be 'compliant' with the web, so I recommend starting each page in the same way.

Add the following code snippet into your file, and save.

<!DOCTYPE html>
 <html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>

Now if you double click the file it'll open a blank page in your browser (if you've got the .html extension). That's to be expected, as there's no actual content (yet).

Before we do get to the content, let's break down this snippet a little. The aim is to learn, not to blindly copy/paste, right?

Snippet explaination

<!DOCTYPE html> a standalone tag that tells the browser what document type to expect. We're using HTML5, so it's a short and simple declaration.

<html lang="en"> this element is a container for (almost) all the rest of the HTML, as it tells the browser everything inside it needs to be rendered as HTML, and which language the content is.

<head> is a container for metadata (data about data), it gives the browser all the info it needs, to render the page how we want it. Anything between the head tags will not be directly shown on the webpage.

<body> this is a container for the content/body of the webpage. This is where visible elements, and content is applied.

Basic Content

So now we'll add some visible content, to make a real webpage, and not just a blank page.

Between the body tags, we'll add a very simple introduction about ourselves. Change the content between the tags to whatever you want. I'll explain them in a later guide, but for now just play around.

<main><div class="layout-wrapper">
	<h1>Hi, I'm <em>Aney</em></h1>
	<p>Welcome to my site, it's pretty cool!</p>
	<h2>Skills</h2>
	<p>I have an assortment of <em>skills</em>, including:</p>
	<ul>
		<li>Being swag</li>
		<li>Getting the bag</li>
	</ul>
	<h2>Portfolio</h2>
	
	<img src="https://via.placeholder.com/200x200/">
	<img src="https://via.placeholder.com/200x200/">
	<img src="https://via.placeholder.com/200x200/">
</div></main>

Now if you refresh the webpage, tada! We have content.

A little styling

With content on the page we're done, right? However those keen eyed of you may notice it doesn't look very good, so we'll spice that up a with some basic CSS styling.

Between the head tags, we'll add the style tag, allowing us to embed the CSS into the page.

<style>
</style>

The CSS

For the actual styling, add the following snippet between the style tags.

html,body{
	height: 100%;
}
html{
	font-size: 12px;
	background: #EEE;
	background: linear-gradient(0, #DDD 0%, #EEE 35%, #FFF 55%, #EEE 100%);
}
body{
	margin: 0;
	text-align: center;
	font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}
.layout-wrapper{
	margin: 0 auto;
	padding: 4px 12px;
	max-width: 980px;
}
h1{
	font-size: 22px;
	background-color: #10106b;
	color: white;
}
/* The selector below styles em, but only if it's inside a h1 */
h1 em{
	color: #8cecf5;
}
h2{
	font-size: 20px;
	background-color: #020024;
	color: white;
}
p{
	font-size: 14px;
}
ul{
	padding: 0;
	list-style-position: inside;
	list-style-type: square;
}
img{
	border: 2px solid #10106b;
	border-style: dashed;
}
img:hover{
	border-color: ##6f6fa5;
}

Note how we specify the name of the HTML tags in the CSS. They're a direct one-to-one, so adding styling to ul in the CSS, changes the appearance of ul in the HTML.

Customise your site

I've intentionally made the styling "cool" and experimental for those unfamiliar with CSS. That means that there should be some wiggle room for you to figure out, and mess around with it, to find something you like.

If you're unsure about the #10106b, etc. they're colours, take a quick look here.

Page title

You know those titles that show at the top of your browser/in tabs? We're going to add that in.

Between the head tags, and above the style tag add the following.

<title>My website</title>

Reload your webpage and you should spot it. It doesn't show on the page itself, but it will show in your browser tab (hover over it if it doesn't all fit).

It's done!

Your first webpage is official complete. Before you start applying for jobs in the field, I do recommend looking at the rest of my Web Development 101 guide. This will cover the most common elements, more CSS styling, a little Javascript for client-side scripting, and a few additional snippets.