HTML5 and CSS3 essentials

By attending HTML5 and CSS3 workshop, Participants will learn to:

  • Build effective web sites with HTML5
  • Comprehend the benefits of CSS3 to web pages
  • Acknowledge browser variations in handling CSS

In HTML5 and CSS3 training course, Participants will gain an understanding of the latest approaches to web site design and consistency. Through hands-on labs, they will build a small business website of their own. Participants will work with images and learn to add formatting and style with CSS to encourage consistency and easy editing in website design.

  • Knowledge of Windows or OS X Operating System and basic computer navigation

COURSE AGENDA

  • Web languages
  • Web page structure is based on HTML
  • Details of XHTML syntax
  • Doctype lets the web browser know what to expect
  • W3C and page validation
  • HTML structure
  • Placing images in HTML
  • Role of CSS
  • Styling a heading
  • Class styles and theelement
  • Three ways to use styles
  • Internal vs. external style sheet
  • What makes styles cascading
  • Defining HTML5
  • HTML5 markup
  • Key HTML5 elements
  • Web forms
  • New HTML5 elements
  • HTML5 APIs and supporting technologies
  • Geolocation in action
  • Web workers
  • Web storage
  • CSS animations
  • CSS transitions
  • CSS 2D and 3D transformations
  • CSS3 backgrounds, borders, RGB colors, gradients, drop shadows, and rounded corners
  • @font-face web fonts
  • HTML5 is in a state of transition
  • Who is using HTML5 today?
  • Identifying HTML5 sites
  • Importance of typography on the w
  • Challenges of fonts on the web
  • Setting a font-family
  • Sizing text with CSS
  • Pixels and points are not the best choices
  • Using a combination of percent and the em measurement
  • Using margins to modify space between your text
  • Setting paragraph line-height
  • Transforming text with CSS
  • Working with HTML lists
  • Styling HTML lists
  • Making Text Bold or Italic
  • Changing the Size of Text and Using a Monospaced Font
  • Using Preformatted Text
  • Quoting, Superscripts, and Subscripts
  • Marking Changed Text
  • Working with the CSS reset file
  • Brief history of layout techniques on the Web
  • Page layout options
  • element: creating a two-column fixed-width CSS layout
  • CSS float property
  • Creating columns with the float property
  • Working with the clear property
  • Creating a list-based navigation using floats
  • Adding text styles
  • Effect of margins and padding on your fix-width layout
  • Using margins and padding for layout
  • Styling your footer with a background image
  • Building your page layout
  • Removing the background color
  • Working with CSS background images
  • Using hacks to solve layout problems
  • Enhancing your CSS navigation bar
  • Moving internal styles to the external style sheet
  • Creating a style for the active page
  • Adding images to your sidebar
  • Working with absolute positioning
  • Semantic markup
  • HTML5
  • HTML5 DOCTYPE declaration
  • Different categories used for HTML5 content
  • Using the new header element in HTML5
  • Adding support for HTML5 elements in browsers
  • Adding the HTML5 elements
  • Adding the other HTML5 sectioning elements
  • HTML5 document outlines
  • Adding the footer element
  • Adding the article and aside elements
  • Additional HTML5 elements
  • Revisiting familiar HTML elements
  • Need for updated forms
  • Forms
  • Components of a form
  • Adding new HTML5 input types and attributes
  • Creating an order form with new HTML5 input type and attributes
  • HTML5 form features under development
  • Providing fallbacks for browsers that don’t support HTML5 features
  • Interactivity on the Web
  • Adobe Flash
  • JavaScript
  • JavaScript basics
  • JavaScript events
  • Placing your JavaScript into an external document
  • The Document Object Model
  • JavaScript frameworks
  • Hiding an element with JQuery
  • Adding an event trigger to show effect
  • Adding video
  • Adding support for more browsers
  • Adding fallback support for older browsers
  • Controlling a video with JavaScript
  • Adding audio
  • Canvas element
  • Benefits of the Canvas element
  • Drawing paths
  • Drawing rectangles
  • Drawing lines and circles
  • Drawing curves
  • Adding text
  • Using colors, styles and gradients
  • Adding images
  • Using transforms
  • Creating a drawing loop
  • Role of CSS3
  • Using CSS3 border-radius and border-image
  • Adding multiple background images
  • Working with CSS3 transparency and opacity
  • Using CSS3 gradients
  • CSS3 gradients potential for the future
  • CSS3 transforms, transitions, and animations
  • CSS3 transforms and transitions
  • Working with CSS3 animations
  • Working with web fonts
  • Using @font-face to specify a web font
  • Using a web service to generate multiple fonts
  • Alternative methods for adding web fonts
  • Role of CSS3 media queries
  • Using CSS3 media queries to deliver a mobile-optimized layout
  • Upcoming developments of CSS3
  • CSS3 multi-column layout
  • CSS3 Flexible Box layout module
  • CSS3 template layout module
  • Adding template-based position to CSS3
  • Offline storage in HTML5
  • HTML5 storage types
  • LocalStorage methods and example
  • Advanced data storage
  • Application caching
  • Cache manifest file
  • Cache manifest structure
  • Updating the cache
  • ApplicationCache object
  • Geolocation
  • Getting the user’s location
  • Displaying the user’s location with Google Maps
  • Browsers lacking HTML5 Geolocation
  • Creating a HTML5 Geolocation and Google Maps mashup
  • Adding Google Map markers to your geolocation page
  • Drag and drop on the web
  • Cross-browser drag and drop
  • Transferring data with a drag and drop operation

Copyright © 2025 All Rights Reserved by Cuesys Infotech.

Designed By  99 DESIGN AGENCY