HTML5 Guide Review

Put Together A Modern Website
2.5 (1 rating)
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.
501 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 46
  • Length 2 hours
  • Skill Level Beginner Level
  • 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 1/2016 English

Course Description

HTML5/CSS3 primer is perfect for anyone who is looking to develop an application. This course is filled with examples, projects and samples so that you can get started writing your application today using HTML5.

The course is intended for anyone who wants to write websites or develop applications. Your background doesn't matter because you'll be introduced to development terminology as part of this course.

The course does includes resources and references to help you complete your application. As a challenged exercise, you'll be able to submit your project to me where I can review it and provide feedback to you.

The course is structured where students will first learn the high level concepts and purposes of each section. After the brief introduction, each topic will be discussed with working examples, samples and online reference of each.

Take this course if you want to become an HTML5 Rockstar

What are the requirements?

  • You gotta have a computer, internet connection and the ability to download software.

What am I going to get from this course?

  • Develop using the latest techniques with HTML5
  • Learn About New HTML Tags
  • Get updated information about new meanings to existing HTML Tags
  • Create new attributes introduced into this HTML5 mark up

What is the target audience?

  • This course is meant for newbee's who wish to use the latest recommendations and best practices for developing with HTML.
  • This course is not for people who already know HTML5.

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: About The Instructor
00:47

Michael Edward Vargas Jr., is an American Software Engineer and Entrepreneur who is best known for his ongoing involvement in the development of federal and private enterprise application systems using the best of breed technologies. He is currently a member of the UXD Summit Developer Group and Chief Operating Officer of Intellipoint Corporation. He is a huge fan of Douglas Crockford and John Resig for their development in the JavaScript community.

On his mornings, nights and sometimes weekends, he is passionately devoted to the development of real world applications and teaching. Originally, he started out working for Motorola and has gone on to contribute to organizations such as ADT Security Services, Travel Industry Services and the Engility Corporation.

Section 2: HTM5 and CSS3 Overview
01:53

This lecture gives an overview of the course and its corresponding topics. The lecture describes who the course is intended for and how to get the most out of taking it.

02:32

In this section, we cover some updates to existing tags in the HTML5 version of the language by taking a look at some examples and practices using them.

02:43

In HTML5, some of the existing tags have been repurposed, that is they have been given a new meaning. Understanding what these are will help inform you through the decision making process as to when you should create your mark up with them.

04:47

In this section, we've applied what we've learned so far by creating our project.

Check out the external resources and get familiar with JSBIN.

You can use any online editor as you see fit such as CODEPEN or whichever online editor of your choice.


HTML5 Introduction Review
4 questions
Section 3: New HTML5 Tags
01:15

Let's take a look at the very high level aspects of what this section of the course will cover and all the new tags it approaches.

03:25

This section covers the SECTION element tag. The goal of this section is to provide you answers to the following questions:

  • When is the SECTION element appropriate?
  • Where should I use the SECTION element?
  • How should it be used?

Exercise is located here: https://jsbin.com/wotagu/2/

02:02

Here is the solution to the previous exercise.

Solution is also here: https://jsbin.com/vihezo/1/edit

03:06

The HEADER tag is covered in this section.

We look to cover the following:

  • When is the HEADER element appropriate?
  • Where should I use the HEADER element?
  • How should it be used?

    JSBIN: https://jsbin.com/depisav/1/edit
02:52

The FOOTER tag is covered in this section.

We look to cover the following:

  • When is the FOOTER element appropriate?
  • Where should I use the FOOTER element?
  • How should it be used?

    JSBIN: https://jsbin.com/depisav/1/edit
02:03

The ASIDE tag is covered in this section.

We look to cover the following:

  • When is the ASIDE element appropriate?
  • Where should I use the ASIDE element?
  • How should it be used?

    JSBIN: https://jsbin.com/depisav/1/edit
02:54

In this one, we'll walk through how to introduce the ASIDE tag into the html layout.

02:24

The NAV tag is covered in this section.

