Hello everybody, welcome to the course. You can watch the video version of this lesson below:

In this video, you’ll going to learn the basics of HTML. Were gonna get started off by creating a new folder on your computer to organize the files for this course.

So, go ahead and do that right now.

I’m going to create a new text document. This is going to be our web page.

Open up your newly created text document and go to file and save it as index.html.

Notice how now we have an html file here that we can open up with our web browser. We can go ahead and delete our old notepad file since we don’t need it anymore and if we open up this file, we can see we have a blank webpage.

This is because we haven’t actually written any html yet.

The next thing we have to do is we have to get our html or coding editor so that we can use it to write html on our webpage.

I’m gonna go ahead and go to Google.com and I want you to type in “Notepad ++” and you will want to click on the first result here or you can go to this URL here, which is the homepage.

After the file is downloaded, give it a click and start the installation process. Select your language here, go through the agreements and everything, and pick where you want it to be installed.

I’m just gonna leave all this stuff as default since I don’t really know what any of it does. Again, just kind of skip through all this stuff, don’t worry about any of it and it will start installing.

Now, I have an earlier version of Notepad ++ so I’m just gonna ignore these little things that pop up and I think that’s what’s causing that but again, you can just kind of ignore them and Notepad ++ will just install normally and now we can hit “run” and now we have Notepad ++.

What we want to do is we’re gonna go back to our HTML document, I’m going to right click it and go edit with Notepad ++.

Now, we have our document opened up in Notepad ++ and we can begin to write some html.

I’m just gonna write some basic html elements here and just kind of show you how we can start to build a website.

The first thing I’m going to create is called a tag, this is an html tag and this is the start of the tag and we also have to make a closing tag.

I’ll write the closing tag here.

You’ll notice that there’s a forward slash here at the closing tag. You’ll also notice that it changes color in our coding editor.

What this means is all of our html content on this page has to be within this html tag. Pretty simple to understand. Right?

If we click on the tag, Notepad ++ will highlight the closing section as well.

We have our h1 tag, it’s closed off and inside of it we have some text and this text is going to be given the style of an h1 element.

When I save our file and preview it, you’ll see exactly what I mean.

So, we can see our text here is now a headline on our webpage.

Pretty simple, right?

And if we go back into our document and if we change this text here to something a little bit different and we save our file, and then refresh our page by hitting F5, we will see that our text will change to whatever we wrote again.

This is basically how we add html elements to an html document.

It’s pretty simple, it’s not super complicated.

Let’s go ahead and look at a website online that is using html elements. Amazon.com is predominantly made up of html elements. Now, there is some CSS JavaScript and different styling going on here but predominantly this website, on the back end is created with html.

Again, if we go into my blog, we can see here that html is predominantly creating this website. We have some text, we have some content and again, it is styled with CSS to make it look different, but this is predominantly html that is building this website at its structure.

What you’re going to learn how to do is build the structure of a webpage in this course.

Remember, html is the structure of a webpage, CSS is what styles the website and there’s also a third option called JavaScript, which adds interactivity to a webpage.

If I go to my courses page here, if I hover my mouse over one of these images, you’ll see that it moves.

Before we can do any of that, you have to have a firm and strong understanding of working with html.

Really, that’s what creates the backbone and the structure of a webpage. Now that you know what html is, it’s time to start looking at the structure of an html document in further detail which you will learn in the next lesson.

This lesson is part of my Introductory to HTML and CSS course on Udemy. If you are interested in purchasing the full course, you can do so by clicking here.

It’s now time to talk about the very basics of HTML and the syntax of HTML.

What I have here is a sample HTML document.

At the very top here, we have what is called a DOCTYPE.

This DOCTYPE element basically tells the browser that we are working within an HTML document and every document needs to have this at the very top. Make sure you do not put a space before this command and keep it at the top there of every HTML document you create.

Next, we have an html tag, and this is the start of the tag, and you’ll notice that we have these little arrows and then at the bottom we have a little slash that signifies the closing of the tag.

All these tags are nested within the html tag.

