How to Create a Website
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
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
projectsbut you may call it whatever you like.
projectsdirectory, 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
Open your text editor (Atom or Sublime Text) and add the
hello_htmlfolder. In Atom, you may do this by clicking File > Add Project Folder, then navigating to your
hello_htmldirectory, and click
hello_htmland 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
In index.html type html, then press the
tabkey. If that does not work, copy and paste the above boilerplate code into your file.
Inside of the title tag, name your website “Hello, HTML!”
Inside of the body tag, use an
<h1>tag to give your website a heading.
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:
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:
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:
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
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.htmlfile 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!