HTML CSS Tutorial for beginners - Building a web page

Learn HTML, CSS and JS in this one course:
http://bizanosa.com/sp/learn-html-css-javascript/

In this one course you will learn the following:

HTML
CSS
Introduction to Programming
Javascript

.
.


Hi and welcome. I want to update this course and the way i want to update it is by creating a simple web page that will utilize some CSS. Okay. So, if you've been watching this HTML course, you watch the entire thing, you'll realize I didn’t do much on CSS and that is why i want to create a simple web page that will enable you to learn something about CSS. So, if you look over here, you'll see that I have this code and of course you’ll receive all these files so if you go to the same-to the same location in which the other one was uploaded you will find this file and you will be able to download it and use it to follow along with me.Now this is just a simple page that has the HTML that we are going to start with. So, of course, you know all about this HTML header. Then, I’ve also added this. Then there’s this. Then there is this matter. This is the one that enables responsiveness. If you want to write- if you want to use media queries you need to add this on your web page. Media queries are a way to make your web page responsive. Then there we have the title, and then we have the link to the style dot CSS. I haven’t created this yet, I will create this. And then we have a link to a favicon. So, I have a favicon here. So, if I open this in the browser, you’ll see that we have a favicon there so you can just create a small image, PNG image, and then put it anywhere and link to it here. So in the body, we have all these different elements. Okay. Now when I was doing the HTML tutorial I mostly used divs. Divs, as I said, is a way to separate content and then use a divs to style them. so if you put a class inside of a div you’ll be able to style whatever is inside of this div using the class or the ID that you define for this class. In HTML5 file there’s something we call semantic HTML. So semantic html these are things that are descriptive. So, like, something like header, you see, a header is very descriptive. If someone sees this, they just know that this is the heading. The header part of the body, this is where you’ll have things like the navigation. You can even have things like header image. So we are going to have something similar to that and then we’ll have something called section. So a section is somewhat like div but it is descriptive. It somewhat describes related items. So you can also use it the same way as a div and then we also have a footer. So the footer, these are elements that you can put in your footer, of, in the footer of your page. So in semantic html the different html tags that you can use, different html blocks. For example, a nav is very descriptive you just know that this is the navigation. The other tags that you may have, that may fall under this category of semantic html, these are things like main. So the main, of course, if you put this in a page, it will be like the main content of the page and then you can have an aside. An aside will be things like on a sidebar if you’ve seen most websites they usually have a sidebar. So things on the sidebar, you can put in the aside. And then the main content of the page there. Maybe it’s a blog post. The blog content and anything else in there, images, comments, and everything you can put that in a main, in the main section and then an article. this can be articles if you have posts, you can put posts in here. Or if you have lists of certain things in an aside are you can put them inside of an article. And the footer, as the name suggests, is for elements in the footer. And then for header, these are elements in the header such as the navigation. And then the nav, this describes the navigation elements. So in the next video lets get started on a simple web page. And just a word of caution, I haven’t really prepared any code for this so we are going to do it step by step and you’ll see me make errors here and there and that’s normal. So I will see you in the next video when we continue from here. And if you haven’t watched the other videos before this, make sure you watch all the videos so that you can understand html because this is not going to be as basic as the things we’ve covered throughout the course. Okay. See you in the next video.

GET SOCIAL WITH ME:
FACEBOOK: https://www.facebook.com/rwahowa/
INSTAGRAM: https://www.instagram.com/rwahowa/
TWITTER: https://twitter.com/rwahowa/
VIMEO: https://vimeo.com/bizanosa/
WEBSITE : http://rwahowa.com