Course Details

Previous Page


HTML5 Layout with CSS3


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



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