HTML5 Digital Classroom

HTML5 Digital Classroom
Instructed by Digital Classroom
  • Lectures 83
  • Video 12 Hours
  • Skill level all level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android

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.

Course Description

HTML5 Digital Classroom covers the fundamentals of HTML5 including new syntax and form features, use of multimedia as well as supporting technologies including Geolocation, Canvas, Offline Storage and CSS3 styling and media queries. Included in this video training package are lessons covering the fundamentals of CSS layout which remain essential for understanding how HTML5 page and web applications work.  83 video lectures within 15 chapters explain layout fundamentals, HTML5 essentials and an introduction to mobile design of websites. Over 11 hours of total video content!

About the presentor:

Jeremy Osborn is director of content at American Graphics Institute (www.agitraining.com). He is the co-author of the HTML5 Digital Classroom, and has contributed to several books on web technology, including the Dreamweaver Digital Classroom. He brings more than 15 years of experience in web and graphic design, filmmaking for both print and digital media to his work at American Graphics Institute (AGI). At AGI, Jeremy also provides professional development training for corporate clients. Jeremy holds an MS in Management from the Marlboro College Graduate Center, and a BFA in Film/TV from Tisch School of the Arts at NYU.

What am I going to get from this course?

  • Over 83 lectures and 11.5 hours of content!

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: Defining HTML5
10:52

In this section you’ll receive a quick tour of key concepts and  features from the HTML5 core. Specifically, the new HTML5 syntax for web pages,web forms, and support for multimedia.

08:18

In this section you’ll receive a quick tour of key concepts and  features from the HTML5 family. Specifically this includes an overview of Geolocation, Drag and Drop Web Storage, Web Workers, Web Sockets and CSS3.

Section 2: Fundamentals of HTML, XHTML and CSS
06:11

In this lesson you’ll learn some of the basics of HTML markup. Specifically you’ll take a look at how the web browser renders an html page as well as other fundamentals such as the role of the head section as well as html attributes and values.

06:58

In this lesson you’ll learn how to create a hyperlink and add an image to a page in HTML. You’ll also learn the difference between block and inline elements as well as the difference between required and optional attributes.

06:57

In this lesson you’ll learn the role of validating web pages in HTML. Specifically you’ll learn about the HTML doctype as well as how to use the online markup validation service  provided by the W3C.

06:26

In this lesson you’ll learn how to style a heading on your page with CSS. Specifically, you’ll be learning the basics of CSS syntax and where CSS styles are located within a page.

05:52

In this lesson you’ll learn how add a CSS class selector to your page. Specifically, you’ll be using a CSS class in order to change the color of individual words within your page.

06:58

In this lesson you’ll learn how to add an external styles sheet to an HTML page.  Specifically, you’ll be learning about the difference between internal and external styles and how to move rules from one to the other.

Section 3: Formatting Text With CSS
05:49

In this lesson you’ll learn the basics of styling text in CSS. Specifically you’ll learn how how to work with the font-family property and how to create a font stack.

08:17

In this lesson you’ll learn the basics of sizing text in CSS. Specifically you’ll learn how to set the foundation of font-sizing on the page using a combination of the percentage and em values.

05:47

In this lesson you’ll learn how to change the amount of space between text elements using the CSS margin property. Specifically you’ll be learning about the default margins that browsers add to text elements and how to control those margins.

07:16

In this lesson you’ll learn how work with line-height and other text styles in order to change the appearance of text on your page. Specifically, you’ll be working with the line-height property to add space between paragraph lines, working with font-weight in order to change the boldness of your text and working with the text-transform property in order to set your text as uppercase.

08:18

In this lesson you’ll learn how to work with lists in HTML.Specifically, you’ll be learning how to use the three main catefories of lists: Unordered lists, Ordered Lists and Definition lists.

10:53

In this lesson you’ll learn how to style lists using CSS. Specifically you’ll be background colors to your lists as well as modifying the margin and padding of your list styles.

Section 4: Introduction to CSS Layout
07:33

In this lesson you’ll learn the role of a CSS reset file when creating page layouts. Specifically you’ll learn how to attach a CSS reset file to your page and how to modify the CSS reset style sheet as needed.

10:06

