HTML5 Layout with CSS3

Overview/Description
Target Audience
Prerequisites
Expected Duration
Lesson Objectives
Course Number
Expertise Level

---

Overview/Description
HTML5 and CSS3 complement each other nicely; however, CSS3 has the ability to control the very layout of the HTML5 document. CSS3 allows you to overlap, align, and even place HTML5 objects side-by-side. In this course, you'll learn the basics of how to manipulate the HTML5 objects to format them into the layout you desire. You'll also learn about the use of CSS3 and HTML to create navigation menus and the new nav tag that HTML5 introduced.

Target Audience
Developers who wish to use the new features of HTML5 and CSS3 to provide their users with a visually pleasing and easy to use web page

Prerequisites
None

Expected Duration (hours)
2.2

Lesson Objectives

HTML5 Layout with CSS3

start the course

apply a direction to text in an HTML5 document

apply a rotation to text in an HTML5 document

apply a rotation to divs in an HTML5 document

add an alignment to text in an HTML5 document

specify the position for text to appear in an HTML5 document

specify the position for an object to appear in an HTML5 document

create overlapping divs to provide visual layering in an HTML5 document

describe how and when relative positioning should be used in an HTML5 document

apply overlapping text to an image in an HTML5 document

create a navigation bar by nesting divs in HTML5

describe how to use divs and CSS3 to add basic animation to an HTML5 document

create a clickable div that will act like an HTML5 button

apply the necessary CSS styles in order to place divs side by side in an HTML5 document

add the CSS necessary to center a div layout in an HTML5 document

use CSS3 to modify a hyperlink's appearance in an HTML5 document

apply vertical alignment to the content of an HTML5 div

describe how to create a basic navigation menu using HTML5 divs

describe how to use CSS3 to format a navigation menu in an HTML5 document

apply a background image to an HTML5 div menu

use CSS3 to change the mouse cursor when it is over an element in an HTML5 document

describe how to apply an animation to a div image on a mouse hover in HTML5

create a navigation menu using the HTML5 nav tag

create a flyout menu using CSS3 and HTML5 lists

apply a gradient fill to an HTML5 list

use the common CSS3 formatting strategies to provide an ordered and visually pleasing layout to your HTML5 page

Course Number:
wd_htme_a06_it_enus

Expertise Level
Intermediate