HTML5 for Beginners
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.
13 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTML5 for Beginners to your Wishlist.

Add to Wishlist

HTML5 for Beginners

Learn how to create an elegant blog site with HTML5.
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.
13 students enrolled
Created by Peachpit Press
Last updated 4/2013
Price: $35
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • To teach users to make websites in HTML5
View Curriculum
  • Internet

THIS FOCUSED WORKSHOP provides a 3 hour, high-quality video training introduction to web design in HTML5. Adobe Certified Software trainer Sally Cox shows you how to create an elegant blog site with HTML5. She starts from the ground up, and together you will build a wireframe that will be the foundation of the website which will interactive forms. Sally will show you how to polish up the website with graphics, color, and multimedia, to give the blog a visual appeal. By the end of the course you will have the skills to create your own fully functional blog site that will look and perform beautifully.

Who is the target audience?
  • People who wish to learn HTML5
Students Who Viewed This Course Also Viewed
Curriculum For This Course
36 Lectures
What Is HTML5?
5 Lectures 20:25
This lesson explores the origins of hypertext markup language (HTML) and why it is used to create web pages. You will gain a better understanding of how HTML code works with your browser to display the web pages you create.
Preview 07:46

Let's explore a basic web page! This video will help you gain a more thorough understanding of the key components of a web page and how they all work together in the browser.
Preview 05:15

Let's dive in and get started, creating a few simple snippets of HTML code. In this video you'll learn to create your first HTML code and display it in your browser.
Writing Your First Snippets of Code

What exactly happens when you open a web browser and choose to view a web page? This video will show you. You'll also get some tips on how to get your pages to display faster.
Understanding How Browsers Interpret HTML

The look of your content can vary greatly depending on which browser your end-user is working with. In this video we'll look at the five most common browsers and discuss which ones are most commonly used.
Comparing Web Browsers and How They Display Web Pages
Understanding HTML5 Markup and CSS3
4 Lectures 11:04
A basic understanding of HTML tags can be a big help when you design for the web. In this video we'll examine the components of an HTML tag how they function on the web.
Examining HTML Tags

This video explores some of the tags that are new in HTML5, what their functions are, and which browsers support them.
Incorporating HTML5 Tags

Just as styles are used to control text formatting in applications like Word or Adobe InDesign, we use CSS on the web to help maintain consistency. This video explores how CSS can be used to control everything on your page, including text color, font, and even object placement.
Adding Style with CSS3

Let's see how CSS and HTML5 can play nicely together. This video will show how HTML5 and CSS3 are used in conjunction with each other to create consistency among your web pages.
Working with CSS and HTML5 Together
Beginning with Wireframing
4 Lectures 12:55
Before you can begin coding your site, you must have an idea of how it will work. This video will ask some of the key questions that you need to answer to get the most out of your web site.
Deciding How Your Site Will Work

We want our web site to be easy for users to get around, don't we? This video explores how the pages we link to interact with each other and how to best implement design hierarchy to create user-friendly sites.
Planning the Hierarchy of Your Site

Once you have an idea of how your site will work, it's time to create the wireframe. This video suggests some tools that you can use to create your wireframe and offers tips on creating the most efficient design.
Creating Your First Wireframe

You want your website to be easy to use and not require the user to think too much to get where they want to go. In this video, we'll look at a sample web page and see how the content flows, which will help you learn some ways to build a user-friendly flow into your site.
Thinking About Usability
Creating a Simple Blog Design with HTML5
7 Lectures 22:46
In this video you'll learn what a DOCTYPE is, why you need to use it, and how use your HTML editor of choice to change an older DOCTYPE to HTML5 compliance.
Changing the DOCTYPE of Your HTML5 Document

A blog needs to have certain basic elements to work properly. This video will explore what those elements are.
Understanding the Elements of a Blog

Headers and footers play a key role in web design. This video will show you how to create an attractive header to guide people into the content and a footer to give it a finished look.
Adding a Header and Footer to Your Blog

