The Complete HTML & CSS Course - From Novice To Professional

In this lecture, we'll discuss that what is HTML actually and what HTML can do and how it helps us to create a web page.

Its a rendering language which helps us to create a webpage. It's so simple and easy to understand.

It works in the static way.

In this lecture we'll discuss about the difference between HTML and the Programming languages. I just want to clear you the difference between the rendering and Programming languages. And After watching this lecture you'll truly understand how HTML is important to go further in web

So now, This is the time to start making a simple HTML file. We'll use simple notepad to make a simple HTML file which should be pre-installed on your computer.

In this lecture, we'll learn to download and Install notepad++ on the computer.

Coding the HTML and CSS is really easy. But the simple pre-installed notepad is just a plain pad without any colors. Notepad++ is a color enabled notepad which has different color codes for each syntax of HTML and CSS. Which makes our code more readable.

It support approx. all major programming languages as well.

Here in this lecture, We'll make another simple HTML file. But we'll use notepad++ to make a new HTML file. It's really easy and simple to do. Just follow the instructions.

Tags are the main source in HTML to collect and maintain data of our whole document. They actually guides the browser about the data appearance about where the heading should be, and where the paragraphs and other things

If a tag is a plot then an attribute is a theme. This is an old and famous dialogue about attributes. But in the era, most of the theme work done by using CSS. But still, attributes are the great sources to add some more and specific features to the tag.

We've learned a lot of things in HTML. So this is the time to make a readable HTML document.

HTML files has a specific structure which must be applied when making a webpage with some specific and most important HTML tags.

HTML looks really simple. But when it comes to the height of coding then it can be confusing. Rush coding can messed up the concept of each code line.

The solution to make a heavy coded webpage with maintained readability is add comments to every section. When you think that you're just moving on to the another section or part of the coding then add some comment where you should mention what you will do in the next coding? or what you did in the previous coding?

This lecture is all about styling and formatting text with some specific HTML tag. We'll learn how to use <u>, <i> & <b> tag for underlining, italicizing and bolding the text appearance.

Abbr tag with the combination of title attribute can abbreviate and short-formed text like WHO, UN, US and etc....

Title attribute can be used with other tags as well.

This lecture will be really interesting to you. It's all about white or plain spaces and preformatted texting.

What is a white space?
A white can an extra space where you've already added a space and trying to add another extra space.
A white space can a line break which you try to make by using the ENTER key of the keyboard. Keep in mind that For entering a line break in HTML we've to use a specific tag which is actually the <br> not a plain ENTER key.

What is preformatted text?
If you just want to make display the white spaces in the browser as well. So we've to force the browser by adding the <pre> tag.

HTML entities are actually the special characters. Most of the special character are the reserver-words for computer languages like <, ',",{, and etc.... so if you want to insert these types of character in your paragraph as text then you have to use their entity codes which are really simple and understandable.

Lists are the really important part to create a perfect document. Specially when you need to insert some points wise Details or number wise as well.

In this lecture, we'll learn about the unordered lists.

• Point one
• Point two
• Point three

This is another type of list.

Ordered list can be look like:

1. List one
2. list two
3. 
   

Type and value attributes are really important when you want to make some editions in your lists.

By type attribute, we can change the type of list shape.

And by the value attribute we can mention any value according to the need.

After learning about ordered and unordered lists, this is the time to nest them with each other and get some nested result.

Descriptions are actually the lists. But obviously, description has its own way. Here in this tag, we cna make some descriptions and obviously we can make a list of descriptions as well.

HTML Table tag is an important tag which can create Table in an HTML document just like MS word, MS Excel and other programs who supports to make tables.

For making Table heading, we have to use a tag which is the <th> tag. And by using this tag we can make headings for every column of our the table.

In this lecture, We'll learn to manage table height and width by using height and width attribute. But this is not a recommended way. The recommended way is to use CSS instead of height attribute. But we're still in HTML, and obviously we should know about all of its attributes. So I'll teach this.

