Call : (+91) 968636 4243
Mail : info@EncartaLabs.com
EncartaLabs

HTML5 and CSS3 Essentials

( Duration: 3 Days )

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

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

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

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

COURSE AGENDA

1

Overview of HTML5

  • 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
2

Fundamentals of HTML, XHTML, and CSS

  • 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
3

Formatting Text with CSS

  • 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
4

Basic (X)HTML Formatting

  • 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
5

CSS Layout

  • 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
6

Advanced CSS Layout

  • 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
7

Using HTML5 Markup

  • 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
8

Creating HTML5 Forms

  • 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
9

JavaScript and JQuery

  • 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
10

Working with Video and Audio Elements

  • Adding video
  • Adding support for more browsers
  • Adding fallback support for older browsers
  • Controlling a video with JavaScript
  • Adding audio
11

Working with Canvas

  • 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
12

Styling with CSS3

  • 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
13

CSS3 Media Queries and the Future of CSS3

  • 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
14

Offline Storage in HTML5

  • 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
15

HTML5 Geolocation

  • 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
16

HTML5 Drag and Drop

  • Drag and drop on the web
  • Cross-browser drag and drop
  • Transferring data with a drag and drop operation

Encarta Labs Advantage

  • One Stop Corporate Training Solution Providers for over 6,000 various courses on a variety of subjects
  • All courses are delivered by Industry Veterans
  • Get jumpstarted from newbie to production ready in a matter of few days
  • Trained more than 50,000 Corporate executives across the Globe
  • All our trainings are conducted in workshop mode with more focus on hands-on sessions

View our other course offerings by visiting https://www.encartalabs.com/course-catalogue-all.php

Contact us for delivering this course as a public/open-house workshop/online training for a group of 10+ candidates.

Top
Notice
X