Web Class: A Bite-Sized Guide to HTML

Web Class: A Bite-Sized Guide to HTML

You can access the full course here: Bite-Sized HTML

Transcript 1

Prerequisite number one is to install a current web browser.

Prerequisite number two is a proper code editor. The one I’ll be using is a free option called “Atom”. It works on all platforms; Windows, Mac, and Linux.

Another great option is Adobe Brackets, Notepad++, Komodo Edit, and Sublime Text is high popular editor and it has a free evaluation version as well. We need to create a folder for our project, so I’m gonna go to My Documents, and I’ve already created a folder called “learn to code”. Next, I’m gonna open up my newly installed code editor, and go to File, Open Folder, and find this newly created folder.

Our folder is empty for now, so let’s create our first HTML file. File, New File. I’m gonna type in this file, “Hello World”, which is what we wanna see in the browser, and I’m gonna save. I’m gonna call this file “index.html”. HTML files always have the .html extension. If you go back to your folder, you’ll see your newly created file. And if you double-click on it, it should probably show up on a web browser. You can also be more specific, and I’m gonna go to Open With, Google Chrome.

And, as you can see, we have our Hello World up and running. If you’ve followed along and reached this point, you have successfully set up your development environment, and you’re all ready to begin your coding journey. See you in the next lesson.

Transcript 2

In this lesson, you’ll create your very first HTML tags.

The first tag we’ll be learning will be the main heading tag. Tags are a bit like a sandwich, a tag has an opening, and then a lot of tags have a filling as well, and a closing. You begin by opening your tag, and just like a sandwich you always need to close it. For that, you type the same tag as well but you add the forward slash before the name of your tag. And then you save. If we look at Google Chrome and refresh the page, this is now a main heading.

What if I want a secondary heading? I can use the h2 tag and type something like the sky is blue. Save, refresh the page, we’ve got a second heading. The water is cold will be some other text that we’ll be adding. So HTML tags are the way for us to tell the browser to tell the page how we want to display our content.

Transcript 3

What if I wanna show two different paragraphs of text? For example, say I wanna have this in two different lines.

As you’ve probably guessed, it’s gonna show in a single line, even if I add as many enters as I want.

So the way for us to actually create paragraphs is by using the p tag, which is a HTML tag that stands for paragraph, and that allows you to tell the browser, hey, browser, we’re about to start a paragraph here. So, everything that comes after the p is a paragraph.

And when you close the paragraph, you’re basically telling the browser, hey, browser, we’ve finished our paragraph, now just please skip a new line. So, as you can see, that gives us two different paragraphs of text.

Interested in continuing? Check out the full Bite-Sized HTML course, which is part of our Bite-Sized Coding Academy.