I’m going to indent them a little bit so we can read it, but we can see here that when I click on the html tags, it selects the closing tag at the bottom and everything in between is going to be inside that tag.

Next, we have the head tag and we can see that the head tag is nested inside the html tag, but also we have a title tag that is nested inside the head tag.

This title tag is actually going to change the title of our document and you’ll see this if you open up a tab or if you launch a website.

I’m going to save here and then open up this webpage.

You’ll see here at the very top, where the tabs are, you’ll see that the text that you write there will show there. When I change it to About Me, it changed this tab up here to About Me.

This is also where search engines will also display the title of your webpage as well when you’re looking up searches in Google Search or something similar. Give a little indent, makes it a little bit more easier to read.

Next up, we have our body tag and then inside our body tag we have an h1 and a paragraph element. I’m going to select these, hit tab to give them an indent so we know that they’re inside our body tag and the body is going to be the whole webpage of our website.

If I open up a webpage here, the body element is going to be everything we can see here on my webpage, from the very top here all the way to the bottom.

This is all the content within our body tag. Everything in here is actually nested within the body tag. It’s the visual aspect of a webpage and if we open up our web document here, we can see that all the white background is our body element as well.

Going back to our HTML document, we have our h1, which is a level one headline, which basicall is a very large piece of text. We have some text inside our h1 element, and then below that we have a paragraph tag and some text within our paragraph tag.

We can change the text within our paragraph element and our h1 element.

I’m going to go ahead and do that right now. I’m going to change the text we have here and I’m going to put something along the lines of About Me.

If we save our document and then refresh our page, we can see here that there is an about me title and it changed accordingly.

The h1 is basically the title of your webpage, think something like your website’s name or the main focus on your webpage.

We can also create different levels of headline elements. I’m going to go ahead and create an h2, which is slightly different than an h1, and you can kind of guess what this might do.

The h2 element creates a second level headline that is slightly smaller or has less emphasis than the h1.

I’m going to write that out, save it, refresh the page.

You can see our text is now given that h2 level element. Pretty simple. Now, what I’m going to do is I’m going to add some more elements to my page that are basically structural elements.

They’re going to kind of help you organize your content on your webpage. I’m going to kind of talk about them and discuss them as we add them to our website.

The first thing I’m going to add is what’s called a header. A header is nested inside the body tag and it’s basically the content at the top of a website.

I’m going to showcase that in just a second here. If you bring up my blog, we can see here that the very top in this kind of green background, this is what’s normally referred to as the header. It has the main information of the website, maybe like a name or logo, and has something what’s called a navigation.

A Navigation kind of helps direct the user towards important pages on the website. You can see here on mine, I have an About page, I have a Blog page, I have a Books, a Courses page and all kinds of different things here, but the header basically stores important information on a website.

All right. The next thing I’m going to talk about is what’s called a footer.

The footer is basically the opposite of a header. It’s the section of our website, but it’s kind of at the bottom of our website.

Again, if I open up my blog here as an example, we scroll to the very bottom. All this content right here is what’s commonly referred to as the footer. And again, it’s the same thing as the header, but it’s a section where we can display links and a navigation with less emphasis than what we would like to have for our header.

It’s generally found at the bottom of a website. This is pretty much what your standard HTML document is going to kind of look like.

There’s a few other different elements you can add and you’ll kind of see them here and there, but these are the main ones that you need to focus on.

Most HTML documents will contain an html tag, a head tag, a body tag, a header section, and a footer and that’s pretty much it. If you can understand this, then you’re well on your way to understanding the syntax and structure of HTML.

Video Transcript

Hi guys, how’s it going? In this video I’m going to address two common questions that I get; the two questions that I’m going to focus on are beginning related questions. I get this asked a lot from people who are just starting out learning how to program or design websites, and that is what is the best place to start learning how to code? How do you get started with HTML or the different programming languages that there is out there?

I know it can be really confusing because there is a lot to learn. There’s HTML, there’s CSS, there’s JavaScript, there’s WordPress; the list just goes on forever. My recommendation for most people is to start off with HTML. Get a good grasp of HTML and then you can move on to something like CSS.

