Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
If you've done any web design in the past, you may find the next minute or two to be a bit of a do-over, but feel free to tag along. So this first file I've called container.html. It doesn't matter what the first part of the name is, but we're using the .html file extension just so when we double- click it, it will open up in the default web browser, whether that's Firefox, Safari, Internet Explorer, or anything else. As I can see here, it's a very simple HTML page indeed. I also have a file in this folder called script.js.
However, we're good here and I'm going to open up this HTML file first in a text editor to view the HTML. So instead of double-clicking on it, which would open up in the browser, I'm on a Mac, so I'm going to right-click or Ctrl+Click and choose to open it with TextEdit. On a Windows PC, I would right-click and Open With > Notepad. Of course, if you have a favorite text editor or a web design application, feel free to use that. The only reason I'm doing it this way is just to show that we don't actually need any special software at all to do this.
Now, I want to see the behind-the- scenes view of our simple webpage file, which means I actually expect to see multiple lines and lots of angle brackets here. The reason I'm still seeing something that looks like the web browser itself is because TextEdit on the Mac has a preference to open in rich text or in HTML edit mode. So I'm going to go into the preferences of that and turn that off. I just want plain text. That's all I want to see. So jumping into preferences, I'm going to first say I want all my documents to open in plain text, and just to make things a bit more readable, I'm going to say that I want my plain text font to be Monaco, let's say 14 points, close that, and then also on the second section, I'm going to check the box to say Ignore rich text commands in HTML files. Close that.
I need to close that file and just reopen it again in TextEdit and this is what I want to see. The behind-the-scenes view of this webpage file. Now, if you're brand-new to all of this, you might wonder if you're looking at a programming language here. Well, no, this is a very different kind of code. HTML is not a programming language. It's a markup language. In fact, that's what it stands for. Hypertext Markup Language. Now, that might sound like nitpicky hairsplitting from me, but there is a really big difference.
Now, because we're just using just the name of the file, it will need to be inside the same folder that our HTML page is in, but that's what I have. So we're good. I can close down this HTML page. I don't need to do anything with it. I'm actually going to close it down in the browser too. script.js is the file I am interested in. I'm going to open that up in the TextEdit editor and I'm going to add one statement, the classic first program in any programming language.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101631 Viewers
61 Video lessons · 88386 Viewers
71 Video lessons · 72224 Viewers
56 Video lessons · 103973 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.