The first step is to open yourtext editor. It’s important to use a “raw” text editor, and not a formatted word processor.

Word processors insert characters which make the page look good, but aren’t valid HTML. They’re great tools for making stylish documents, such as academic papers and flyers, but they also insert characters that aren’t valid HTML. Since a web page file must contain valid HTML, a text editor is a better tool than a word processor for building web pages.

Now that your text editor is open, you can begin writing your HTML. As you learned in the first lesson of the HTML & CSS course, there are a few things that are always present in a well-formatted HTML file. Here’s all of them together again:

<!DOCTYPE html><html>  <head>    <title>My First Web Page!</title>  </head>  <body>    <h1>Hello World!</h1>  </body></html>
Copy to clipboard

<!DOCTYPE html><html>  <head>    <title>My First Web Page!</title>  </head>  <body>    <h1>Hello World!</h1>  </body></html>

You can use this exact skeleton if you like. Just copy and paste it into your text editor. Make sure you include everything!

Your web page is now ready, but currently it only exists inside of your text editor. The next step is to save the file to your computer. If you closed the text editor now without saving, your new web page would be lost! There are a few important things to keep in mind when you save it the file:

• Use the.htmlHTML file extension, i.e.about_me.html
• Don’t use any spaces or special characters in the file name. Use underscores (_) or dashes (-) instead.
• Decide where in your computer you will save the file, and make sure to remember the location!

Afile extensionis the suffix of a file name, and describes the type of the file. The file extension is always the last 3 or 4 characters in a filename, preceded by a period. For example, the HTML file extension is.html, and it tells the browser (and other applications) to interpret the contents of the file as a web page. Note that on older web pages you may see.htm, but this archaic and no longer used.

When choosing a file name, keep it simple. Stick to numbers and letters. Use underscores (_) or dashes (-) instead of spaces. Leave out percent signs, slashes, question marks, exclamation points, commas, and other “special characters”. The browser needs to locate the file based on its name, and special characters within the file name can interrupt that process. File names should be kept simple and should follow conventions in order to make navigating to your web page more reliable.

After choosing a file name, select an appropriate location in your file system to save your web page. It’s good practice to create a new folder to house this web page. If you do create a new folder, use the same naming conventions outlined above in order to minimize future headaches. Themost important thingwhen selecting the location to save to is toremember where you saved it. If you saved it already but you don’t remember where, just clickFile > Save As..., choose a new location to save, and be sure to remember this time.

Now you’re ready to view your new page in your browser! First, open up your browser. In the top menu, clickFile > Open File. Navigate to the location you saved your web page. Click on your web page file and then clickOpen. You should see your web page!

In this short time you learned how to take what you’re learning on Codecademy and use it on your own personal computer. You also learned about file extensions, text editors, and saving and viewing local files. Now you are prepared to test out anything you learn in Codecademy for yourself, and practice on your own!

'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.'