In this lesson you’ll learn the role of the HTML Div element as it relates to page layout. Specifically you’ll be working with a page of text that has been organized for you using the div element and then styling these elements with background colors.

08:43

In this lesson you’ll learn how to understand how the CSS float property works. Specifically you’ll be looking at the three main values of the float: left, right and none and in this case as applied to an image.

05:27

In this lesson you’ll learn how to apply the CSS float property to div elements in order to create columns in your page layout. Specifically you’ll be using a combination of floats, width and background color in order to begin a two column fixed-width layout.

06:07

In this lesson you’ll learn how to use the CSS clear property when working with column layouts. Specifically you’ll be adding a clear property to your footer in order to push it below two floated columns.

08:00

In this lesson you’ll learn how to build a basic horizontal navigation bar using a combination of HTML and CSS. Specifically you’ll be adding an unordered list and list items for your navigation and then styling it with the CSS float property and other styles.

07:21

In this lesson you’ll learn how to control the layout of your columns using the CSS padding property. Specifically, you’ll be looking at the effects of adding padding to your sidebar and main columns and how this affects layout.

10:55

In this lesson you’ll learn how to control the layout of your columns using the CSS margin property. Specifically, you’ll be looking at the effects of adding margins to the elements inside your sidebar and main columns and examining the differences between layout with margins versus padding.

06:45

In this lesson you’ll learn how to create style for a page footer. Specifically, you’ll be adding a background image and formatting text within a footer.

Section 5: Advanced Layout
06:18

In this section you’ll be removing the background color styles for your layout columns and replacing them with more visually appealing styles.

07:23

In this section you’ll be adding a background image to a container on your page in order to create a gradient effect.

09:23

In this section you’ll be adding some CSS code to ensure that your layout is sufficiently adaptable. Specifically you’ll be adding better support for floated columns and adding a condtional comment for Internet Explorer.

12:47

In this section you’ll be styling a horizontal css navigation bar to improve its appearance. Specifically you’ll be replacing background colors as well as adding rollover or hover links to improve your user’s experience.

08:54

In this section you’ll learn how to use absolute positioning in order to precisely add a new splash image to your page.

Section 6: Using HTML5 Markup
06:55

In this section you’ll get an overview of HTML5 syntax. Specifically, you'll get an introduction to the core elements used to build HTML5 pages.

08:45

In this section you’ll learn how add some of the new HTML5 input attributes to forms on your page. Specifically you'll be working with the placeholder, required, autofocus and autocomplete attributes.

09:31

In this section you’ll begin to convert a pre-existing web page to HTML5. Specifically, you’ll be adding the header element and learning how to add support for HTML5 in older browsers.

08:18

In this section you’ll begin add two new elements to a preexisting web page, specifically the nav and section elements. Additionally, you will also be learning how to style HTML5 elements with CSS.

07:49

In this section you'll add the footer element to your page as well as learn the multiple roles the footer might have on a page

10:17

In this section you will add article and aside elements to your page. Specifically you'll be using the article to group content that can be considered independent and you'll be using the aside element to group content that is somewat related to your page.

05:50

In this section you’ll add additional HTML5 elements to your page. Specifically you’ll be working with the figure and figcaption elements in order to mark up images and captions on your page.

Section 7: Creating HTML5 Forms
07:26

In this exercise you’ll learn some techniques to make sure your forms have a good foundation and support for accessibility. Specifically you’ll be adding labels, legends and fieldsets to a pre-existing form.

05:45

In this section you’ll learn some good CSS styling techniques for HTML forms. Specifically you’ll learn how to style a form element itself as well as form legends and labels.

08:15

In this section you’ll learn some good CSS styling techniques for styling labels in your forms. Specifically, you'll be floating labels as well as examning the use of the "for" attribute.

06:58

In this section you’ll learn how add some of the new HTML5 input types and attributes to forms on your page. Specifically you’ll be using the url and email input types.

08:45

In this section you’ll learn how add some of the new HTML5 input attributes to forms on your page. Specifically you'll be working with the placeholder, required, autofocus and autocomplete attributes.

10:05

In this lesson you’ll be creating a datalist menu as well as exploring the uses of the min and max attributes

06:29

