Build your first website in < 4 mins! - Introduction to Web Development #1

Reading Time: 4 minutes

Welcome to the Code Student introduction to web development series. The series where you’ll learn everything you need to know to get started in the busy world of web development and build your first websites without any prior knowledge in the field.

Watch this tutorial on Youtube:

In the first part of this series, you will learn what it takes to build your very first website in just under 5 minutes. In the following parts, we will further explain the basics of HTML, CSS, and JavaScript and give you an overview about how the web works, what actually happens when you go to a website like our blog codestudent.net and how backend web development works. It’s important to note that you do NOT need to know ANYTHING about web development or programming, in general, to follow this series as we’ll explain everything you need to know step by step, so you won’t get lost in the large confusing coding jungle, many beginners tend to get themselves into.

That was enough talking, for now, so let’s get started with our first website!

HTML – The foundation of your document

HTML - Hypertext Markup Language - Build your first website!
HTML – Hypertext Markup Language

Websites are written using HTML, which stands for HyperText Markup Language. This means that in its core, every website on the internet is just a hypertext document, written in HTML. It’s also important to note, that HTML is NOT a programming language. It is a markup language like its name suggests.

To build our first site, we, therefore, have to write an HTML file, which can be displayed by our browser. In the following parts of this series, we’ll dive further into the coding and use a professional code editor, but for this part, we just need our standard text editor. It doesn’t matter on which operating system you’re on, just use your default text editor and create a new file named index.html.

first website - text file
a new text file on windows

Creating your index file

It’s important to give it the .html file extension, or else your browser may not be able to display it correctly. The reason why we want to call our file ‘index’ is that browsers will always look for the index.html file first when you go to a new website as this naming convention has established itself over the years.

Inside our new file, the first thing we have to do is declare the document type at the top of the file. This isn’t necessary anymore for most modern browsers, but it’s good practice to include it.

<!DOCTYPE html>

Structure of an HTML document

An HTML file consists of two parts, the head and the body, which both need to wrapped inside HTML tags. HTML uses ‘tags’ which consist of an opening and closing tag to mark different elements in the document.

<html>
    <head></head>
    <body></body>
</html>

Head

Inside the head, we can declare important metadata, include other files and do things like setting a title for our webpage. To do this, write an opening and a closing ‘title’ tag and the actual title between those.

<head>
    <title>My first page!</title>
</head>

The title is what you most likely will see at the top of a tab inside your browser.

First website - HTML title tag
The title of your document

Body

Inside the body goes all of the actual content of our website. To structure the site and give it a semantical functionality, we can use a variety of different tags. For example, we can use the ‘h1’ tag to declare a large heading and the ‘p’ tag for a paragraph. As we don’t want to make this too complicated, we won’t use any other tags in this introductory part of the series.

<body>
    <h1>Hello, World!</h1>
    <p>This is my first paragraph on my first website!</p>
</body>

All of the code

Take a look at our finished index.html file:

<!DOCTYPE html>

<html>
	<head>
		<title>My first page!</title>	
	</head>
	<body>
		<h1>Hello, World!</h1>
		<p>This is my first paragraph on my first website!</p>
	</body>
</html>

Your first website is done!

That should be enough for our first website. Save your file as index.html and close it.

First website - saving your file
Don’t forget to change the file type to ‘any’

To actually see what we did here, right-click on your index.html file and open it using your favorite browser. As you can see, we just build our first website in no time!

First website - open file with browser
Open the index.html file with your browser

Thanks for joining us today! We’re excited to see you again in the next part of our Introduction to Web Development series, where we’ll dive deeper into the topic.

If you have any questions, just ask in the comments, on Instagram or Twitter or simply send us an email.

5 comments

  1. Hello there! Quick question that’s totally off topic.
    Do you know how to make your site mobile friendly?
    My web site looks weird when viewing from my iphone 4.
    I’m trying to find a template or plugin that might be able to
    correct this issue. If you have any recommendations,
    please share. Thanks!

    1. Hey, I‘m assuming you’re using WordPress. You have to try out a few templates until you find a good one. Maybe a premium theme? The other possibility could be customizing the theme on your own by adding media queries to the CSS.

  2. Hello there! I know this is kind of off topic but I was wondering if you knew where I could locate a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having trouble finding one?
    Thanks a lot!

Leave a Reply

Your email address will not be published. Required fields are marked *