My main piece of advice is to just take it one day at a time, because a lot of stuff you learn in programming, stuff like that; it’s not stuff that kind of just settles in and clicks in right away. It takes some time to learn and you just take it day by day. I’m actually going to give a recommendation of a great resource to get started with learning how to program websites and design websites.

The first recommendation I’m going to give you is to go on the internet, look up free tutorials, look up courses; even look for paid ones, I have paid ones myself. Just look at some very beginner ones. If you rate straight from a beginner, you know nothing, like I said focus on HTML, CSS and just go through the courses, do some practical assessments, try to build some websites yourself.

Try to build up your portfolio and just take it day by day. It really does just take practice and time, then eventually over time you’ll kind of get those aha moments and things will start to click in place. At least that’s what happened with me when I first started learning. It took me a while before things started to click in my head.

My other recommendation I’m going to give you guys is; I have a book here, it’s called “HTML & CSS: Design and Build Websites.” I believe the author is John Duckett. I got this on Amazon and I got a link for it, you can take a peek at it if you want. I think I grabbed it for about $20 give or take. It’s a book about HTML and CSS and it’s a great reference for anybody getting started.

I’m going to take a quick peek here and show you what this book has to offer. As you can see the pages are really well done, the graphics are really well written. There’s a lot of text, a lot of information and reference. It shows you all the different commands in HTML, CSS, how to build layouts, responsive web design. It even has a section on CSS3 and HTML5.

There’s a lot of design theories and different things like working with images and stuff. It’s a great book, and it’s a great reference, and I highly recommend it for anybody who is just starting out with HTML or CSS.

I think together you can grab both the books for roughly about $50. They’re a great reference and I highly recommend them for everybody who’s just starting off. Again, just go online, look up tutorials and YouTube videos and stuff like that. Eventually things will just click into place. Again, check the book out, there’s a link for it in the description.

Hope you guys liked this video, hope it helped you out. You know what, just stick with it and eventually you’ll get to understand it. Before you know it, you’ll be developing websites and programming online.

Is This Book Right For You?

If you are interested in picking up this book are not quite sure whether or not its right for you then here is what I have to say about it. HTML and CSS – Design and Build Websites is geared towards those who are beginners or still need a good reference on how to build websites from scratch.

If you are still in the phase where you need a guide or are constantly looking how tutorials and guides or just can’t seem to stick it all together then this book is what I recommend. The pictures are great and the quality is very good. The book itself is a little on the expensive side but honestly for what you get its actually pretty under priced in my opinion.

Although this was only a short review I hope you enjoyed it. If you have any comments to share about the book then please do so in the comments section below!

On the following page you will find everything you need to know in order to create your very first website with HTML and CSS. This course has been designed for complete beginners. If you are new to web development, HTML and CSS this is a great place to start.

You can watch the course all at once or you can watch it in digestible chunks in the set of videos below.

Enjoy!

Full Course:

Separate Videos

The following videos are taken from the same course but broken up into smaller chunks if you prefer to learn at a slower pace. You can also use this section to refer to certain parts of the course that you want to re-watch or use as reference in the future.

Introductory To The Course:

A basic introductory to the course and what type of website you will be learning to build.

How to Create Your Very First Webpage With HTML

You will learn how to create your very first webpage and a few basics HTML elements.

How To Choose a Basic Coding Editor To Work With

There are a lot of coding editors on the internet to choose from. In this video I will show you what coding editor I use for free.

What Is HTML?

Learn what HTML stands for and how it is used to build websites.

Our Basic Wireframe For Our Website

In this video we will go over the final version of our website and talk about why it is important to have a basic idea of what your final website will look like before you begin to actually design and write the code for it.

Adding Basic Structure To an HTML Document

It is important to understand the basic syntax of an HTML document. In this video you will learn how to basic structure to an HTML document.

How To Create Our Websites Header and Footer

Let’s now create the very basic structure of our websites header and footer.

How To Create Our Websites Navigation Menu

A navigation menu is very important for a website. Let’s create the basic structure of the navigation menu we will be using for our website.

