HTML5 & CSS Training Program

HTML

• What is HTML

• What is a Web Browser

• What are Versions of HTML

• What can you Do with HTML

• HTML Development Environments

• Writing Code with a Text Editor

Review of HTML Elements

• Rules of Syntax

• Making your Code Readable

• Building a Document

• Using Colors

• Adding Color to your Page

• Using Headings

• Using Paragraphs

• Aligning Block-Level Elements

Inserting Spaces and Line Breaks

• Displaying Preformatted Text

• Formatting with Inline Elements

• Controlling Fonts

• Introducing List Elements

• Creating Unordered Lists

• Creating Ordered Lists

• Nesting Lists

What is an HTML Table

• Building a Table

• Cell Padding and Cell Spacing

• Controlling Table and Cell Width

• Aligning a Table on the Page

• Aligning Tables and Text

• Aligning Table Data

• Spanning Columns and Rows

Creating a Hyperlink

• Understanding and Using URLs

• Linking to a Web Document

• Linking to a Local Document

• Linking to Anchors

• Opening a New Browser Window

Image Formats

• Inserting Inline Images

• Aligning Images

• Using Images to Anchor Links

• Sizing Images

• Using Transparent Images

• Using GIF Animation

Forms and Controls

• Forms and Form Elements

• Form Actions, Form Methods, Form Design

Introduction

• Laying out a page with HTML5

• Page Structure

• New HTML5 Structural Tags

• Page Simplification

HTML 5 - How we got here

• New Features of HTML5

• The HTML5 Semantic Element

• Current State of Browser Support

SECTIONS AND ARTICLES

• The section Tag

• The article Tag

• The header Tag

• The Footer Tag

HTML5 AUDIO AND VIDEO

• Supported Media Types

• The audio Element

• The video Element

HTML5 FORMS

• New Input Types

HTML5 NEW FORM ATTRIBUTES

• autocomplete

• novalidate

HTML5 NEW FORM FIELD ATTRIBUTES

• required

• placeholder

• autofocus

• autocomplete

• form

• pattern

CSS 2.0

• Introduction of CSS

• CSS Syntax

• CSS Comments

• CSS Types
• Inline
• Internal
• External

• CSS Selector
• ID
• Class
• Attribute
• Grouping
• Universal

• CSS Color
• RGB Value
• Hex Value
• Color Name

• Background
• background-color
• background-repeat
• background-attachement
• background position
• background-size
• background-image

• CSS Margin
• Margin-top
• Margin-bottom
• Margin-left
• Margin-Right

• CSS Padding
• Padding -top
• Padding -bottom
• Padding -left
• Padding –Right

• Outline
• Outline-style
• Outline-color
• Outline Width
• Outline-Offset
• Outline Shorthand Property

• CSS Height and Width

• CSS Display properties

• CSS Position Properties

• CSS Overflow

• CSS Float and Clear

• Pseudo Class and Element

Introduction to CSS 3

• Border

• border-radius

CSS Shadows

• Text-shadow

• Box-shadow

Transitions

• transition

• transition-delay

• transition-duration

• transition-property

2D Transforms

• transform

• matrix ()

• translate (x, y)

• scale (x, y)

• rotate(angle)

• skew (x-angle, y-angle)

Animations

• @keyframes

• animation

• animation-direction

• animation-duration

• animation-name

Selectors

• CSS combinations

• Pseudo Elements

Gradients

• Linear Gradients

• Radial Gradients

User Interface

• resize

• box-sizing

• outline-offset

CSS Filters

• Blur

• Opacity

Media Query

• What is Responsive Web Design

• Intro to the Viewport

• The Viewport Tag

• Media Queries

• Tablet Styles

• Mobile Styles

• Making a Mobile Drop-down Menu

Web Fonts

• @font-face

• font-family

• src

• font-stretch

• font-style

• font-weight

Flexbox

• flex-grow

• flex-shrink

• flex-basis

• flex

• flex-wrap

• flex-direction

• flex-flow

• justify-content

• align-items

• order