Once you've got the basics in place, it's time to add content! This video will show you how to begin adding posts to your blog.
Posting to Your Blog

The Aside element allows you to place text outside the container and format it with CSS to create a sidebar. You'll learn how to do it in this video.
Adding a Sidebar with the Aside Element

Lists are useful for organizing and structuring similar content. This video shows how to add ordered and unordered lists to your blog site.
Using Lists to Organize Content

Tables add structure to HTML documents. This video explains when to use tables, and when they are not appropriate.
Creating Tables within a Web Page
Designing an HTML5 Form
4 Lectures 13:21
This video walks through the basics of form creation on the web. You'll get a first look at the form template for this chapter and see how to examine the HTML5 code.
Beginning to Design a Form

What elements will we need on our form? In this video we'll review the different form elements available and decide which ones to use in the HTML form for our blog.
Understanding Basic Form Elements

Form fields have a new friend in HTML5: the Input tag. In this video we'll use this tag to add a text hint to our text fields.
Adding an Attribute to the New HTML5 Input Tag

With the new Mark element, we can highlight text we want to stand out. In this video we'll use the Mark element to draw attention to a selection of text in our blog.
Highlighting Important Content
Incorporating Graphics
5 Lectures 22:34
In this video you'll be introduced to the three main file formats used for graphics on the web – JPEG, GIF, and PNG – and the pluses and minuses of each one.
Understanding Web Graphic Formats

What's the best way to save graphics so they look their best on our blog? In many cases, it's the Save for Web feature in Photoshop and Illustrator, which we'll look at in this video.
Saving Graphics Properly for the Web

This video talks about the basics of using color on the web, including RGB, web-safe and web-smart colors, and color spaces.
Working with Color on the Web

In this video you'll learn about some resources that are available to help you in working with color. This video shows the awesome Kuler feature Adobe offers for choosing premixed color sets or creating your own.
Resources for Designing with Color

The new Canvas tag allows you to draw over an image like a map. This video shows you how to change the colors of the rectangles to match our blog.
Exploring the Canvas Tag
Importing Multimedia into Your Blog
4 Lectures 11:25
Let's discuss how multimedia can add excitement to your blog. This video explores some ideas of why multimedia can be such a key component of your web site.
Why Use Multimedia on Your Blog?

Audio can be used for a variety of reasons, such as to add background music or simply to walk your user through a series of steps. This video will acquaint you with the new HTML5 Audio element, which allows you to include an audio clip to play automatically when the page loads.
Adding Audio to Your Contact Form

The new Video element does not require an external player to display your video in HTML5. This video will explore the different video types and which are best for your blog.
Understanding Video Types for the Web

Auto play? Looping? How do you want the video to interact with your end user? This video walks you through adding the video element to your site and previewing it in multiple browsers.
Working with Video Controls
3 Lectures 06:35
To stay fresh, you will need to update the look and feel of your site occasionally. This video shows how to update your blog - whether it's a new color scheme or a new look altogether, plus some tips to help you get started.
Updating Your Blog

Thanks to CSS, updating the formatting of your content is a breeze. This video walks you through the process of opening the external CSS file, changing some formatting, and then watching it automatically update on the web pages.
Changing the Look and Feel of Your Site

This video reviews the topics we've covered in the HTML5 workshop and offers some final thoughts.
About the Instructor
Peachpit Press
4.3 Average rating
162 Reviews
2,025 Students
45 Courses
Books, eBooks and Videos for Creative People produces top-notch videos, books and ebooks on the latest in graphic design, Web design and development, digital photography, multimedia, video, and general computing. Our award-winning products are authored by the creative industry's top professionals and feature step-by-step explanations, timesaving techniques, savvy insider tips, and expert advice. Peachpit is the home of Peachpit Press, Adobe Press, Apple Certified and New Riders and is the publishing partner for The National Association of Photoshop Professionals (NAPP), and others.