How to Create a Website

In this article, you will learn how to create your own web page and the difference between local and remote URLs.

Introduction

When building a website, whether professionally or as a hobby, there are some easy steps to make sure that you start correctly. You will need a text editor installed on your computer. If you don’t have one, click here to read an article on how to install one. By the end of this article, you will be able to make a website on your computer as easily as you can on Codecademy!

Follow along with this video:

1. CREATING A NEW HTML PROJECT

First, you must set up the correct file structure for your project. As your projects grow to include different types of files (such as CSS), it will be very important for your directory to be formatted in the way detailed below so that web browsers can correctly locate, interpret, and render your files.

Exercise I: Set up your directory

  1. If you do not already have one, set up a directory (also called a folder) on your computer where you will store all of your programming projects. Here at Codecademy, we recommend naming this directory projects but you may call it whatever you like.

  2. Inside the projects directory, make a new folder called “hello_html.” Note that it is important to exclude spaces in your directory names, so we are using an underscore here.

Exercise II: Open your project folder

  1. Open your text editor (Atom or Sublime Text) and add the hello_html folder. In Atom, you may do this by clicking File > Add Project Folder, then navigating to your hello_html directory, and click open.

  2. Right click hello_html and select New File to make a new file. Save that file as index.html.

Note: Whenever you make a website, it’s a best practice to name the homepage “index” so that the browser knows to interpret this page as a homepage. Also, other developers who open your project can easily navigate to the home page.

2. Adding a HTML Boilerplate

When you are creating a new web page, it’s always helpful to start with HTML boilerplate code. You can do this two different ways. If you type html then hit the tab key, your text editor will likely fill in the important information for you. Atom may add <meta charset="utf-8">. Feel free to leave it or delete it. If the tab key doesn’t work, you can manually add the following code: 

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    
  </body>
</html>

Exercise III: HTML Boilerplate

  1. In index.html type html, then press the tab key. If that does not work, copy and paste the above boilerplate code into your file.

  2. Inside of the title tag, name your website “Hello, HTML!”

  3. Inside of the body tag, use an <h1> tag to give your website a heading.

  4. Save your file!

3. ALL ABOUT URLS

When you visit a website in your browser, you might navigate directly to the page you wish to see, such as https://www.codecademy.com/learn/learn-html-css. This is called a Uniform Resource Locator, or a URL. A URL tells a browser where to locate a resource (or file). The URL above tells the browser to request the learn-html-css resource from inside of the learn directory from codecademy.com.

A browser is simply a piece of software that can interpret and render HTML files (just like you might use a media player to listen to music or Microsoft Word to view a .docx file).

A URL is the same as a file path or the path to find a file on your computer. By default, most text editors display the file tree on the left side of the application. If your file tree is not visible in Atom, go to View > Toggle Tree View. Your file tree should look something like this:

File tree

At the top of the tree, there is a directory called projects and inside of projects there is hello_html which contains index.html. If your “projects” folder is inside of the Documents folder on a Mac, your file path should look something like:

/Users/YourName/Documents/projects/hello_html/index.html

This path guides your browser from your root directory, then to your YourName folder, then inside of Documents, then projects, then hello_html, then index.html. The / symbol indicates different folders.

4. Local VS. Remote

Files that are saved on your computer are called local URLs:

/Users/YourName/Documents/projects/hello_html/index.html

The file path refers to a file located on your local computer — this is considered a local file path.

There is a major difference between your local file path and https://www.codecademy.com/learn/learn-html-css, a remote path. Codecademy.com is not a directory on your computer - it is on Codecademy’s computer (or server). To view a file in Codecademy.com’s directory, your computer makes a request to Codecademy. If Codecademy allows the request, then it sends a file, like learn-html-css.html, and your browser displays it.

5. HyperText Transfer Protocol

When you type the address of a website into your browser, the browser requests the website from its owner and renders it for you. The prefix http stands for HyperText Transfer Protocol, which refers to the protocol by which the HTML file from another server is transferred to your computer. In modern browsers, you don’t usually need to type http because the browser includes it for you.

6. NAVIGATING TO A LOCAL URL

When you’re working on your website locally, it is a good practice to open it in your browser and see what it looks like as you make changes. There are several ways that you can do this.

  • You can drag and drop your file from your file manager into Chrome.

  • In the toolbar in Chrome you can click File > Open File and then navigate to index.html.

  • You can type the path we found in section 2, beginning with file://. For example, you might type file:///Users/YourName/Documents/projects/hello_html/index.html.

  • In Atom, you can find your path by selecting the file in the file tree, right-clicking, and selecting “Copy Full Path.” Paste it into the Chrome.

Exercise IV: Previewing your HTML document in Chrome

  • Navigate to your index.html file and open it in your web browser. The browser tab should say “Hello, HTML!” and your header should be displayed in your browser window.

Exercise V: Make a change

  • Currently, your website only has a single <h1> element. Add a paragraph of text to your HTML file in your text editor. Save your changes, then refresh the browser page in Chrome to see your changes.

Congratulations! You’ve set up the file tree for your first project, added the boilerplate code for the homepage of your website, and found and navigated to a local URL. Add some more content to your page using HTML tags and refresh the page to see your changes!

Author

Codecademy Team

'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'

Meet the full team

Related articles

Learn more on Codecademy