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
Take This Course
  • Lectures 36
  • Length 2 hours
  • Skill Level All Levels
  • 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


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2013 English

Course Description

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.

What are the requirements?

  • Internet

What am I going to get from this course?

  • To teach users to make websites in HTML5

Who is the target audience?

  • People who wish to learn 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.


Section 1: What Is HTML5?
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.
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.
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.
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.
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.
Section 2: Understanding HTML5 Markup and CSS3
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.
This video explores some of the tags that are new in HTML5, what their functions are, and which browsers support them.
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.
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.
Section 3: Beginning with Wireframing
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.
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.
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.
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.
Section 4: Creating a Simple Blog Design with HTML5
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.
A blog needs to have certain basic elements to work properly. This video will explore what those elements are.
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.
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.
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.
Lists are useful for organizing and structuring similar content. This video shows how to add ordered and unordered lists to your blog site.
Tables add structure to HTML documents. This video explains when to use tables, and when they are not appropriate.
Section 5: Designing an HTML5 Form
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.
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.
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.
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.
Section 6: Incorporating Graphics
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.
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.
This video talks about the basics of using color on the web, including RGB, web-safe and web-smart colors, and color spaces.
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.
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.
Section 7: Importing Multimedia into Your Blog
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.
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.
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.
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.
Section 8: Conclusion
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.
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.
This video reviews the topics we've covered in the HTML5 workshop and offers some final thoughts.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Peachpit Press, 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.

Ready to start learning?
Take This Course