How to View Web Pages on Your Computer

In this course, all the code we write will be run within a web browser of your choice. Luckily, you al­ready have one in­stalled! Or else you wouldn't have been able to read this.

What Web Browser to Use

The big web browsers out there are Google Chrome, Microsoft Edge, and Apple's Safari. There's also some more fringe browsers which have been gain­ing in pop­u­lar­ity, like Opera GX. There are very sub­tle dif­fer­ences in terms of how code is run on each of these. It used to be a far big­ger is­sue for de­vel­op­ers to nav­i­gate these dif­fer­ences, but a lot of fea­tures are shared across ma­jor browsers nowa­days. We'll be us­ing Google Chrome in var­i­ous screen­shots in this course, but truly it doesn't mat­ter much which browser you choose.

We'd give in­stal­la­tion in­struc­tions for a web browser of your choice, but the fact that you're read­ing this on our site means you al­ready have that taken care of!

Understanding Web Browsers

Web browsers are sim­ply ap­pli­ca­tions that al­low users to see out­put from cer­tain file-types. Web browsers in­ter­pret the con­tent of cer­tain types of files, and dis­plays them in dif­fer­ent ways. We'll get into how web browsers man­age to do this later.

For now, though, the im­por­tant thing to know is that these files gen­er­ally are HTML, CSS, and JavaScript files. Web browsers use a host of other file types, but these are the core ones that get pre­sented to users.

This is use­ful for us as de­vel­op­ers, but it gives us an easy way to see what our soft­ware is do­ing. All we have to do is write to these types of files, files that ex­ist just on your com­puter, and then view them in a web browser. This will sim­u­late how web­sites serve out con­tent to users, and is a great way for us to see what's go­ing on with web­sites un­der the hood.

Viewing our first HTML files

Let's put our web browser to work. If you fol­low the fol­low­ing steps, you'll be able to see an HTML file show up in your web browser.

• Open your Text Editor of choice from the previous lesson
• Create a new file. In this example, we're showing an empty folder in VS Code.
• Name the new file example.html. Note the .html file extension. This is how your browser will know that this is an html file

Once you have this new file open in your Text Editor, we can add the fol­low­ing con­tent to it:

Hello World!

iNoteHello World! is a very famous line to put in code when you're trying things for the first time! You will see it a lot in our courses, and is even a phrase used by professionals when trying to build basic software for the first time.

Depending on your Text Editor, there's dif­fer­ent ways to view this file in the browser. Possibly the sim­plest way is to nav­i­gate to where that file was cre­ated on your file sys­tem, right-click­ing, and choos­ing to Open With your Web Browser of Choice

You should be able to see your Hello World! mes­sage in your Web Browser!

iNoteIf you're not seeing your file anywhere, there's a chance that your folder that you made in your Text Editor is creating files in an odd location. Developing is all about problem solving, so explore your Text Editor's documentation to see where those files might ending up. If you still can't figure it out, feel free to repeat all the above steps with Notepad instead.

You're all set up!

Congratulations on com­plet­ing your set up of your de­vel­op­ment en­vi­ron­ment. In the next chap­ter, we'll start writ­ing code that will be the build­ing blocks for any web­site you want to cre­ate!