Learn HTML5 & CSS3 to Build Responsive Websites

Learn the basics of HTML5 & CSS3 web development, and learn to build professional & responsive websites in HTML5 & CSS3
0.0 (0 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
31 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 66
  • Length 6.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 10/2015 English

Course Description

Learn the basics of HTML5 and CSS3 along with practical project examples i.e creating a complete responsive website using HTMl5 & CSS3.

Learn to code in HTML5 & CSS3

The main goal of this course is to code easily in HTML5 & CSS3 with practical examples, the basics includes some of the following:

  • HTML5 Semantic Tags
  • HTML5 Layout Structure
  • HTML5 Basic Tags
  • HTML New Attributes
  • CSS3 Properties

You'll also learn building real time projects in this course including a complete responsive website in HTML5 & CSS3.

Course Content Overview

This course is suitable for both beginners and intermediate users who want to master HTML5 and CSS3. With over 66 lectures and 7 hours of content, this course will go through the very basics of HTML5 new tags and CSS3 properties, and at the end, you'll learn how to build a complete project using the simple tags you learned from the basics. Those who want to become familiar with modern day web development & web designing techniques using HTML5 & CSS3, they can get advantage of this course.

In addition to the content of this course, we'll also give you support throughout the course, if you have any question during learning the course then you can easily ask that in the discussion forum, and we'll be there to answer you as soon as possible.


What are the requirements?

  • Notepad++ (Text Editor)
  • Chrome (Browser)

What am I going to get from this course?

  • Learn HTML5 and CSS3 basics with practical examples
  • Create HTML5 & CSS3 professional website while studying the course
  • Build a fully responsive website using HTML5 and CSS3

What is the target audience?

  • This course is for those who want to learn HTML5 and CSS3 with actionable examples and projects
  • Those who want to create a professional & responsive website using HTML5 and CSS3

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction & Overview
05:24

in this lecture, we'll take an introduction of this course, so we'll know about the course content and what's included in this course.

02:57

in this lecture, we'll learn about declaring the doctype for an HTML5 document, we'll also discuss about other doc types related to HTML.

03:24

in this lecture, we'll learn about WBR tag which is something related to HTML and we'll duscuss that in this lecture.

10:01

in this lecture, we'll talk about Audio tag which is used in HTML5 for inserting mp3 and audio files.

07:30

in this lecture, we'll learn about video tag and its examples in HTML5. Video tag is used to display several types of videos on the browser.

3 questions

Answer some questions related to section one.

Section 2: First Small Project in HTML5 & CSS3
04:18

in this lecture, you'll learn about semantic tags in HTML5, these tags are available in HTML5 which we can use for creating the whole structure of our HTML web page.

13:31

Now in this lecture, you'll learn about some CSS, how to link CSS file to HTML and how to apply styles on HTML elements such as <p> tag.

11:55

in this lecture, You'll start learning a small project in HTML5 and CSS3, I'll teach you creating the middle area of this project so that you can learn using small features in a live project.

11:47

in this lecture, You'll learn creating a small project in HTML5 and CSS3, I'll teach you creating the sidebar of this project so that you can learn using small features in a live project.

05:59

in this lecture, you'll learn completing the sidebar for the project that we creating using HTML5 and CSS3.

05:58

in this lecture, you'll learn creating the footer for this project, and also I'll teach you completing the fluid layout in HTML5 and CSS3.

07:35

in this lecture, you'll learn about creating a small form for this project in HTML5 and CSS3, we'll add this form to the website layout for contact us purpose.

05:46

in this lecture, You'll learn designing the HTML form using HTML5 and CSS3 so that it looks great on the website.

06:26

in this lecture, you'll learn using HTML5 input elements and attributes with live examples.

03:09

in this lecture, you'll learn about input dates which we can add to form elements while working on a form.

07:54

in this lecture, You'll learn more about input attributes and form validation. We'll apply this all in the live project in HTML5 and CSS3.

Section 3: Formal HTML5 Tags & Attributes
03:15

in this lecture, You'll learn about Datalist tag in HTML5, this tag is used to display a list of elements on the page.

05:15

in this lecture, you'll learn about auto focus element of HTML5 which is used to automatically focus on the input.

02:06

in this particular lecture, you'll learn about fieldset and legend tags in HTML5.

02:57

in this lecture, you'll learn about two more important HTML5 tags called "Summary" and "Details".

02:25

in this lecture, you'll learn about dialog tag in HTML5 which is used to display a dialog box.

02:08

in this lecture, you'll learn about Fig and Figcaption tags in HTML5 which are used for some specific tasks.

01:27

in this lecture, you'll learn HTML5 mark tag which is very useful for highlighting any sort of content in an HTML document.

03:04

in this lecture, you'll learn about meter and progress elements of HTML5 which are very useful in web designing.

10:23

in this lecture, you'll start learning about Canvas tag which is one of the most important elements introduced in HTML5, we'll take it deeply in the upcoming lectures.

07:50

in this lecture, You'll learn creating a simple line in the Canvas tag, while working with Canvas tag, we need to use JavaScript as well.

08:06

in this lecture, You'll learn creating a simple circle in the Canvas tag, while working with Canvas tag, we need to use JavaScript as well.

05:42

in this lecture, You'll learn inserting text and stroke text in the Canvas tag, while working with Canvas tag, we need to use JavaScript as well.

04:23

in this lecture, You'll learn inserting colored text and centered text in the Canvas tag, while working with Canvas tag, we need to use JavaScript as well.

04:23

in this lecture, You'll learn inserting images in the Canvas tag, while working with Canvas tag, we need to use JavaScript as well.

Section 4: CSS3 Elements
07:01

CSS3 Lectures:

In this CSS3 lecture, you'll learn about border radius which is a property used to round the borders of an element.

03:24

CSS3 Lectures:

In this CSS3 lecture, you'll learn about box shadow which is a property used to add shadow to any type of box.

05:22

CSS3 Lectures:

In this CSS3 lecture, you'll learn about Linear Gradient in CSS3 which is one of the values used for adding different colors.

04:03

CSS3 Lectures:

In this CSS3 lecture, you'll learn about radial gradient which is used in CSS3 for adding gradient color.

03:06

CSS3 Lectures:

In this CSS3 lecture, you'll learn about text shadow which is used to add shadow to a text.

03:29

CSS3 Lectures:

In this CSS3 lecture, you'll learn about white space, overflow and text overflow properties in CSS3.

07:01

in this lecture, you'll learn about font-face rule which is very important for using Fonts in CSS3.

06:32

CSS3 Lectures:

In this CSS3 lecture, you'll learn about different properties such as transform, translate, rotate and scale.

04:09

in this lecture, you'll learn about skew and transform properties which are used for changing the HTML elements.

02:41

CSS3 Lectures:

In this CSS3 lecture, you'll learn about RotateX, RotateY and RotateZ, these all are used to rotate the object.

04:25

CSS3 Lectures:

In this CSS3 lecture, you'll learn about transitions in CSS3, transitions are very helpful while creating dynamic elements for a web page.

02:19

CSS3 Lectures:

In this CSS3 lecture, you'll learn about transition and transforming, these options can change the element on the page.

03:56

in this lecture, we'll learn about the important animation property in CSS3, using this property, we can create beautiful and dynamic animations for our web pages.

05:39

in this lecture, we'll learn about the important animation property in CSS3, using this property, we can create beautiful and dynamic animations for our web pages.

08:41

in this lecture, we'll learn about the important animation property in CSS3, using this property, we can create beautiful and dynamic animations for our web pages.

03:55

in this lecture, we'll learn about the important animation property in CSS3, using this property, we can create beautiful and dynamic animations for our web pages.

03:23

in this particular lecture, we'll learn about box sizing in CSS3, this is an important option for creating boxes in HTML/CSs.

09:03

in this lecture, You'll learn using multi columns in CSS3, this is very useful option in CSS3 to manage many columns of the same HTML page.

Section 5: Project: One Page Website
02:10

in this whole section, You'll learn creating a complete project "On Page Website" and this website will be purely created using HTML5 and CSS3 tags.

07:05

in this whole section, You'll learn creating a complete project "On Page Website" and this website will be purely created using HTML5 and CSS3 tags.

04:11

in this whole section, You'll learn creating a complete project "On Page Website" and this website will be purely created using HTML5 and CSS3 tags.

05:19

in this whole section, You'll learn creating a complete project "On Page Website" and this website will be purely created using HTML5 and CSS3 tags.

06:43

in this whole section, You'll learn creating a complete project "On Page Website" and this website will be purely created using HTML5 and CSS3 tags.

07:04

in this whole section, You'll learn creating a complete project "On Page Website" and this website will be purely created using HTML5 and CSS3 tags.

05:52

in this whole section, You'll learn creating a complete project "On Page Website" and this website will be purely created using HTML5 and CSS3 tags.

02:23

in this whole section, You'll learn creating a complete project "On Page Website" and this website will be purely created using HTML5 and CSS3 tags.

11:08

in this whole section, You'll learn creating a complete project "On Page Website" and this website will be purely created using HTML5 and CSS3 tags.

09:16

in this whole section, You'll learn creating a complete project "On Page Website" and this website will be purely created using HTML5 and CSS3 tags.

14:00

in this whole section, You'll learn creating a complete project "On Page Website" and this website will be purely created using HTML5 and CSS3 tags.

05:15

in this whole section, You'll learn creating a complete project "On Page Website" and this website will be purely created using HTML5 and CSS3 tags.

03:08

in this whole section, You'll learn creating a complete project "On Page Website" and this website will be purely created using HTML5 and CSS3 tags.

Section 6: Project: One Page Responsive Layout
08:47

in this lecture, you'll learn about CSS3 media queries and their usage in web layouts. CSS3 Media Queries are used for making a web page or website responsive for mobile devices.

06:51

in this lecture, we'll learn about adjusting the mini tab of this beautiful layout, this will be totally a responsive layout in CSS3 and HTML5.

02:44

in this lecture, you'll learn adjusting the mini tab in this layout for making it responsive for mobiles.

05:46

in this lecture, you'll learn adjusting the whole layout for mobile devices, this is a responsive website and it should be adjusted automatically on mobile devices.

05:41

in this final lecture, you'll learn creating the footer and adding shadow to the header in this responsive website layout project.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Abdul Wali, SEO Marketer & Top Udemy Instructor

Abdul has successfully ranked hundreds of keywords in Google without any backlinking strategy. He is in the SEO and online marketing industry since 2009. Apart from SEO and marketing, he loves web development. WordPress is the core platform which Abdul has been using for creating top notch websites over the years. 

Abdul has established several successful startups such as OnlineTuting (An elearning system), OnlineUstaad (The largest hub of Urdu courses), Wali Solutions (Provides A to Z web solutions).

He is one of the top Udemy Instructors with 45,000+ students and 1900+ reviews. He engages with students on Udemy in real time and answers questions within minutes. If you have any question in mind then don't hesitate to ask Abdul via private message. 

Instructor Biography

Shahzaib Kamal, Web Developer + Online Instructor

It's Shahzaib Kamal,Who's an expert web developer and designer but a sincere instructor as well.

I love to teach the newbies and also the professionals. I always try to teach something new and in-demand topics to my students.

I'm working as a web developer since 2008 and instructing students since 2010. I found that udemy is helping those who want to learn. so that's why I'm here.

Ready to start learning?
Take This Course