We look to cover the following:

  • When is the NAV element appropriate?
  • Where should I use the NAV element?
  • How should it be used?

    JSBIN: https://jsbin.com/depisav/1/edit
01:51

This section poses some questions to you to consider and find solutions for.

02:43

The MAIN tag is covered in this section.

We look to cover the following:

  • When is the MAIN element appropriate?
  • Where should I use the MAIN element?
  • How should it be used?

    JSBIN: https://jsbin.com/depisav/1/edit
02:31

The ARTICLE tag is covered in this section.

We look to cover the following:

  • When is the ARTICLE element appropriate?
  • Where should I use the ARTICLE element?
  • How should it be used?

    JSBIN: https://jsbin.com/depisav/1/edit
01:03

The TIME tag is covered in this section.

We look to cover the following:

  • When is the TIME element appropriate?
  • Where should I use the TIME element?
  • How should it be used?

    JSBIN: https://jsbin.com/depisav/1/edit
03:11

The VIDEO/AUDIO tag is covered in this section.

We look to cover the following:

  • When is the VIDEO/AUDIO element appropriate?
  • Where should I use the VIDEO/AUDIO element?
  • How should it be used?

Section 4: A Project To Make
00:37

This is a high level quick overview of the project we'll be putting together.


Ready?

02:32

This section is about setting up your environment so we can get crackin on developing that project!

03:02

The head section is extremely important because alot of what your site looks like and conveys to both people and computers comes from here. In this section, we walk through how to talk to both.

The Header Section
07:37
The Footer and Jumbotron Sections
02:31
04:51

In this section, we configure the MAIN section of the site.

Creating the Video Cover
03:21
Article

As a challenge exercies, see if you can create the website as I did in section 3. Attached you will find each of the snippets of code you will need to insert in the appropriate locations of the page layout.

Good Luck!

Section 5: The New Form Markup
An Overview Of This Section
01:49
12:36

In this section, we create a form showcasing the new input types and walkting through them with an example:

https://jsbin.com/citodiv/edit?html,output

02:19

In this section, we develop a schedule datalist input control.

https://jsbin.com/citodiv/edit?html,output

01:48

We solve the problem of where do I begin with all this information using this attribute?

02:13

In this section, we use the required attribute to enforce certain things are entered in our forms.

03:11

In addition to marking a required field on a form, we can even enforce which characters we will allow on the field too by using the pattern attribute.

01:38

If you are going to be working with JavaScript frameworks then you need to know this!

03:55

Create helpful hints to fill out your form using placeholders like this!

The New Markup Quz
5 questions
Section 6: New CSS3 Styling
02:10

In this section we define CSS, it's purpose and how it is used when developing websites.

02:58

In this section we talk about defining CSS classes and ID's, their distinctions, why you would use one over the other and how to create them.

Controlling The Borders
02:16
02:31

In this section we cover the different properties of the box-shadow css property.

Using Text Shadow
04:04
How To Give Your Elements Transparency
02:42
03:27

Let's apply a css3 gradient to our background

03:24

This section talks about what the default css box model is, how it works and why elements take the space they do.

04:16

In this section you'll learn how to use fonts and where to find them.

Article

In this section, you load a custom style font for your application

Create Your Project
Article
Section 7: Conclusion
Conclusion
00:27

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Michael E. Vargas JR, Front End Developer/Engineer

Michael Edward Vargas Jr., is an American Software Engineer and Entrepreneur who is best known for his ongoing involvement in the development of federal and private enterprise application systems using the best of breed technologies. He is currently a member of the UXD Summit Developer Group and Chief Operating Officer of Intellipoint Corporation. He is a huge fan of Douglas Crockford and John Resig for their development in the JavaScript community.

On his mornings, nights and sometimes weekends, he is passionately devoted to the development of real world applications and teaching. Originally, he started out working for Motorola and has gone on to contribute to organizations such as ADT Security Services, Interval International and the Engility Corporation.

Ready to start learning?
Take This Course