Hello, my name is Ruben Gutierrez and I'm a Website Developer and today I'm going to be showing you how to make the most basic website/webpage.
To me, a lot of "how to make a website" tutorials are very confusing with a lot of extra details that take away from getting a basic grasp of website design.
To start off, the first thing you need to understand is that websites are just a group of files that sit inside a folder hosted on a server.
Websites can be made up of many different file types, but to make a basic website all you really need are these three main file types: HTML, CSS, & Javascript. These files provide your website with basic structure, design, and logic. In this guide we'll be focusing on HTML because it is the main type of file you will be using for building websites. HTML is the foundation of the the web.
Requirements: You don't need anything fancy to make a webpage, you can even use your standard text editor but I would not recommend it. What I would suggest is using a tool like Visual Studio Code which provides you with a ton of extra features like code highlighting to make building your website much easier.
The main types of files you'll be using when developing your website are mark up files. Mark up files use a coding language that gives structure to your website content. The most common type of markup language is HTML.
To create a mark up file simply add the .html extension at the end of your file like below.
index.html
I've written some code below for a basic webpage.
I've added annotation to the tags to help you get a better understanding of what each element does. Also notice how every tag has an opening and closing tag, with the closing tag being defined by a forward slash. This indicates separation between each elements on your page.
// Tells the browser what version of HTML you are using
<!DOCTYPE html>
// Defines the root of the HTML document
<html lang="en">
// The head is where you store your document's information - links - rules
<head>
// Support for characters and symbols
<meta charset="UTF-8">
// Scaling, for proper rendering across various devices/screens
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// Your Pages Title
<title>Document</title>
</head>
// The Body Tag is Where you place all the elements you want display
<body>
<h1>Hello, World! I'm Back.</h1>
<p>Your First Website</p>
</body>
</html>
After placing this code inside of your HTML file simply double click on the file itself to preview it in the browser.