In this section you'll be adding the range input type to your page in order to create a slider control to your page in supported browsers.

07:30

In this section you'll learn how to use a custom build of the Modernizr JavaScript library in order to provide fallback to browser that do not support HTML5 form features

Section 8: Introduction to JavaScript and jQuery
11:56

In this section you’ll be learning some JavaScript basics. Specifically you’ll be learning about JavaScript functions and variables as well as the document.write functionality within JavaScript.

04:27

In this lesson, you'll learn the basics of using JavaScript events in order to add simple interactivity to your page.

07:32

In this lesson you’ll learn the basics of the Document Object Model as it relates to JavaScript and HTML and you’ll also learn about JavaScript Frameworks.

07:42

In this section you’ll learn how to add support for the jQuery Javascript library to a page and then you’ll add a hide function to an element on your page.

08:32

In this section you’ll learn how to add support for the jQuery Javascript library to a page and then you’ll add a hide function to an element on your page.

Section 9: Working with Video and Audio in HTML5
08:46

In this section you’ll learn how to use the HTML5 video element in order to add video to a page. Additionally, you’ll look at supported attributes of the video tag including autoplay, poster images and controls.

09:43

In this section, you'll learn how to provide video format support for multiple browsers. Specifically, you'll be adding alternative options for the Mpeg-4 video as well as the OGG video formats.

08:17

In this section you’ll learn how to add fallback support for html5 video in older browsers.  Specifically, you’ll add a download link for older browsers as well as support for Flash.

11:17

In this section you’ll learn how to begin using JavaScript in conjunction with the HTML5 element. Specifically, you’ll be adding a button to your page and then controlling the width and behavior of the button using JavaScript.

04:07

In this section you’ll learn how to add the Audio element to your page in order to embed audio on your websites.

Section 10: Working with Canvas in HTML5
07:44

In this section you will learn the role of canvas within HTML5 as well as some of the benefits. You will also get an overview of how to use the html canvastemplate file we provide for the exercises in this lesson.

07:50

In this section you'll learn how to draw rectangles in canvas. Specifically, you'll be using the strokeRect, stokeStyle and fillRect, fillRect functions

11:07

In this section you’ll learn how to draw lines and circles on your page as subpaths. Specifically you’ll be working with the moveTo and lineTo functions as well as arc and beginPath functions.

10:22

In this section you’ll learn how to draw curves on your page in Canvas. Specifically you’ll be working with the quadraticCurveTo and bezierCurveTo functions.

06:32

In this section, you’ll learn how to add text to a page using canvas syntax. Specifically, you’ll be working with the fillText and font functions and learning how to style the text you’ve added.

10:04

In this section you’ll learn how to apply gradients to your artwork in Canvas. Specifically, you’ll be working with linear gradients and radial gradients as well as learning how to define transparency in gradients.

06:44

In this exercise you’ll learn how to apply transform effects such as scaling, rotating and translating to objects on your page

05:35

In this section you’ll learn how to add image objects to a page in Canvas. Specifically, you’ll be working with the drawimage function as well as adding code to ensure the image has enough time to load when the page is opened.

06:42

In this exercise you’ll learn how to create a drawing loop, otherwise known as an animation, using Canvas syntax. Specifically you’ll be using the draw, drawbackground and setInterval functions

Section 11: Styling With CSS3
08:13

In this section you will learn how to apply rounded corners to the borders of your styled elements. Specifically you’ll be using the border-radius property and learning about vendor-specific prefixes.

06:40

In this section you will learn how to apply an image to the border of an HTML element. Specifically, you’ll be working with the border-image property.

09:24

In this section you will learn how to apply multiple background images to different elements on your page. Specifically, you’ll applying three semi-transparent images to the body of your page and you’ll also be exploring positioning of multiple background images.

07:49

In this section you will learn how to create native gradients using CSS3. Specifically, you'll be working with linear gradients as well as radial gradients.

08:42

In this section you will learn how to apply styles that use transparency and opacity and learn the appropriate use for each. Specifically you’ll be working with rgba color values as well as the opacity and box-shadow properties.

05:03

In this section you will learn how to add simple transformations to objects on your page such as moving, scaling and rotating.

10:35

