Windows Website - Hello World part 2

We're now at the point where we want to actually save our work and view it in our browser. The steps to do this aren't the hardest by any means but they can be a bit tricky if you're not used to dealing with files or file extensions. I will explain if that doesn't make sense, of course!

We need to save our website code so now as an html file type. For anyone uninitiated, all files have types, and that type is called its extension. Basically that's just the part that comes after the dot. So if I have a file called "greatsong.mp3", this is an mp3 file type because mp3 comes after the period in the file name.

By default, Windows won't show file types for most things. We should change this so that when we are working with our code files it's really obvious what type everything is.

Start by opening the file explorer. It's probably in your taskbar with an icon that looks like this:

On newer versions of Windows there is an item at the top of the file explorer to change the View options.

After clicking on View, you will see another pane appear. You will want to check "File name extensions" in the box on the right. This will make sure when you are looking at files it will always show the file extension.

Now we are ready to head back to Notepad and save our file! Go to the File menu and select Save, or hit Ctrl+S (press S while holding the Control key down) on your keyboard. You will see a window pop up to choose a name of the file and the file type. This part is important! The part you are looking for looks like this.

First select the "Save as type:" dropdown and change it to "All Files (*.*)" For as simple as it is, Notepad has a tendency to make every file you save a text file (.txt) by default. We want to make sure it doesn't do this, since we need an html file! This option selected will make Notepad save it as whatever extension we type into the file name box and is very important. Things won't work right without this part done!

Afterwards you want to give it a file name in the "File name:" box. It can be anything you want, but it has to end with ".html" For my examples I'm going to name it "helloworld.html".

Make sure that Notepad is saving your file somewhere you can easily access later like "Documents" and afterwards make sure to press "Save" to save the file.

Now we just need to make it show in our browser! The process should be the same no matter what browser you are using, but in this example I am using Chrome.

Open a new browser tab and then go back to the File explorer window from earlier. Navigate around till you find your file, for instance if you saved it in Documents make sure you go there. Once you find your html file that you saved, drag it into Chrome. If done correctly you will see something like this!

SUCCESS!

You did this! You made a webpage and are looking at it in your browser! You're over the first big hurdle and are well on your way to making a big fancy site with a ton of interactive stuff that a business or cool project could use!

You should feel proud of yourself. The next section will be adding a bit more fancy stuff to our page that I promise is really important to your programming experience.