HTML5 and CSS3 Internship
HTML5 is everywhere, and is a technology that can no longer be
ignored or treated as a mere extension of HTML4. HTML5 is a vast umbrella term
for modern Front End Engineering, namely JavaScript, Markup,
DeviceAPIs, and Styles. Almost anything you see in App Stores can
now be created with pure HTML5.
Although we will cover some of the most exciting features of
HTML5 such as geolocation, web sockets, local storage, Real Time
Communications(Web Workers, Web Socket), File / Hardware Access(Native Drag and
Drop, File System APIs, Geolocation, Device Orientation and Speech Input),
Semantics and Markup, Multimedia, Graphics (2D and 3D Effects) SVG and Canvas,
the focus of the course will be to help people understand the core principles
and best practices for creating websites and apps.
CSS3 is split up into “modules”. The old specification has been split into smaller pieces, and new ones are also added. Some of the most important CSS3 modules are Selectors, Box Model, Backgrounds and Borders, Text Effects, 2D/3D Transformations, Animations, and Multiple Column Layout.
HTML5 and CSS3 Training Course Prerequisite
- HTML, CSS and JavaScript
HTML5 and CSS3 Training Course Objectives
- As we jump into the course, let
me just give you the course objectives, the things that I’m trying
accomplish here, and the first thing is to introduce you to HTML5, and
really quite honestly, one of my objectives, HTML5 like everything that
has to do with the web.
- HTML5 is the ubiquitous platform for the web. Whether you’re a mobile web developer, an enterprise with specific business needs, or a serious game dev looking to explore the web as a new platform, HTML5 has something for you! HTML5 is making the web platform more powerful in a number of different areas.
- HTML5 and CSS3 Course Duration
- 30 Working days, daily one and half hours
HTML5 and CSS3 Course Content
Introduction to WEB
- W3C and W3C Members
- Why WHATWG?
- What is Web?
- HTML Basics
- Introduction
- Parts in HTML Document
- Editors
- Basic
- Elements
- Attributes
- Headings
- Basics
- Paragraphs
- Formatting
- Links
- Head
- CSS
- Images
- Tables
- JavaScript
- HTML XHTML
- HTML4 Drawbacks
HTML5 Introduction
- HTML5 HISTORY
- New Features and groups
- Backward Compatibility
- Why HTML5?
- Power of HTML5:
- m or mobi or touch domains
- Common Terms in HTML5
HTML5 Syntax
- The DOCTYPE:
- Character Encoding:
Obsolete Elements/Deprecated Elements
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <isindex>
- <noframes>
- <s>
- <strike>
- <tt>
- <u>
- <xmp>
HTML5 New Elements
- New Semantic/Structural Elements
- <article>
- <aside>
- <bdi>
- <command>
- <details>
- <dialog>
- <summary>
- <figure>
- <figcaption>
- <footer>
- <header>
- <mark>
- <meter>
- <nav>
- <progress>
- <ruby>
- <rt>
- <rp>
- <section>
- <time>
- The DOCTYPE:
- Images
-
HTML5 SVG
- What is SVG?
- SVG Advantages
- Differences Between SVG and Canvas
- Comparison of Canvas and SVG
HTML5 Drag/Drop
- Introduction
- Make an Element Draggable
- What to Drag?Where to Drop?
HTML5 Geo location
- Introduction
- Locate the User’s Position+
- Handling Errors and Rejections
- The getCurrentPosition()
- Geolocation object
HTML5 Video
- Introduction
- Video on the Web
- How It Works?
- Video Formats and Browser Support
- HTML5 Video Tags
HTML5 Audio
- Introduction
- Audio on the Web
- How It Works?
- Audio Formats and Browser Support
- HTML5 Audio Tags
- HTML5 Input Types
- Introduction
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
- What is SVG?
- W3C and W3C Members
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, min and max
- multiple
- pattern (regexp)
- placeholder
- required, step
HTML5 Semantic
- Introduction
- What are Semantic Elements?
- non-semantic elements: <div> and <span>
- semantic elements: <form>, <table>, and
<img>
- New Semantic Elements in HTML5
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <figcaption>
- <figure>
- <footer>
HTML5 Web Storage
- What is HTML5 Web Storage?
- Browser Support
- The localStorage Object
- The sessionStorage Object
HTML5 App Cache
- What is Application Cache?
- Cache Manifest Basics
- HTML5 Cache Manifest
HTML5 Web Workers
- What is a Web Worker?
- Check Web Worker Support
- Create a Web Worker File
- Terminate a Web Worker
HTML5 SSE
- One Way Messaging
- Browser Support
- The EventSource Object
HTML Media
- New Media Elements
- <audio>
- <video>
- <source>
- <embed>
- <track>
HTML Multimedia
- What is Multimedia?
- Browser Support
- Multimedia Formats
- Video Formats
- Sound Formats
HTML5 – MathML
- Introduction
- Using MathML Characters
- Matrix Presentation
- Math Formulas
CSS 1.0 and 2.0
- CSS Basics
- CSS Introduction
- CSS Syntax,CSS Id, Class and CSS Styling,Styling
Backgrounds
- Styling Text,Styling Fonts, Links, Styling Lists and
Styling Tables
- CSS Border
CSS3
- Introduction
- CSS3 Modules
- Selectors
- Box Model
- Backgrounds and Borders
- Text Effects
- 2D/3D Transformations
- Animations
- Multiple Column Layout
- User Interface
Borders
- border-radius
- box-shadow
- border-image
CSS3 Backgrounds
- background-size
- background-origin
CSS3 Text Effects
- text-shadow
- word-wrap
CSS3 Fonts
- @font-face Rule
- font-stretch
font-weight
CSS3 2D Transforms
- How Browser Support
- 2D Transforms
- translate()
- rotate()
- scale()
- skew()
- matrix()