In this section you'll learn how to create CSS transitions, which are a form of animation, to a hyperlink on your page to create an animated button

06:12

In this section you’ll learn how to add web fonts to your pages. Specifically, you’ll be working with the @font-face feature of CSS3 allowing you to embed fonts on your page.

07:44

In this section you'll learn how to create and add custom web fonts to your site using a web service such as Font Squirrel

Section 12: CSS3 Media Queries and more
08:57

In this section, you’ll learn the role of CSS3 Media queries and specifically, you’ll begin to style the layout of a page that is optimized for a smartphone device.

10:40

In this section you’ll take a page that has media queries enabled and style it as a single column. Specifically, you’ll look at techniques to address floated columns on your page and other methods of creating layouts optimized for a smartphone.

06:07

In this section you’ll learn how to use multicolumn layout in order to divide your pages content into multiple columns. Specifically you’ll be working with the column count and column width properties.

12:48

In this section you’ll learn how the basics of CSS3 flexible box layout. Specifically, you’ll be working with the box and box-flex properties as well as box-pack, box-align and box-orient properties.

Section 13: Offline Storage
09:58

In this section, you’ll learn how to define the difference between Application caching and Offline storage as well as see examples of the technology and its benefits

10:11

In this section, you'll learn how to local storage is used in order to save user data within a web application. Specifically you’ll be working with JavaScript functions that check for browser support, as well as the KeyUp event in order to save the user data and a fallback to alert the user if local storage is not available.

09:03

In this section, you'll learn the basics of Application caching. Specifically you'll be looking at the cache manifest file and other aspect of the technology

Section 14: Geolocation
08:43

In this section, learn how to detect and display the location of your site’s users with the Geolocation API. Specifically, you’ll be creating a simple page that will request permission from the user to obtain their geographic location and then display it using latitude and longitude.

09:16

In this section, you’ll leanr how to use a combination of Geolocation and the Google Maps APi in order to display your user’s geographic position on a map.

07:37

In this section, you’ll learn how to add markers to a map that is geolocation enabled. Specifically, you’ll be getting the current location of your user and then plotting a number of markers on a map to represent stores nearby the user’s location.

Section 15: Drag and Drop
10:25

In this section, you’ll learn fundamental components of HTML5 drag and drop pages. Specifically you’ll learn about drop zones,  the dragenter event, the dragover event, the dragstarted event and the ondragstart attribute.

06:58

In this section, you’ll learn some of the differences in the way browsers handle drag and drop behavior. Specifically you’ll add support for a drop zone and you’ll also learn how to use HTML5 Canvas code in order to create a unique visual indicator for when the user is dragging an object.

Instructor Biography

Digital Classroom , AGI Training

Digital Classroom provides expert instruction that fits into your schedule. With best-selling books and video tutorials, the Digital Classroom makes it fast and easy to learn essential skills that you need. Digital Classroom authors and presenters have created many official training guides for companies like Adobe and Microsoft, and you can benefit from their expert instruction.

When you learn from Digital Classroom, you are learning from experienced instructors who have trained thousands to learn creative software tools. They teach classes on Adobe software and design technologies at AGI Training. They are also the authors of dozens of books including:

Digital Classroom tutorials are created by experts, and are peer-reviewed and edited for accuracy, completeness, and clarity. All tutorials are professionally recorded and edited, and are suitable for Mac OS and Windows users, with the authors providing clear instructions for users on both operating systems. See a complete line of Digital Classroom books at www.DigitalClassroomBooks.com.

Digital Classroom presenters are available for private and custom training engagements through American Graphics Institute. Details at www.agitraining.com

Join the biggest student community

5,900,000

Hours of video content

22,000,000

Course Enrollments

6,500,000

Students

Reviews

Average Rating
3.0
Details
  1. 5 Stars
    0
  2. 4 Stars
    0
  3. 3 Stars
    1
  4. 2 Stars
    0
  5. 1 Stars
    0
    • Steve Reid

    No response to questions

    The course itself is well structured, well delivered, and has been very useful to me. However, I have only rated it 3 stars as there seem to be no answers to questions!?! I feel that answers to questions are an important part of the learning process, and one of the features that make udemy the great learing resource that it is.