Sometimes, we need to add a heading not for different columns but for the whole table.

So for this purpose we've to add a column at the top of the table which covers all the columns.

We'll learn to add a main table heading by using colspan attribute in this class.

Same like colspan, If we need to add a Row which should cover the whole table. we have to use rowspan attribute.

In this lecture, we'll learn how to nest a table within a table.

This is a really interesting lecture where you'll learn to add some extra space inside the td or around the td with cellspacing and cellpadding attributes.

So finally, We we reach to this lecture, we must understood to draw a table in HTML with all of its features.

So this is the time to make a complete webpage layout using table tag.

This is the first lecture of URL, Links and iframing section.

In this lecture, we'll understand what is a URL and all of its parts as well.

Well simply, URL means address.

You'll understand more about it in the lecture.

After understanding about URL. We're going to learn how to link a webpage with another webpage.

This is another technique to link an HTML file which is inside a sub directory, not in the direct path or directory.

Same like linking to the sub directory. In this lecture, we'll learn about how to link a webpage to a back directory.

Book marking is another type of a URL where we can book mark any heading or sub heading as a link.

This is a interesting attribute which is really important when we just want to open our linked page not in the same tab but in a new tab. There are some more interesting technique of target attribute you'll learn in the lecture.

In this lecture, we'll do nothing new, But will link all the different webpage with eachother and will use the same table layout which we've made some classes before in the table section.

In this way, we can develop a simple website.

This is a really interesting and important tag of HTML.

With the help of iframe tag, we can add another webpage within a webpage in a frame.

In this lecture, we'll learn how to make a perfect navigation area by using the iframe tag.

Almost every website has images and picture in itself. So this is the time to learn how to add images in the HTML file.

Instead of adding some big size images, We can use the images inside the paragraph and make them "Inline images" like bullets or point etc....

We've already learned about Linking and URL. But in this lecture, we'll learn how to link up images with different webpage and other images as well or the image itself.

The alt attribute can be an important part of our webpage if we've missed the images or for some other reason, our image didn't appear!

The alt attribute actually can have the alternative text to show instead of image.

The title attribute can show the title any image just like we've learned to us title attribute in the paragraph.

In this lecture students will enjoy a short video on how to ask me any question and how their experience in the course has been so far!

CSS stands for Cascade Style Sheet. This is the introductory lecture about CSS.

CSS is not a part of HTML, But we can combine CSS with HTML to make a colorfull and themefull HTML file.

CSS is all about color, style and theme.

This is the first and simple type of CSS. In this way, we can create CSS inside the tag like an attribute.

In this lecture, we'll learn to use CSS in the HTML document but we can't use the internal CSS in the body tag. We'll use the CSS in the head tag as a tag.

This is the most comon and usable way to apply the CSS. We'll create another file with the extention of .css and apply all the CSS on that file. We have to call the properties from the .css file to .html file.

To create a connection between .css and .html file, we'll use the link tag.

This tag is actually the part of HTML but it has a simple speciality. That exept of block level value, it has nothing. No style, No special rules like h1, p or other tag. This tag is specified to divide different HTML sections.

We also can create a complete layout like table layout using this tag. And this tag is the recommended tag to create website layout.

We'll use this tag to apply CSS because this tag has no actuall style so applying CSS will be more efficient.

Note: We'll use this tag to Apply CSS mostly in next classes.

In this lecture, we'll learn about some selectors of CSS or some ways to select any HTML element in CSS to apply

In this lecture we'll apply CSS on different states of anchor tag.

In this lecture, we'll learn some more about CSS selector with more different ways.

In this lecture, we'll learn how to manage an element's height and width with CSS.

In this lecture, we'll learn the difference between Pixels and percents. The both can be used to mention the dimensions.

By using the margin property, We can add some extra space around the selected HTML element.

By using Padding property, We can add some extra space inside the selected element from the edges.

Let just learn about some comon and important rules of dimensions in this lecture.

Note: Must watch this lecture!