Creating Our Websites Portfolio Page

The portfolio page is going to be our websites main page. Let’s start creating the basic structure of our portfolio page.

How To Add an Image To a Webpage

Our portfolio page will be featuring a lot of different images. In this video you will learn how to add an image to a webpage with HTML.

Creating Our Websites Basic Footer

Let’s expand a little bit more into our websites footer and add some more content and structure.

Introductory To Cascading Style Sheets (CSS)

Cascading Style Sheets are used to style and change the way a website looks. In this video you will be introduced to CSS and how we can use it to make our website look pretty.

The Difference Between Internal and External CSS

External and Internal CSS both have their uses in web development. Let’s go over when it is appropriate to use them.

Working With CSS ID Selectors

CSS ID selectors allows us to have greater control over how we can style elements on a webpage. Let’s add an ID to an HTML element and style it accordingly.

How To Build a Website Wrapper

A wrapper can be used to help our website become more mobile responsive especially when viewed on devices with smaller resolutions.

Introductory to Responsive Web Design

Responsive web design is all about making sure web pages and websites are usable on all mobile and desktop devices. In this lesson you will get a basic introduction to responsive web development.

Adding Basic Colors To Our Website With CSS

CSS can be used to add basic color to our website to really change the way the elements on a webpage can look. In this video you will learn how to style basic text on a webpage.

In this short tutorial I am going to show you how to link a JavaScript file to an HTML document.

Hey everyone, here’s a quick tutorial that will show you how to link a JavaScript file to an HTML document.

Enjoy!

Video Transcript:

It’s very common to keep all of your JavaScript files separate from your HTML files.

This helps you organize everything, especially once your files start to get really big. Make sure that when you build your JavaScript file, you don’t put your HTML, CSS, or anything else in there.

Just use JavaScript for now.

We can see here in this document I inserted some JavaScript at the top here. We have a document.write command.

If we save this page and open it, we can see that our JavaScript will be opened up at the very top of our page here on our web page content.

Now, what we’re going to do in this lesson, is we’re going to take this JavaScript code and transfer it into a separate file and then import that file into an HTML document.

The first thing I’m going to do here is I’m going to create the JavaScript code we had before.

I’m going to create a new file and call it JS. We’re then going to open up that Notepad file and we’re going to file save as JS.JS.

It is important that you have that JavaScript file extension for this file in order for our computer to know it is indeed a JavaScript file.

We see here that now that file is different and we can delete our earlier Notepad file we had before.

We are now going to open up and edit our new JavaScript file in our Notepad++ or whatever code editor you have. We’re then going to take our command here, we’re going to copy/paste it, and we’re going paste it into our new JavaScript file. We’re going to delete what we have here in our script tags as well.

The next step, we’re going to add some new tags. We’re going to add a head tag here. And basically, the head tags, you don’t need to worry about now, we’ll explain it later. But just for now, in the head tags, we’re actually going to import our JavaScript.

So let’s look at this command a little bit deeper. Now with this command, in the quotations, what we do is write the file path to our external JavaScript file. You remember I named our file js.js. So, as long as our file here is in the same folder as our html document, all we have to do is put the name of a file plus the extension, which in our case is .js. Before you preview this, make sure that you save your html document as well as your external JavaScript file.

We can see here that our JavaScript code is now displaying correctly in our external sheet.

One thing that I’m going to point out really quickly is that the placement that we have our JavaScript on our webpage can dramatically affect performance and the load ability of our webpage.

Generally speaking, you want to put your JavaScript at the bottom of your webpage if possible, so I’m going to add some footer tags here.

And I’m going to place my JavaScript source file in there as well.

So, now what happens here is that the webpage content will load first, and then our JavaScript file will load right after. You can see here that now our JavaScript code is placed at the end of the document instead of appearing at the top. If at all possible, you always want to place it at the end.

So to sum things up for this lecture, try to keep your JavaScript in an external file that is separate from your HTML and CSS.

This will help you a lot as your web sites get larger and more complex.

Try linking your own external JavaScript file for practice and see if you can get it working correctly.