HTML5 CSS3 with Bootstrap Training

HTML5 & CSS3 with Bootstrap Training Overview

Bootstrap is an open-source JavaScript framework which is the combination of HTML5, CSS3 and JavaScript programming language to build user interface components. Bootstrap is mainly developed to provide more and more advanced features for developing the website within a short period of time.

Objectives of the Course

• Gain enough knowledge on HTML5 and CSS3
• Learn how to create website
• Learn how to download and install bootstrap into the website
• Learn to make a website much more responsive

Pre-requisites

• Basic HTML knowledge

Who should do the course

• Anyone who has basic IT Knowledge
• Aspirants those who are interested to learn the course

HTML5 & CSS3 with Bootstrap Course Content

Introduction to WEB

• W3C and W3C Members
• Why WHATWG?
• What is Web?

HTML Basics

• Introduction
• Parts in HTML Document
• Editors
• Elements
• Attributes
• Headings Styles
• Basics
• Paragraphs
• Formatting
• Links
• Head

HTML4 Drawbacks

HTML5 Introduction

• Introduction
• HTML5 HISTORY
• New Features and groups
• Backward Compatibility
• Why HTML5?
• Power of HTML5
• m or mobi or touch domains
• Common Terms in HTML5
• Structure of HTML5 Document

HTML5 Syntax

• The DOCTYPE:
• Character Encoding:
• Dynamic Attributes
• Standard Attributes
• HTML5 – Fonts Reference
• HTML5 – Character Encodings

DTD – Overview

• Types
• Features
• Advantages of using DTD
• Disadvantages of using DTD

Obsolete Elements/Deprecated Elements

• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <isindex>
• <noframes>
• <s>
• <strike>
• <tt>
• <u>
• <xmp>

Deprecated Attributes in HTML5

• rev
• charset
• shape
• coords
• longdesc
• target
• nohref
• profile
• version
• name
• scheme
• archive
• classid
• codebase
• codetype
• declare
• standby
• valuetype
• type
• axis…!!

HTML5 Events

• offline
• oncontextmenu
• ondrag
• ondragend
• ondragenter
• ondragleave
• ondragover
• ondragstart
• ondrop
• ondurationchange
• onoffline
• ononline etc..

HTML5 Attributes

• accesskey
• contenteditable
• draggable
• spellcheck
• subject
• title etc..

HTML5 Replaced Elements

• <abbr>
• <object>
• <iframe>
• <del>
• <pre>

HTML5 New Elements (More meaningful elements)

• Introduction
• HTML5 Document
• New Semantic/Structural Elements
• <article>
• <aside>
• <bdi>
• <bdo>
• <command>
• <details>
• <summary>
• <figure>
• <figcaption>
• <footer>
• <header>
• <nav>
• <ruby>
• <rt>
• <rp>
• <section>
• <wbr>

HTML5 New inline elements

• <meter>
• <mark>
• <progress>
• <time>

HTML5 Input Types (More meaningful elements)

What is a Webform?(Web Forms 2.0)

• Introduction
• color(color chooser)
• date (popup calendar)
• datetime (datetime chooser)
• datetime-local (datetime chooser)
• email (Email Entry)
• month (month year chooser)
• number (spinner)
• range (slider)
• search (Search Query Input)
• tel Telephone Input)
• time (TimeSelector)
• url (URL Entry)
• week (WeekChooser)

HTML5 Form Elements

• <datalist>
• <keygen>
• <output>

HTML5 Form Attributes

New attributes for <form> and <input>

New attributes for <form>

• autocomplete
• novalidate

New attributes for <input>

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list (autocompleting suggest box)
• min and max
• multiple
• pattern (regexp)(Validating TextFields)
• placeholder (TextFieldswithTemporaryHints)
• required (TextFields with Required Values[non-empty])
• step

HTML5 Canvas HTML5-GRAPHICS (2D and 3D Effects)

• Introduction
• What is Canvas?
• Create a Canvas
• Canvas Coordinates
• Canvas – Paths (lines, circles)
• Canvas – Text
• Canvas – Gradients
• Canvas – Images
• createLinearGradient
• createRadialGradient

HTML5 SVG HTML5-GRAPHICS (2D and 3D Effects)

• Introduction
• What is SVG?
• SVG Advantages
• Differences Between SVG and Canvas
• Comparison of Canvas and SVG
• Why SVG?
• SVG Shapes
• Rectangle
• Circle
• Ellipse
• Line
• Polyline
• Polygon
• Path

HTML5 Drag/Drop (Deeper Integration with OS)

• Introduction
• Make an Element Draggable
• What to Drag? Where to Drop?
• Drag and Drop Events

