The Complete HTML5 & CSS3 Course Build Professional Websites

In this Lecture, I'll guide you about the new changes, new features and Updates in HTML5. That how HTML5 can help you to make your website more professional and better.

To Declare an HTML files version, we have to use the DTD (Document Type Declaration).

In this lecture I'll teach you to declare HTMl5's DTD and the difference between the new and the previous DTDs.

We're all already knows about the most famous br tag. But The WBR tag is an special tag for breaking work not lines.

Audio Tag is a new and great addition in HTML5. In this way, we don't need to use the traditional Object tag.

There are a lot of new attributes as well to manage an audio and make it more easy and professional for users.

Video Tag is an official tag in HTML5 to pubish video on the web. With some really easy instructions we can make a perfect HTML Video player using HTML5 techniques.

To manage Video Tag, there are many attributes for its controls.

In this lecture, we'll actually make some simple HTML forms but its necessary to go further and learn HTML5 new Form Elements.

In this Lecture, we'll add some simple CSS to our Form to make it more impressive.

By Using HTML5, we don't need to use jQuery, JavaScript or some other server side techniques to make our form validated.

We can validate our form the Help of HTML5 new form elements from client side.

In this lecture, we'll talk about validating the Email address.

Here in this lecture, we'll learn to validate the specific number field.

In HTML5, we have the specific fields for inserting date. So we'll talk about it here in this lecture.

In this lecture, we'll learn to create an specific field about week and month.

Here in this video, We'll talk about the time input and how to get date and time both in the same field.

HTML5 has some specific fields for the URL and search. And obviously we can validate the URL as well.

This is an important lecture. We'll talk here about how to validate the simple text field as well using HTML5 new elements.

And how to validation the whole form.

Range input field is an interesting feature in HTML5 where we can make a range to get users ratings and for other purposes as per the requirement.

Color input is another interesting feature of HTML5 where we can take some colors from users via form in the #code type.

These tag are just like the old select tag. But In the Input list fied, we can get the ability to search any option by typing a well, instead of just the drop down, it has the drop down feature as well BTW.

In HTML5, we can upload multiple files to the server.

We can guide our users about what to put in the specific field, with placeholder.

By Using Autofocus, we can fix the by default focus to any input field.

And novalidate attribute can stop all the validation if you use it in the form tag.

The word Canvas is used for Oil Painting.

HTML Canvas tag can do many thing like painting.

We can create graphical images with using the HTML Canvas.

We have to use JavaScript for working with Canvas tag.

But Actually, Canvas is a tag which is included in HTML5 as a container of HTML graphical data.

Lets start working on the Canvas and make a simple Rectangle by using JavaScript.

I'tried my best to teach you the JavaScript in the easiest way.

JavaScript is necessary to create something in Canvas.

In this lecture, I'll teach you some more and new JavaScript techniques to create a line in the Canvas.

Let just Create a Circle Using JavaScript in the HTML Canvas Tag.

CSS3 is the latest upgrade in CSS levels.

By Using CSS3, you can easily use old CSS element as well.

There are a lot of new modules has been added in CSS3.

But we must know that CSS3 is still under development and will be completed after sometimes.

But most of its elements implemented in all major browsers.

It has New Text effects.

It has Transition effects.

It has Animation effects.

And many other things.

This is the great incrementation in CSS3, We can add rounded border to any of the HTML elements. We don't need to use photoshop anymore for rounded corners.

Box shadow can make our Box realistic without using Photoshop or any other designing software.

We can add A glowy shadow inside or outside of the box. We can make the box with any HTML Element like div, span, p or others.

CSS is all about styling and CSS3 is All about advance styling, Transiting, Animation and A lot more :)

Here in this lecture, we'll learn to add Multiple colors to the backgroun in the Linear gradient way.

Some more from the taste of Linear Gradient with some different ways.

I'll teach some more of Linear gradient in CSS3 in this class.

Obviously when CSS3 has the Linear gradient then it has the Radial Gradient as well.

In this lecture we'll talk about Radial Gradient Backgrounds and the complete Techniques.

Here in this lecture, we'll talk about how to add shadow at the back of text just same like we did in the box shadow.

Students will learn advanced techniques for controlling how text and other content behaves when it's too large for its container.  They'll master using the overflow property to hide or add scrollbars, and combine it with white-space and text-overflow to add a professional-looking ellipsis (...) to truncated text.

Word Wrap and Word Break

Font Face

Students will learn how to use the powerful CSS transform property and its translate() function to move elements around the page.  They'll master how to shift an element along the X and Y axes without disrupting the document's layout flow, a foundational skill for creating modern CSS animations.

Students will learn how to expand their knowledge of the CSS transform property by learning how to rotate, skew, and scale elements.  They'll master these functions to spin, tilt, and resize elements, opening up a new range of possibilities for creative designs and CSS animations.

By the Help of Transition Property of CSS3, We can transit our element in hover status.

Actually you can display the hover effects in the transitive way or Animated way.

Animation is another and power full technique in CSS3, By using it we can Animate any element in frames.

This is the first class of our project where'll make a complete webpage using multiple HTML5 and CSS3 elements.

We're just making the simple and basic CSS layout in this lecture for the project.

Here we're just completing the basic Layout for our project with full of basic HTML & CSS.

Here, We'll create the Header and Navigation area with HTML5 sementic tags.

Now we're truly in the HTML5 layout, and will make the article area with using the Article Tag.

For creating the side area. HTML5 has given us the Aside Tag. In this way, we can recognize, the side area for the developers, designer and the browser.

Here in This class, We'll complete the HTML part and The Simple CSS as well.

We've already learned the Border Radius Property. And now we're just gonna implement it on the webpage.

Adding the local fonts to the webpage should be the important part of HTML5.

We'll add some beautiful fonts to the webpage.

Here we're just adding the transition effect to the side area of the webpage which is actually the aside tag.

Animation is the very latest incrementation in CSS3 and Obviously it should be on the final project. So I'll teach you to add the animation to the body of the Webpage.

In this Lecture, We'll add some more animations to our webpage to make that more animated.

Just adding the percent values of aniamtions instead of simple To and FROM way.

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.

In this lecture students will learn about the my novice to professional HTML and CSS course and how they can continue learning with us in that course