Learn HTML5 & CSS3 to Build Responsive Websites
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.
33 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn HTML5 & CSS3 to Build Responsive Websites to your Wishlist.

Add to Wishlist

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.
33 students enrolled
Last updated 10/2015
English
Current price: $10 Original price: $20 Discount: 50% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 6.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
Requirements
  • Notepad++ (Text Editor)
  • Chrome (Browser)
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.


Who 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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 66 Lectures Collapse All 66 Lectures 06:18:30
+
Introduction & Overview
5 Lectures 29:16

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.

Preview 05:24

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.

Preview 02:57

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

Preview 03:24

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

Audio Tag
10:01

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.

Video Tag
07:30

Answer some questions related to section one.

Challenge #1 for HTML/CSS
3 questions
+
First Small Project in HTML5 & CSS3
11 Lectures 01:24: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.

HTML Semantic Tags
04:18

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.

Creating the CSS
13:31

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.

Creating the Middle Area
11:55

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.

Creating the Sidebar
11:47

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

Completing the Sidebar
05:59

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.

Creating Footer & Fluid Layout
05:58

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.

Creating a Simple Form
07:35

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

Designing the HTML form
05:46

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

Using HTML5 Input Elements
06:26

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

Input Dates
03:09

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.

More on Input Attributes & Form Validation
07:54
+
Formal HTML5 Tags & Attributes
14 Lectures 01:03:24

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

Datalist Tag
03:15

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

Auto Focus
05:15

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

Fieldset and Legend Tags
02:06

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

Summary & Details Tags
02:57

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

Dialog Tag
02:25

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

Fig & Figcaption Tags
02:08

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

Mark Tag
01:27

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

Meter & Progress
03:04

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.

Simple Canvas Tag
10:23

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.

Creating a Line in Canvas
07:50

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.

Creating a Circle in Canvas
08:06

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.

Inserting text & storke text in canvas
05:42

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.

Inserting colored and centered text in canvas
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.

Inserting Images in the Canvas
04:23
+
CSS3 Elements
18 Lectures 01:28:09

CSS3 Lectures:

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

Border Radius
07:01

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.

Box Shadow
03:24

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.

Linear Gradient
05:22

CSS3 Lectures:

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

Radial Gradient
04:03

CSS3 Lectures:

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

Text Shadow
03:06

CSS3 Lectures:

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

White space, overflow and text overflow
03:29

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

Font-Face Rule
07:01

CSS3 Lectures:

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

Transform - Translate - Rotate - Scale
06:32

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

Skew & Transform
04:09

CSS3 Lectures:

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

RotateX - RotateY - RotateZ
02:41

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.

Transitions
04:25

CSS3 Lectures:

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

Transition & Transforming
02:19

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.

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

Animation (2)
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.

Animation (3)
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.

Animation Properties
03:55

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

Box Sizing
03:23

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.

Multi Columns
09:03
+
Project: One Page Website
13 Lectures 01:23:34

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.

Introduction to the project
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.

Creating the Basic HTML structure
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.

What are VH and VW Unites?
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.

Creating the Header
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.

Working on the Header
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.

Adding Animations to the Header
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.

Creating a Sticky Navigation Bar
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.

Adding Transitions to Navigation
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.

Creating About Me Section
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.

Creating My Work Section
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.

Creating Contact Me Section
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.

Linking the nav section and validating form
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.

Adjusting the Header
03:08
+
Project: One Page Responsive Layout
5 Lectures 29:49

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.

How CSS3 Media Queries Work?
08:47

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.

Adjusting the Mini Tab Layout
06:51

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

Adjusting the Mini Tab Layout
02:44

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.

Adjusting Mobile Layout
05:46

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

Creating Footer & Adding Shadow to Header
05:41
About the Instructor
Abdul Wali
4.3 Average rating
3,963 Reviews
73,606 Students
27 Courses
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 70,000+ students and 3800+ reviews. He engages with students on Udemy in real time and answers questions within a few hours. If you have any question in mind then don't hesitate to ask Abdul via private message. 

Web Engineer &  Instructor Shahzaib Kamal
4.2 Average rating
4,463 Reviews
136,481 Students
11 Courses

It's Shahzaib Kamal from Pakistan, 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.