HTML5 Geolocation(Deeper Integration with OS)

• Introduction
• Locate the User’s Position
• Handling Errors and Rejections
• The getCurrentPosition()
• Geolocation object
• Reading users location

HTML5 Multimedia (playing video and audio is easier than ever)

• Introduction
• What is Multimedia?
• Browser Support
• Multimedia Formats
• Video Formats
• Sound Formats
• What is Ogg format?

HTML55 Media (playing video and audio is easier than ever)

• Introduction
• New Media Elements
• What is Ogg?
• <audio>
• <video>
• <source>
• <embed>
• <track>
• Web
• YouTube in HTML5

HTML5 Video (playing video and audio is easier than ever)

• Introduction
• Video on the Web
• Video with JS
• How It Works?
• Video Formats and Browser Support
• HTML5 Video Tags

HTML5 Audio (playing video and audio is easier than ever)

• Introduction
• Audio With JS
• Audio on the Web
• How It Works?
• Audio Formats and Browser Support
• HTML5 Audio Tags

WebRTC (Real-time Communication between Browsers) (Stay connected)

• HISTORY OF WEBRTC
• WebRTC Architecture
• What is WebRTC?
• KeyFeatures
• AppEngine
• SIP
• Capturing Audio & Video in HTML5
• HTML Media Capture
• What is twinsee?

HTML5 Web Storage (Expect the unexpected)

• Introduction
• What is HTML5 Web Storage?
• Browser Support
• The localStorage Object
• The sessionStorage Object

HTML5 App Cache (Offline Storage)

• Introduction
• What is Application Cache?
• What is Offline Storage?
• Cache Manifest Basics
• HTML5 Cache Manifest

HTML5 Web Workers (Background JavaScript)

• Introduction
• What is a Web Worker?
• Check Web Worker Support
• Create a Web Worker File
• Terminate a Web Worker

HTML5 SSE (One Way Messaging)

• Introduction
• What is Server Sent Events?
• One Way Messaging
• Browser Support
• The EventSource Object

HTML5 Microdata(More meaningful elements)

• Introduction
• Microdata common formats
• Properties Datatypes
• Microdata Vocabulary
• WHATWG HTML spcification

HTML5 Web Workers (Stay connected)

• Introduction
• What is a Web Worker?
• How Web Workers Work?
• Stopping Web Workers
• Handling Errors

HTML5 – WebSockets (Stay connected)

• Introduction
• WebSocket Attributes
• WebSocket Events
• WebSocket Methods

HTML5 – Web SQL Database

• Introduction
• The Core Methods
• Opening Database
• Executing queries

File / Hardware Access (Deeper integration with the Operating System)

• Introduction
• FileSystem APIs
• Device Orientation:
• Speech Input:

HTML5 –MathML (Integrating Mathematical formulas  in Web)

• Introduction
• MathML Versions
• Features of MathML
• List of MathML Tags
• Presentation MathML
• Namespace
• Using MathML Characters
• Matrix Presentation
• Math Formulas

CSS 1.0 and 2.0

• Introduction
• CSS Basics
• CSS Introduction
• CSS Syntax
• CSS Versions
•  CSS Id & Class
• CSS Styling
• Styling Backgrounds
• Styling Text
• Styling Fonts
• Styling Links
• Styling Lists
• Styling Tables
• CSS Borders
• CSS3 Browser Support

CSS3 (Presentation & Styling)

• Introduction
• CSS3 Modules
• Selectors
• Box Model
• Backgrounds and Borders
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface

Borders

• Introduction
• border-radius
• box-shadow
• border-image

CSS3 Backgrounds

• Introduction
• background-size
• background-origin
• background-clip

CSS3 Text Effects

• Introduction
• text-shadow
• word-wrap
• word-break
• CSS3 hanging-punctuation

CSS3 Fonts

• Introduction
• @font-face Rule
• font-stretch
• font-weight
• font-style

CSS3 2D Transforms

• Introduction
• How does it Work?
• Browser Support
• 2D Transforms
• translate()
• rotate()
• scale()
• skew()
• matrix()

CSS3 3D Transforms

• Introduction
• rotateX()
• rotateY()

CSS3 Transitions

• Introduction
• How does it work?
• transition-property
• transition-duration
• transition-delay

CSS3 Animations

• Introduction
• CSS3 @keyframes Rule
• Browser Support
• Animation, animation-duration

CSS3 Multiple Columns

• Introduction
• column-count
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width

CSS3 User Interface

• Introduction
• resize
• box-sizing
• outline-offset
• appearance Property
• nav-down

