Description

HTML5 and CSS3: Website Development provides Web Designers with the knowledge and hands-on practice they need to build and manage professional websites using HTML5 and CSS3, which can be implemented in future-rich web browsers on iPhones, Android Phones and WebOS Phones thereby allowing mobile web developers to build websites that surpass desktop equivalents.

Eligibility

This course is for people who are new to web design and development or existing web developers who want to use HTML 5 and CSS3 to build intuitive, attractive and accessible web sites.

Day 1: Fundamentals of HTML5 and CSS

Duration: 1 day | 8 hrs

In this module you will learn fundamentals of HTML5 and Web standards. You will also learn CSS so that you can create web pages and web layouts.

Eligibility / Audience:

You should know computer operating and fundamentals of Internet.

Unit 1: Introduction to the Web

• Browsers & Server
• What is HTML, XHTML & HTML5?
• What is CSS?
• Browser Support available
• Creating a folder structure for a site

Unit 2: Getting started in HTML5

• Doctype
• Basic tags
• Attributes
• HTML Entities
• Container vs Standalone Tags
• Block vs Inline Tags
• Using Images in HTML
• Using Tables
• Creating Links
• Lab Exercise

Unit 3: Getting started with CSS

• What is CSS
• CSS concept
• Types of CSS
• CSS Syntax

Unit 4: Introduction to Box Model

• Understanding Box Model
• Margin & Padding
• Using Float Property
• Positioning Elements
• Using display property
• Lab Exercise

Unit 5: CSS Selectors

• .class
• #id
• *
• Element selector
• Group selector
• Lab Exercise
• Descendant selector
• Child selector
• Attribute selector
• Pseudo selector
• Pseudo Element Selector

Day 2 & 3: CSS3 and Media Queries

Duration: 2 day | 16 hrs

In this module you will learn CSS3 and how to build responsive web pages for multiple devices using Media Queries.

Eligibility / Audience:

You should know fundamentals of HTML5 and CSS or you should have completed our Day 1 training.

Unit 1: Converting PSD To HTML

• Creating Web Layout
• Slicing

Unit 2: Using HTML5 Semantic Tags

• Creating layout using new HTML5 tag
• Applying Fallback support for older browser

Unit 3: HTML5 Media Support

• Video
• Audio

Unit 4: HTML5 Form 2.0

• HTML5 new form elements
• HTML5 new attributes

Unit 5: CSS3 Properties

• Text Properties
• Web Font
• Box Properties
• Transparency
• Multiple Backgrounds
• Gradients
• Transforms, Transitions and Animations
• Lab Exercise

Unit 6: Using Sprites

• What is Sprites?
• Building Navigation using CSS & Sprites
• Working with Sprites

Unit 7: Creating responsive site using Media Queries

• What is Media Queries?
• Types of media
• Applying condition with CSS
• Creating layout for desktop browser, tablet & mobile
• Working with Grid layouts
• Types of grid layout & frameworks
• Lab Exercise

Day 4: Twitter Bootstrap

Duration: 1 day | 8 hrs

In this module you will learn a faster and intuitive way to create responsive / mobile first web pages using Twitter Bootstrap framework.

Eligibility / Audience:

You should have thorough knowledge of HTML5 and CSS3 or you should have completed our Day 1,2 and 3 training.

Unit 1: Working with Twitter Bootstrap

• What is Twitter Bootstrap?
• Downloading and installing Bootstrap
• Understanding the Bootstrap file structure
• Integrating Bootstrap library in HTML
• Working with grids & Columns
• Working with Buttons & Button styling
• Styling page elements
• Typography, Images, Icons
• Utilizing Form Controls
• Responsive Design
• Understanding & Inserting Components
• Buttons, Menus, Navs, Navbar, Breadcrumbs,Pagination
• Working with JavaScript
• Adding JavaScript effects, like dropdown
• Menus, Tabs, Accordions, Carousels, Modals
• Lab Exercise

Day 5: Less and Sass

Duration: 1 day | 8 hrs

This module introduces Less & Sass tools-dynamic stylesheet preprocessors that adds programming features like variables, functions and reusable classes.

Eligibility / Audience:

You should have thorough knowledge of HTML5 and CSS3 or you should have completed our Day 1,2 and 3 training.

Unit 1: Working with LESS and Sass

• What is Less?
• Working with Less Variables and Operator
• Working with reusable & parameterized mixins
• Defining nested CSS rules
• Importing external files
• Lab Exercise
• What is Sass?
• Working with Sass Variables and Operator
• Working with reusable & parameterized mixins
• Defining nested CSS rules
• Referencing Parent Selectors: &
• Extend/Inheritance
• @-Rules
• Controls Directives
• Importing external files
• Lab Exercise

Who should learn HTML5

• Graphic Designer:

Designer who wants to upgrade their skills with learning HTML5 to design Responsive site for Multiple devices.

• Web Developer:

Developer who already working with web technologies and wants to upgrade their skills with HTML5 and CSS3 standards.