Htmlwebsite Course

What is HTML Preview 04:25

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.

What is HTML Follow Along Guide Preview 1 page

HTML vs Programming languages Preview 07:36

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

HTML vs Programming languages (written) Preview 1 page

Creating the very first HTML file using notepad with very simple technique Preview 04:15

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.

Download and Install notepad++ a better solution to play with codes Preview 05:21

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.

Creating an HTML file using notepad ++ Preview 05:07

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.

How to use tag Preview 09:08

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

What are the attributes Preview 03:52

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.

HTML document hierarchy rules Preview 04:20

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.

Making the HTML document readable Preview 03:58

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?

Styling and formatting text using some HTML tags Preview 08:01

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 and Title attribute Preview 03:57

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.

White spaces and preformatted text Preview 03:37

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 Preview 04:56

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.

Unordered lists Preview 03:43

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

Ordered Lists Preview 02:38

This is another type of list.

Ordered list can be look like:

1. List one
2. list two
3. 
   

Type and value attribute for formatting HTML Lists Preview 05:33

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.

Nesting multiple lists Preview 08:05

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

Making description Preview 03:59

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.

Building tables Preview 05:33

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.

Table heading Preview 02:37

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.

Managing table height and width Preview 03:25

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.

Using colspan attribute Preview 04:45

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.

Using rowspan attribute Preview 03:41

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

Nested Tables Preview 05:17

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

Cell spacing and Cell padding Preview 03:01

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.

Creating a complete website layout using tables Preview 05:48

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.

Understanding URL and its parts Preview 04:52

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.

Linking a webpage to another webpage Preview 06:20

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

Linking to an HTML file which is on a sub directory Preview 07:29

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

Linking a webpage to a back directory's HTML file Preview 06:37

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

Bookmarking Preview 07:38

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

Target Attribute Preview 03:11

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.

Linking all the pages and making a linked and navigated website Preview 10:29

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.

Iframes Preview 04:40

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.

Creating navigation page and adding it on all pages using iframe tag Preview 07:33

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

Adding Images Preview 05:35

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

Adding Inline Images Preview 03:54

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....

Linking up images with webpages and other images Preview 03:43

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.

Title and Alt attribute Preview 03:40

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.

Course Feedback Checkpoint - How Are You Enjoying Our Course So Far? Preview 01:17

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!

What is CSS Preview 02:02

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.

Inline CSS Preview 04:02

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

Internal CSS Preview 05:10

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.

External CSS Preview 06:05

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.

The Div Tag Preview 03:19

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.

CSS Selectors Preview 04:58

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

Different states of anchor tag Preview 06:32

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

Sibling and Child selector of CSS Preview 07:13

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

Height and width properties Preview 01:44

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

Pixels and Percents Preview 02:13

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

Margination Preview 07:06

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

Padding Preview 03:09

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

Important rules of dimension Preview 03:24

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

Note: Must watch this lecture!

CSS borders Preview 04:12

CSS border property is really important to design border around any HTML element.

By Using the CSS border property, we can create a full styled border with multi color theme and styles.

We can add border with dashed, dotted and solid style.

and many more things you'll find in this lecture

Expanded way of CSS borders Preview 09:05

Let just learn some more thing about border, You'll find some other ways to draw a border in CSS.

CSS backgrounds Preview 07:55

We're using the most common background property from a long time, named background-color, but there are a lot more!

Like, background-image, background-repeat, background-attachment and etc...

Let just watch this lecture to find more about the CSS backgrounds.

Floating and clearing Preview 05:44

In this lecture, we'll learn that how to create to block level element like div tag in front of each other, means in the same row.

Generally, it's impossible to create multiple block level element like div tag in the same row but by using the float property of CSS, we can do it.

After using the float property we can get some problem in our tag dimensions.

So the solution is the CSS clear property with the 'both' value.

Watch the lecture to find more.

CSS Lists Preview 05:30

We've learned how to make lists in HTML but now, we'll learn how to Design them using multiple CSS properties.

Adding Images to CSS lists Preview 01:39

We can add images via CSS as well, Here in this Lecture, We'll learn to add image not in just some divs but also in the lists directly as bullets.

Creating a simple navigation bar using CSS lists Preview 04:55

HTML lists can play an important role in the navigation bar if we combine it with CSS tefchniques.

90% websites using HTML lists as thier navigation links but all they use CSS to make LIs in to a beautiful buttons.

CSS text Preview 09:30

We can Stylize our text using CS as well.

Here in this Lecture, we'll talk about text and the CSS.

CSS fonts Preview 07:45

Fonts are actualy the face of our simple text.

All the designing of text goes to fonts.

CSS has a complete feature to design font of any text.

CSS tables Preview 08:04

We can Style our tables in CSS with using ome simple techniques. Most of the techniques of this lecture, you would already learned in this course.

But Obviously combining them and making a perfect shape is our aim.

HTML Forms Preview 11:34

This Chapter has some new features of HTML which ou didn't learned in this course yet. Just becauseI want to give a complete combination of HTML forms and its CSS.

Form is the basic part of every website. We can use it as a Contact us page, Registration page, Login page, Search bar and alot more.

Let just learn to build forms from this class.

More on HTML Forms Preview 07:55

In this Lecture, We'll cover some more things about HTML Form Elements.

How the Form works Preview 08:52

Here in this video, We'll discuss that how our Form works and process our data to Server.

Adding styles in the Form using some CSS techniques Preview 09:38

Let just add some taste of CSS in HTML Forms to get a perfect and beutiful shape of Simple HTML Forms.

Creating the coding layout of webpage Preview 05:12

This is the Final Project of this course and this is the first part. Here you'll finally start to create a complete Webpage using HTML and CSS techniques.

Creating a basic designing layout for webpage Preview 06:09

We'll do Some basic designing for the Layout of the webpage. and Try to develop a perfect layout.

The header and the navigation area Preview 07:09

In this Lecture, We'll create a Professional Header and navigation area for our webpage.

The right side area Preview 10:08

Right side area which can be called the main content area.

We'll design it in this class. and make sure to leave place for the left side area.

Making the main post Preview 12:52

After the Creation of the Right side area or actually the content area, This is the time to design the posts for the website.

Making the sub post Preview 12:25

Now We'll design some sub posts or actually some old posts for the home page.

Applying Iframes Preview 10:23

We've learned about the Iframes before in this course in the HTML area. So now we're just going to apply it professionally on our webpage.

Fixing some bugs Preview 02:46

Oops, We've got stuck in some problems! Solution is to find solutions.

In this class we'll manage the Problems of our project and Clear them.

Creating footer Preview 03:14

Footer is the most last area of any website at the bottom.

We can Mention Developers company name and company's website there and the copyright logo as well.

But some website are using footer as a sitemap with multiple website links.

Creating contact us page Preview 10:51

We've already created a contact us page. Now we simply have to put it on the project. To make our single webpage into a website.

Contact us page is the very important part of any website thats why I just added it in our project.

Course Final Exam - You Have Now Built Your Very Own Website! Preview 03:31

In this lecture students will be given a short recap of what their website should look like and how we were able to build this simple website throughout this entire course.

Course Conclusion and Special Bonus and Offer Exclusive To My Udemy Students Preview 00:33

In this lecture students will learn about the sequel to this course and how they can continue learning with us in out next course on HTML5 and CSS3!