HTML5 - Basics to Advanced
4.3 (601 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
33,581 students enrolled

HTML5 - Basics to Advanced

A beginners guide for HTML5. Learn all concepts of HTML5 (from basic to advanced) with hands-on assignments and projects
4.3 (601 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
33,581 students enrolled
Last updated 7/2020
English
English [Auto]
Current price: $13.99 Original price: $19.99 Discount: 30% off
23 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn to create simple web pages using HTML5
  • Learn the basics tags of HTML
  • To create Tables in HTML
  • To create customizable forms and add form validation
  • To include multimedia(audio,video, images) in your web page
  • To create your own vector graphics using SVG
  • 4 projects to test your knowledge
Course content
Expand all 42 lectures 03:32:44
+ HTML Introduction
3 lectures 10:50

Hey guys, in this course, we will learn all about HTML5.

We will start from basic topics like adding headings, paragraphs, images, etc and will move towards more advanced topics like adding forms, vector graphics, multimedia and so on.


Hope you are excited to start your journey to become a Web Developer!!

Preview 01:54

Hey guys, in this video we will explore different code editor options. We will talk about - Notepad, Codepen.io and Visual Studio Code.

Preview 05:23

Hey guys, in this video we will learn about the document structure of an HTML page, What are HTML tags, What different tags mean and much more.

HTML - Structure of an HTML Document
03:33
+ HTML Basics
12 lectures 01:08:29

Hey guys, in this video we will learn all about heading in HTML.

HTML - Adding Heading in a Web page
02:41

Hey guys, in this video we will learn how to add a paragraph in a webpage? How add line breaks? How to make text bold? How to make text italics? and much more.

HTML - Adding Paragraph in a Web page
04:13

Hey guys, in this video we will learn how to add images in an HTML Web Page

HTML - Adding Images in a Web page
06:09

Hey guys, in this video we will learn all about Lists in HTML, Different types of lists and much more.

HTML - Creating Ordered and Unordered Lists
06:55

Hey guys, in this video we will learn How to add styles and format our HTML elements to make them look pretty and neat.

HTML - Adding Styles and Formatting HTML Elements
10:23

Hey guys, in this video we will learn about Block and Inline Elements.

HTML - Block and Inline Display Values
06:51

Hey guys, in this video we will learn how to add styles to a group of HTML elements using the class attribute.

HTML - Adding group styles using Class attribute
06:06

Hey guys, in this video we will learn how to add links in an HTML Webpage.

HTML - Adding Hyperlinks in a Web page
04:16

Hey guys, in this video we will learn how to redirect from one webpage to another.

HTML - Using links to connect Web pages
03:16

Hey guys, in this video we will see how to uniquely identify HTML elements by using the ID attribute.

HTML - Uniquely Identify HTML Element by using ID attribute
04:34

Hey guys, this is the project to create a static page of Favourite Foods.

Attempt this project to brush-up on the concepts that you have learned so far.

Use codepen.io to create this project.

HTML - Mini-Project 1: Favorite Foods Web page
00:47

Hey guys, in this video we have designed the Solution for the Mini-Project 1: Favourite Foods Problem statement.

HTML - Mini-Project 1: Solution
12:18
+ New Features in HTML5
4 lectures 16:03

Hey guys, in this video we will learn about all the new features in HTML5.

HTML - What makes HTML5 Better?
02:09

Hey guys, in this video we will explore all the new elements and attributes in HTML5

HTML - New Elements & Attributes in HTML5
00:52

Hey guys, in this video we will learn how to design page structure using the HTML5 semantic elements.

HTML - Design Page Structure Using Semantic Elements
09:38

Hey guys, in this video we will explore how to use the new <details> and <summary> semantic tags.

HTML - New Semantic Elements: <details> and <summary>
03:24
+ HTML Tables
5 lectures 29:21

Hey guys, in this video we will learn how to design tables in HTML.

HTML - Introduction to Tables
06:25

Hey guys, in this video we will learn how to span rows and columns across tables.

HTML - Span table rows and columns
02:55

Hey guys, in this video we will learn how to design a gallery grid using tables.

HTML - Design layouts using Tables
05:49

Hey guys, this is the practice problem for the tables module. Try it on codepen.io.

HTML Tables - Practice Problem 1
00:41

Hey guys, this is the solution for the Table Practice Problem that I gave in the previous video.

HTML Tables - Practice Problem 1: Solution
13:31
+ HTML Forms
10 lectures 53:06

Hey guys, in this video we will learn How to create a basic login form using HTML.

HTML - Introduction to Forms
04:03

Hey guys, in this video we will explore more about input types in forms

HTML - Form Input Types
08:15

Hey guys, in this video we will learn how to add styling to HTML form and it's elements.

HTML - Adding Styles to Forms
05:41

Hey guys, in this video we learn all about the two form methods - GET and POST.

HTML - Form Methods: GET and POST
05:17

Hey guys, in this video we will explore the new form elements introduced in HTML5.

HTML - New Form Elements
03:46

Hey guys, in this video we will explore the new form input types introduced in HTML5

HTML - New Form Input Types
05:50

Hey guys, in this video we will explore the new form input attributes introduced in HTML5.

HTML - New Form Input Attributes
03:53

Hey guys, in this video we will learn about Form Validation.

HTML - Form Validation
05:08

Hey guys,


These are the details for the Forms Practice Problem 1:


Image Links:

  • Google Logo: http://pluspng.com/img-png/google-logo-png-open-2000.png

  • Facebook Logo: https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/facebook_circle-512.png

  • Github Logo: https://image.flaticon.com/icons/svg/25/25231.svg

  • LinkedIn Logo: https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/linkedin_circle-512.png


Webpage:

Background Color Code: #f2f6ff


Form:

Border Color: #ccc

Border Width: 1px


Form Heading:

Font Size: 32px

Padding-Top: 56px

Padding-Bottom: 32px


Social Icons:

Width: 50px

Height: 50px

Padding Top and Bottom: 16px

Padding Left and Right: 32px


Input Fields Container:

Padding Top: 80px

Padding Bottom: 40px

Padding Left and Right: 80px


Input Box:

Font Size: 18px

Padding Bottom: 12px

Margin Bottom: 36px

Border Top, Left, Right: 0

Border Bottom: 1px solid #ccc


Submit Button:

Background Color: #0056ff

Padding Top and Bottom: 12px

Padding Left and Right: 24px

Font Size: 18px

Font Color: white

Border: None


Have Fun !!

HTML - Forms Practice Problem 1
00:48

Hey guys, this is the video solution for the Forms Practice Problem 1.

HTML - Forms Practice Problem 1 - Solution
10:25
+ Embedding Multimedia
4 lectures 11:31

Hey guys, in this video we will learn How to add videos in a webpage.

HTML - Adding Videos in a Webpage
03:33

Hey guys, in this video we will learn How to add audio files in a webpage.

HTML - Adding Audio in a Webpage
03:13

Hey guys, in this video we will learn how to play unsupported video and audio files in HTML5.

HTML - The <embed> element
01:48

Hey guys, in this video we will learn how to embed a youtube video in an HTML page.

HTML - Embed YouTube Videos in a Web page
02:57
+ Vector Graphics
3 lectures 21:41

Hey guys, in this video we will learn about

  • What is SVG in HTML5?

  • How to create line using SVG?

HTML - Introduction to SVG
08:53

Hey guys, in this video we will learn how to create a circle using SVG element.

HTML - Create circle using SVG
07:00

Hey guys, in this video we will learn how to create a rectangle using SVG.

HTML - Create a rectangle using SVG
05:48
+ Final Project
1 lecture 01:43

Hello guys, this is Final Project for the HTML Course. Give it your best. I can't wait to see what all you guys design. All the Best :)

HTML - Final Project
01:43
Requirements
  • None. This course is for absolute beginners.
Description

****UPDATE [06-July-2020]:  New Content Added!!!!!****

Around 20 NEW videos added

New Sections on:

  • Forms

  • Embedding Multimedia

  • Vector Graphics

  • And, a Final Project!

************************************************************


Are you a beginner? Do you want to learn web development but do not have any idea where to start?

If yes, then this is THE perfect course for you. In this course, you will learn all the concepts of HTML5, starting from its history to its modern structure. We will cover all the tags which are most widely used in the world of web development. Simultaneously, we will show you some of the best practices of code-writing in HTML5.

HTML is short for 'HyperText Markup Language', which means it is only used to create a structure of the web page. But without some styling, no assignment or project will look good. Thus, we will cover some portion of the CSS required to create simple web pages.

This course will be beneficial for all who are looking to start their career in the web development field and aspire to become a Frontend or Full-stack web developer. This course will be the first step towards your goal to become a web developer. To continue this journey, we would recommend you complete the other languages and skills like CSS, Javascript, ES6, React.

Check out our profile to find related courses that are designed just like this.


PS: More lectures will be uploaded soon.

Who this course is for:
  • Beginners who are new to Web Development
  • Freshers who want to learn HTML5 from scratch
  • Web Developers who wish to brush up their knowledge of HTML5