HTML5 Layout with CSS3

This course is included in our On-demand training solution.

Overview

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

120 min.

Course Objectives

Course Introduction

Setting the Text Direction in an HTML5 Document

  • apply a direction to text in an HTML5 document
  • Rotating Text with CSS3 in an HTML5 Document

  • apply a rotation to text in an HTML5 document
  • Rotating Divs with CSS3 in an HTML5 Document

  • apply a rotation to divs in an HTML5 document
  • Aligning Text with CSS3 in an HTML5 Document

  • add an alignment to text in an HTML5 document
  • Positioning Text with CSS3 in an HTML5 Document

  • specify the position for text to appear in an HTML5 document
  • Positioning Objects with CSS3 in an HTML5 Document

  • specify the position for an object to appear in an HTML5 document
  • Setting HTML5 Divs to Overlap Using CSS3

  • create overlapping divs to provide visual layering in an HTML5 document
  • Using CSS3 Relative Positioning in HTML5 Documents

  • describe how and when relative positioning should be used in an HTML5 document
  • Using CSS3 to Overlap Text on an HTML5 Image

  • apply overlapping text to an image in an HTML5 document
  • Using Nested Divs to Create an HTML5 Navigation Bar

  • create a navigation bar by nesting divs in HTML5
  • Adding Basic Animation to HTML5 Divs Using CSS3

  • describe how to use divs and CSS3 to add basic animation to an HTML5 document
  • Using CSS3 to Turn HTML5 Divs into Buttons

  • create a clickable div that will act like an HTML5 button
  • Configuring HTML5 Divs to be Placed Side by Side

  • apply the necessary CSS styles in order to place divs side by side in an HTML5 document
  • Using CSS3 to Center an HTML5 Div Layout

  • add the CSS necessary to center a div layout in an HTML5 document
  • Modifying HTML5 Hyperlinks Using CSS3 Styles

  • use CSS3 to modify a hyperlink’s appearance in an HTML5 document
  • Setting Vertical Alignment for Div Contents

  • apply vertical alignment to the content of an HTML5 div
  • Adding a Basic Navigation Menu with Divs in HTML5

  • describe how to create a basic navigation menu using HTML5 divs
  • Formatting a Navigation Menu Using CSS3 in HTML5

  • describe how to use CSS3 to format a navigation menu in an HTML5 document
  • Adding a Background Image to a Div Menu in HTML5

  • apply a background image to an HTML5 div menu
  • Changing the Mouse Cursor Using CSS3 in HTML5

  • use CSS3 to change the mouse cursor when it is over an element in an HTML5 document
  • Animating a Div Image on Mouse Hover in HTML5

  • describe how to apply an animation to a div image on a mouse hover in HTML5
  • Using the HTML5 Nav Tag

  • create a navigation menu using the HTML5 nav tag
  • Creating Flyout Menus Using HTML5 Lists and CSS3

  • create a flyout menu using CSS3 and HTML5 lists
  • Applying a Gradient Fill to HTML5 Lists

  • apply a gradient fill to an HTML5 list
  • Exercise: Design an Effective Layout on a Web Page

    MONTHLY SUBSCRIPTION

    $129/month
     

    ANNUAL SUBSCRIPTION

    $1295/year

    Multi-license discounts available for Annual and Monthly subscriptions.