HTML5 AND CSS3
Create rich dynamic webpages and applications using HTML, CSS and JavaScript.
[courseCodeMB]
Overview
This course imparts learning on HTML5 and discovers how to incorporate its countless features in web pages and applications.
This training is to ensure smooth knowledge transfer for basic to HTML5 advanced topics like Layouts, Forms, Offline Support, Geolocation, Audio and Video graphics, Communication APIs, Storage, JavaScript Web-Workers and others.
Schedule Classes
Looking for more sessions of this class?
What You'll learn
Curriculum
- Introduction to WEB
- HTML Basics
- HTML5 Introduction
- HTML5 Syntax
- Obsolete Elements/Deprecated Elements
- HTML5 New Elements
- HTML5 Canvas
- HTML5 SVG
- HTML5 Drag/Drop
- HTML5 Geolocation
- HTML5 Video
- HTML5 Audio
- HTML5 Input Types
- HTML5 Form Elements
- HTML5 Form Attributes
- HTML5 Semantic
- HTML5 Web Storage
- HTML5 App Cache
- HTML5 Web Workers
- HTML5 SSE
- HTML Media
- CSS3 User Interface
- CSS 1.0 and 2.0
- HTML5 – MathML
- HTML Multimedia
- CSS3
- Borders
- CSS3 Fonts
- CSS3 Text Effects
- CSS3 Backgrounds
- CSS3 2D Transforms
- CSS3 3D Transforms
- CSS3 User Interface
- CSS3 Multiple Columns
- CSS3 Animations
- CSS3 Transitions
- W3C and W3C Members
- What is Web?
- Introduction to HTML
- Parts of HTML Document
- Editors
- Basic
- Elements
- Attributes
- Headings
- Basics
- Paragraphs
- Formatting
- Links
- Head
- CSS
- Images
- Tables
- JavaScript
- HTML XHTML
- HTML4 Drawbacks
- HTML5 HISTORY
- New Features and groups
- Backward Compatibility
- Power of HTML5
- m or mobi or touch domains
- Common Terms in HTML5
- The DOCTYPE
- Character Encoding
- <acronym>
- <basefont>
- <applet>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <s>
- <u>
- <isindex>
- <noframes>
- <strike>
- <tt>
- <xmp>
- New Semantic/Structural Elements
- <article>
- <aside>
- <bdi>
- <command>
- <details>
- <dialog>
- <summary>
- <figure>
- <figcaption>
- <footer>
- <header>
- <mark>
- <meter>
- <nav>
- <progress>
- <ruby>
- <rt>
- <rp>
- <section>
- <time>
- <wbr>
- What is Canvas?
- Creating a Canvas
- Canvas Coordinates
- Canvas – Paths
- Canvas – Text
- Canvas – Gradients
- Canvas – Images
- What is SVG?
- Advantages of SVG
- Differences in Canvas and SVG
- Comparison in Canvas and SVG
- Introduction
- Make an Element Draggable
- What to Drag? Where to Drop?
- Introduction to Geolocation
- Locating User’s Position
- Handling Errors and Rejections
- The getCurrentPosition()
- Geolocation object
- Introduction to HTML5 Video
- Video on the Web
- How HTML5 Video Works
- Video Formats and Browser Support
- HTML5 Video Tags
- Introduction to HTML5 Audio
- Audio on the Web
- How HTML5 Audio Works
- Audio Formats and Browser Support
- HTML5 Audio Tags
- Introduction to Input types
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
- <datalist>
- <keygen>
- <output>
- New attributes for <form> and <input>New attributes for <form>:
- Autocomplete
- novalidate
- 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>
- What is HTML5 Web Storage?
- Browser Support in HTML5
- Objects
- The localStorage
- The sessionStorage
- What is Application Cache?
- Basics of Cache Manifest
- Cache Manifest in HTML5
- Web Worker in HTML5
- Checking Web Worker Support
- Creating Web Worker Files
- Terminating Web Worker
- One Way Messaging
- Browser Support
- The EventSource Object
- New Media Elements
- <audio>
- <video>
- <source>
- <embed>
- <track>
- resize
- box-sizing
- outline-offset
- 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
- Introduction
- Using MathML Characters
- Matrix Presentation
- Math Formulas
- What is Multimedia?
- Browser Support
- Multimedia Formats
- Video Formats
- Sound Formats
- Introduction
- CSS3 Modules
- Selectors
- Box Model
- Backgrounds and Borders
- Text Effects
- 2D/3D Transformations
- Animations
- Multiple Column Layout
- User Interface
- border-radius
- box-shadow
- border-image
- @font-face Rule
- font-stretch
- font-weight
- text-shadow
- word-wrap
- background-size
- background-origin
- How does it Work?
- Browser Support
- 2D Transforms
- translate()
- rotate()
- scale()
- skew()
- matrix()
- rotateX()
- rotateY()
- resize
- box-sizing
- outline-offset
- column-count
- column-gap
- column-rule
- CSS3 @keyframes Rule
- Browser Support
- Animation, animation-duration
- How does it work?
- Transition-property, duration and delay
Prerequisites
Interested in this course? Let’s connect!
Course features
