HTML5 and CSS3 Course Contents

Duration: 24 hours

Prerequisite - Basic HTML has no prerequisites in any formal education. HTML is text-based computer-coding that can be made and run.

Course Objective -

• Use HTML5 and CSS3 to build responsive websites that render well on a variety of devices
• Work with images, including thumbnails, rollovers, and image maps
• Create tables
• Work with forms and the HTML5 validation features
• Add audio and video to your pages 
• Use embedded fonts 
• Format web pages for printing
• Use the CSS3 features for transitions, animation, transforms, and filters
• Use JavaScript and jQuery to enhance their web pages (as time permits)

Lab Setup Details :
Hardware requirement: 

CPU :   I4/I5 , Hard Disk : 50GB , RAM :8 GB
 

Software Requirement:

   - XAMPP  https://www.apachefriends.org/download.html  (DOWNLOAD VERSION 5.6.31)
   - MSOFFICE 2010
   - NOTEPAD++  https://notepad-plus-plus.org/download/v7.5.1.html (DOWNLOAD VER 7.5.1)
   - SUBLIME TEXT3 https://www.sublimetext.com/3
   - Visual Studio Code https://code.visualstudio.com/download
   - PDF READER https://adobe-reader.en.softonic.com/download
   - Browser Google Chrome  OS Window 10
 

Course Outline

Day 1
Intro to Front End Engineering   
•    Vision for HTML5
•    Mobile web is the web
•    How HTML5 integrates with everything
•    Front End Engineering is not an island
•    Basic Markup

•    Introducing HTML5
•    The Story of HTML5
•    Three Key Principles of HTML5
•    Your First Look at HTML5 Markup
•    A Closer Look at HTML5 Syntax
•    HTML5’s Element Family
•    Using HTML5 Today
•    New Way to Structure Pages
•    Retrofitting a Traditional HTML Page
•    Designing a Site with the Semantic Elements
•    The HTML5 Outlining System
•    Basic Markup   
•    What is semantic markup, what we dropped from HTML4 and why
•    New Tags in HTML5
•    Doctype and charsets
•    Essential Meta Information
•    Web Developer Tools
•    Overview of the DOM
•    Putting your first HTML5 webpage online
•    Basic Versioning
•    Validating your code, and browser issues
•    Accessibility
•    Basic Selecting and Styling Basic Selecting and Styling   
•    How to select elements in the DOM with CSS
•    How to manipulate the page using the Cascade
•    Block and Inline elements
•    Floats, positioning, borders, margins, padding and text
•    Understanding the viewport

Day 2
Creating Modern Web Pages
•    Forms, Refined
•    Understanding Forms
•    Revamping a Traditional HTML Form
•    Validation: Stopping Errors
•    New Types of Input
•    New Elements
•    An HTML Editor in a Web Page
•    Audio and Video
•    Understanding Video Today
•    Introducing HTML5 Audio and Video
•    Format Wars and Fallbacks
•    Controlling Your Player with JavaScript
•    Basic Drawing with the Canvas
•    Getting Started with the Canvas
•    Building a basic Paint Program
•    Browser Compatibility for the Canvas
Building Web Apps with Desktop Smarts
•    Data Storage
•    Web Storage Basics
•    Deeper into Web Storage
•    Reading Files
•    Offline Applications
•    Caching Files with a Manifest
•    Practical Caching techniques
•    Communicating with the Web Server
•    Sending Messages to the Web Server
•    Server-Sent Events
•    Web Sockets
•    More Cool JavaScript Tricks
•    Geolocation
•    Web Workers

Day 3
Basic JavaScript   
•    Variables
•    Arrays
•    Strings
•    Loops
•    If/else and equivalence
•    Object Literals
•    JSON
•    Functions
•    Scope and Hoisting
Intermediate Markup   
•    Effective positioning of your scripts
•    Good uses of the head tag
•    Importing vs linking
•    Anchoring
•    More Meta Tags
•    Inserting Analytics
Intermediate Selecting and Styling   
•    Using web developer tools for live styling
•    CSS3 selectors
•    CSS3 properties
•    CSS3 hints and gotchas
•    Custom styles and conditional hacks
•    The 20% of CSS3 that you will use 80% of the time
•    Advanced Markup and SVG

Day 4
Advanced Markup and SVG   
•    Even more meta tags
•    SEO outlining
•    Microformats
•    Advanced SVG
•    ARIA
•    Device listening (@media)
•    Working with third party fonts
•    Retina versioning
•    Advanced Selecting and Styling
Advanced Selecting and Styling   
•    Gylphs and Font Icons
•    Effective use of multiple background images
•    Gotchas for nth-of and other static selectors
•    Advanced positioning techniques
•    Border gotchas, grids, tables, and flex boxes
•    Resetting Techniques
•    Optimization
•    CSS3 Fallback best practices
•    Advanced styling with before and after filter injection
•    HTML entities
•    API Code Overview

Download Course Content || Request For the Training || My KeySkills || Contact Me