Welcome to lesson number #2 of your HTML basics course.
You can access all the lessons by clicking the links below:
- What is HTML?
- Adding Structure To a Webpage With HTML
- How To Add Text To a Webpage
- How To Add an Image To a Webpage With HTML
- How To Link Webpages Together
- How To Create a List With HTML
After you are done with lesson: 1 let’s move onto lesson 2!
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.
For more FREE web developing tutorials and videos check out my YouTube Channel.
The following video is a complete beginners guide to HTML and web development. If you have never written a single line of code in your life then this short video course is perfect for you.
You can watch the entire course as one video or you can watch each section as its own separate video.
Full Video Course:
Introductory To The Course
What is HTML?
In the first video we will talk about HTML so that you can understand web development a little bit better.
How to Create The Basic Structure of a Webpage
In this video we will cover how to build the basic structure of a webpage as well as the basic syntax of an HTML document.
How to Add Text to a Webpage
Now you will learn how to add text to a webpage.
How to Create a Link With HTML
Now let’s create a simple link.
How To Create a List in HTML
Lists can be helpful as they allow use to organize information on a webpage. In this video you will learn how to create a simple list.
Your Final Project For This Course
Finally let’s go over your final project for this course.
The following video is a review of the book entitled HTML and CSS – Design and Build websites. This is a very well written book by Jon Duckett. If you are interested in purchasing the book you can do so by grabbing it off Amazon by clicking here.
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?
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!
The following in my own personal review of the ever so popular Complete Web Developing Course 2.0 by Rob Percival. In this video I will give you a sneak peek of what to expect and why I recommend you grab this course if you are a beginner who is just starting to learn web development.
You can grab the course off Udemy by clicking here.
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.
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.
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.
We see here that now that file is different and we can delete our earlier Notepad file we had before.
This will help you a lot as your web sites get larger and more complex.