PhoneGap

• Introduction to PhoneGap
• Why PhoneGap?
• PhoneGap and 7 mobile Environments
• PhoneGap Build

Twitter Bootstrap (Powerful mobile front-end framework)

• What is Twitter Bootstrap?
• History
• Why use Bootstrap?
• What Bootstrap Package Includes?

Download Bootstrap

• File structure
• PRECOMPILED BOOTSTRAP
• Basic Examples

Bootstrap Grid System

• What is a Grid?
• What is Bootstrap Grid System?
• MOBILE FIRST STRATEGY
• Working of Bootstrap Grid System
• Media Queries

Grid options

• Responsive column resets
• Offset columns
• Nesting columns
• Column ordering

Bootstrap CSS Overview

• HTML5 doctype
• Mobile First
• Responsive images
• Typography and links
• Normalize
• Containers

Bootstrap Typography

• Headings
• INLINE SUBHEADINGS
• Emphasis
• Abbreviations
• Addresses
• Blockquotes
• Lists

Bootstrap Tables

• Basic Table
• Optional Table Classes
• STRIPED TABLE
• BORDERED TABLE
• HOVER TABLE
• CONDENSED TABLE
• Contextual classes
• Responsive tables

Bootstrap Forms

• Form Layout
• VERTICAL OR BASIC FORM
• INLINE FORM
• HORIZONTAL FORM
• Supported Form Controls
• CHECKBOXES AND RADIOS
• SELECTS
• Form Control States
• Form Control Sizing
• Help Text

Bootstrap Buttons

• Button Size
• Button State
• DISABLED STATE
• Button Tags

Bootstrap Images

• .img-rounded
• .img-circle
• .img-thumbnail

Bootstrap Helper Classes

• Close icon
• Carets
• Quick floats
• Center content blocks
• Clearfix
• Showing and hiding content
• Screen reader content

Bootstrap Responsive utilities

• visible-xs
• visible-sm
• visible-md
• visible-lg

Print classes

• .visible-print
• .hidden-print

Bootstrap Glyphicons

• What are Glyphicons?
• Where to find Glyphicons?

Bootstrap Dropdowns

• Options
• ALIGNMENT
• HEADERS

Bootstrap Button Groups

• Basic Button Group
• Button Toolbar
• Button Size
• Nesting
• Vertical Buttongroup

Bootstrap Button Dropdowns

• Split Button Dropdowns
• Button Dropdown Size
• Dropup variation

Bootstrap Input Groups

• Basic Input Group
• Input Group Sizing
• Checkboxes and radio addons
• Button addons
• Buttons with dropdowns
• Segmented buttons

Bootstrap Navigation Elements

• Tabular Navigation or Tabs
• Pills Navigation
• VERTICLE PILLS
• Justified Nav
• Disabled Links
• Dropdowns
• PILLS WITH DROPDOWNS

Bootstrap Navbar

• Default navbar
• Responsive navbar
• Forms in navbar
• Buttons in navbar
• Text in navbar
• Non-nav links
• Component alignment
• Fixed to top
• Fixed to bottom
• Static top
• Inverted navbar
• Bootstrap Breadcrumb

Bootstrap Pagination

• Pagination
• DEFAULT PAGINATION
• STATES
• SIZING
• Pager
• ALIGNED LINKS
• STATES
• Bootstrap Labels

Bootstrap Badges

• Bootstrap Jumbotron
• Bootstrap Page Header
• Bootstrap Thumbnails

Bootstrap Alerts

• Dismissal Alerts
• Links in Alerts

Bootstrap Progress Bars

• Default Progress Bar
• Alternate Progress Bar
• Striped Progress Bar
• Animated Progress Bar
• Stacked Progress Bar

Bootstrap Media Object

• .media
• .media-list

Bootstrap List Group

• Adding Badges to List Group
• Linking List Group Items
• Add Custom Content to List Group

Bootstrap Panels

• Panel with heading
• Panel with footer
• Panel Contextual alternatives
• Panel with tables
• Panel with Listgroups

Bootstrap Wells

• well
• Sizing

Bootstrap Plugins Overview

• Data Attributes
• Events
• Bootstrap Transition Plugin
• Bootstrap Modal Plugin
• Bootstrap Dropdown Plugin
• Bootstrap Scrollspy Plugin
• Bootstrap Tab Plugin
• Bootstrap Tooltip Plugin
• Bootstrap Popover Plugin
• Bootstrap Alert Plugin
• Bootstrap Button Plugin
• Bootstrap Collapse Plugin
• Bootstrap Carousel Plugin
• Bootstrap Affix Plugin