responsive-web-design-course

Certificate: Certified Responsive Web Designer    Instructor to Participant Ratio: 1 : 5 *

Course Details: Duration: 36 Hours     Including Mini Project: 8 hours     Placement Assistance:

Training Mode:  In-person ✔ Online ✔ On-site ✔

Use the power of HTML 5, Javascript & CSS 3

Build Websites that run on Laptop, Tablet & Mobiles from 1 codebase

In this course; participants will learn essential components of Responsive Web Design. If you are a Responsive Web Design newbie, this course is just what you need. You will get real time practice on mini projects that will test your working knowledge of web design and allow you to rapidly progress your skills and test web design layouts on different screen resolutions and screen sizes.

responsive-web-design-courseKey focus areas of this Course
  • ✔ Basics of HTML and CSS
  • ✔ Planning your Web Site,
  • ✔ Working with Colors & Background Images
  • ✔ The DIV & SPAN Tag
  • ✔ Layout and building Basic Forms
  • ✔ Know how to use HTML5 Markup
  • ✔ Know how to use the HTML5 JavaScript APIs
  • ✔ Understand the Document Object Model and how it is used in JavaScript.
  • ✔ How to detect and respond to user actions
  • ✔ Alter, show, hide and move objects on a web page
  • ✔ Check information inputted into a form and much more…
Why learn Responsive Web Designing?
This course is aimed at developers and designers who want to learn about the latest techniques for designing and building webpages. The course concentrates on using the new semantic markup in HTML5, and on techniques for building pages that configure themselves automatically depending on the screen size.
Responsive Web Design Course Outcome?

People new to Web design that desire a deeper understanding of HTML, CSS and Javascript / Jquery and the new standards of web design. The HTML5 section of the class is designed for people interested in designing, creating, and deploying HTML5 web applications. It is valuable to both beginners & advanced developers that already have experience in developing web applications.

Interested?

Your Name (required)

Email (required)

Mobile (required)

Message / Interest / Concern

Responsive Web Design - Course Topics

  • The Language of the Web
  •  Basics of HTML and the Web
  •  Creating an HTML File
  •  Web Browsers and Tags
  •  Formatting and Testing Pages
  •  Understanding Attributes
  •  Working with Images
  • Web Page Construction
  •  The Rough Design Sketch
  •  From a Sketch to an Outline
  •  From Outline to Web Page
  •  Testing your New Pages
  •  Learning New Tags and Elements
  •  Working with Blockquote and Paragraph
  •  Nesting Elements
  •  Choosing Inline or Block for Text
  • Serving Up the Page
  •  Finding Hosting Solutions
  •  Domain Name Basics
  •  Getting your Files to the Web
  •  URL Linking
  •  HTTP Protocol
  •  Absolute and Relative Paths
  •  Index and Default Pages
  •  Linking to Other Web Sites
  •  Liking t o a New Window
  •  Using Target
  •  Testing on Multiple Browsers
  •  Tips and Tricks for Publishing

Images, Media, and More HTML

  •  Working with Images
  •  Standards and the ATL Tag
  •  Images for Links
  •  Formatting Options
  •  Working with Transparent Images
  •  Working with Page Colour and Background
  •  Document Type and the W3C Validator
  •  Using Meta Tags and Data
  •  Validating and Nesting Fixes Moving on to XHTML
  •  Learning About XHTML
  •  The XHTML 1.0 Checklist

Moving from HTML t o XHTML

  •  Validation and XHTML Adding Some Style
  •  Using CSS and XHTML
  •  Designing and Building Rules
  •  Linking to External Style Sheets
  •  Understanding Inheritance
  •  The Font Family Tree
  •  Overriding Inheritance
  •  Creating a Selector for the Class
  •  Taking Classes Further
  •  Validating CSS

More About CSS and Properties

  •  Text and Fonts
  •  Understanding Font-Family
  •  Adding Style t o Your Fonts
  •  Specifying Web Colours
  •  Tw o Minute Guide t Hex Codes
  •  How to Find Web Colours
  •  Text Decorations
  •  Removing the Underline from Links

Web Layout Basics

  •  Learning the Box Model
  •  Padding, Border, and Margins
  •  Adding a Background Image
  •  Adding Padding to the Left and Right
  •  Two Minute Guide toBorders
  •  Border Fit and Finish
  •  Working with the id Attribute
  •  Using Multiple Style Sheets

More HTML and CSS Techniques

  •  Dividing a Page into Logical Sections
  • Selecting Descendants
  •  Working with Colour
  •  Fixing the Line Height
  •  Adding the Tag for Style
  •  Styling Based on State
  •  Pseudo-Classes
  •  Understanding the Power of Cascade

Arranging Elements

  •  Working with Flow
  •  Working with Inline Elements
  •  Putting it all Together
  •  Working with Width and Float
  •  Fixing the Two-Column Problem
  •  Fixing Overlap
  •  Liquid and Frozen Designs
  •  How Fixed Positioning Works
  •  Two and Three Column Designs

Adding Forms to your Page

  •  How Forms Work
  •  Adding the Form Element
  •  Working with Input and Select
  •  Radi Buttons and Drop Downs
  •  Working with Get and Post
  •  Working with Tables and Forms
  •  Styling the Form and Table with CSS

HTML5 Overview

  •  History of HTML5
  •  The HTML5 vision
  •  WHATWG and W3C specifications
  •  What is part of HTML5?
  •  HTML5 roadmap

Using HTML5

  •  When can I use these features?
  •  Using HTML5 on mobile devices
  •  Moving away from Flash
  •  Building fast web applications
  •  Performance Analysis
  •  Developer Tools
  •  Using HTML5 in browsers that do not support it
  •  Detecting native availability of HTML5 features
  •  Emulation

Markup, forms, and offline applications

  •  HTML5 Markup
  •  HTML5 page structure
  •  HTML5 DOCTYPE
  •  HTML5 markup
  •  Structural elements
  •  Semantic elements
  •  Deprecated elements
  •  HTML5 and CSS

HTML5 Forms

  •  HTML5 form elements
  •  Building and using HTML5 forms
  •  HTML5 Offline Applications
  •  HTML5 offline applications
  •  Offline manifest files
  •  ApplicationCache events

HTML5 Audio and Video

  •  The audio and video elements
  •  Understanding audio and video
  •  Audio and videocontainers
  •  Audio and video codecs

Overview of the HTML5 APIs

  • Overview of the HTML5 APIs
  •  Common building blocks
  •  Programming HTML5

HTML5 Canvas and SVG

  •  Overview
  •  Canvas vs. SVG
  •  Canvas coordinates
  •  Context
  •  Accessibility
  •  Pixel data
  •  Lab: Using the Canvas APIs
  •  Canvas basics
  •  Drawing operations
  •  Canvas transforms

HTML5 Communication APIs

  •  Cross-document messaging
  •  Overview
  •  Understanding the origin concept
  •  Lab: Using the PostMessage API
  •  XMLHttpRequest Level 2
  •  Overview
  •  Cross-document XHR
  •  Progress events
  •  Lab: Using XHR Level 2
  •  Server-sent Events
  •  Overview

HTML5 Web Sockets

  •  Real-time Communication overview
  •  Web Sockets overview
  •  Web Sockets API
  •  Web Sockets Protocol

HTML5 Web Workers

  •  Web Workers overview
  •  Multi-core processor architecture
  •  Web Worker communication

HTML5 Geolocation

  •  Geolocation overview
  •  User Privacy
  •  Location information sources

HTML5 Storage

  •  Overview
  •  Local Storage
  •  Session Storage
  •  Web SQL Database

History

  •  From LiveScript to JavaScript
  •  Java vs JavaScript
  •  Object-Oriented Programming (OOP)
  •  Other programming languages

What does JavaScript do?

  •  Rollovers
  •  Form Validation
  •  Mathematical Calculations
  •  Change CSS
  •  Working with HTML5 Canvas Tags

Understanding JavaScript

  •  Server-side vs. Client Side
  •  Basics of OOP
  •  JavaScript Behaviour
  •  Dot Syntax
  •  Understanding Properties & Methods
  •  Document Object Model
  •  Unobtrusive Scripting

The Language

  •  Event Handlers
  •  Values & Variables
  •  Assignments
  •  Operators
  •  Comparisons

JavaScript Fundamentals

  •  Writing text
  •  Working with functions
  •  Internal, Head & External JS
  •  Commenting in JS
  •  Alert Windows
  •  Confirming user choice
  •  If/else statements
  •  Prompting the User
  •  Redirects through a link
  •  JavaScript enhanced links
  •  Working with Referrer pages

Building a Web App

  •  Designing a small Card app
  •  Looping & Do/While Loops
  •  Passing values to functions
  •  Object Detection
  •  Working with Arrays
  •  Updating Arrays
  •  Using the random() method
  •  Working with functions that return values
  •  Multi-level Conditionals
  •  Error-Handling

Working with Images

  •  Creating a Rollover
  •  Creating more effective rollovers
  •  Understanding the DOM

Form Handling

  •  Select & Go Navigation
  •  Accessibility & JavaScript
  •  Changing Menus Dynamically
  •  Making fields required

Making your pages dynamic

  •  Placing the current date
  •  Working with a dynamic timer
  •  Updating the seconds dynamically jQuery Introduction
  •  Introduction to JQuery
  •  Downloading and implementing the latest version ofJQuery
  •  Enabling JQuery
  •  Using the basic features

Identifying page content

  •  CSS selectors with JQuery
  •  Filtering content
  •  Applying attribute filters
  •  Traversing the DOM

• Statement chaining,

Editing page content

  •  Creating and editing content viaJQuery
  •  Modifying html attributes
  •  Working directly with CSS

Creating JQuery interaction

  •  Understanding event handlers
  •  Binding JQuery event handlers
  •  Event helper methods
  •  JQuery event objects

JQuery Animation and effects

  •  Hiding and showing content
  •  Fading content
  •  Moving content
  •  Building custom animations

 

The jQuery UI plug-in

  •  Downloading/installing the JQuery UI
  •  Working with JQuery widgets
  •  Adding JQuery effects
  •  Creating custom UI themes

Working with CSS

  •  HTML Structure and Content, CSS Presentation
  •  Advantages of CSS
  •  Creating and Using Style-Sheets
  •  CSS Rules: The Basic Syntax
  •  Case, Whitespace and Comments in CSS
  •  The CSS Standards
  •  The Scope Of CSS
  •  Browser Support for CSS

CSS Boxes and CSS Selectors

  •  The CSS Box Model
  •  CSS and Logical HTML Structure
  •  Styling Boxes: Borders, Margins and Padding
  •  The IE Box Model and Quirks Mode
  •  IE Box Model Workarounds
  •  Using IE6 Standards Mode
  •  Specifying CSS Distances
  •  Problems with Absolute Units: pixels and point sizes
  •  Using Proportional Units: em, ex and percentages
  •  Formatting Box Edges Differently
  •  Shorthand Syntax for Sets of Edges
  •  Using Margins and Padding Effectively
  •  Collapsing Vertical Margins on Paragraphs
  •  Using Negative Margins on Boxes
  •  Background Images on CSS Boxes
  •  Grouping Elements with HTML Classes
  •  Styling Multiple Elements Similarly (Selector Grouping)
  •  Block Boxes and Inline Boxes
  •  Block Box Behaviour
  •  inline Box Behaviour

Text Formatting in CSS

  •  Text Formatting
  •  Typefaces, Alternatives and Defaults
  •  Text Size — a Serious Usability Issue
  •  Font Characteristics
  •  Setting and Using Space Within Text
  •  Formatting Blocks of Text

More CSS Selectors and Selection

  •  Using HTML Element IDs in CSS
  •  Using CSS Descendant Selectors
  •  Descendant Selector Examples
  •  Child, Sibling and Pseudo-Class Selectors
  •  Why You Need To Know Them
  •  Browser Support and CSS Hacks
  •  Distinguishing and Setting Link States
  •  Link, Visited, Hover, Active, Focus
  •  Modularising CSS Style-Sheets
  •  Simpler Management, Less Effort, More Control
  •  Embedded CSS Styles in HTML Documents
  •  How and When to Use Them (Rarely).
  •  Distinguishing Print, Screen and other Output Formats
  •  Special Issues in CSS for Print
  •  Using Arbitrary Inline Tags:

CSS Positioning

  •  Choosing the Right CSS
  •  Technique for Positioning Blocks
  •  The Position Property, Floats, Margins (inc. Negative and Auto), etc
  •  Static Positioning and Normal Flow
  •  Absolute Positioning Outside Normal Flow
  •  Relative Positioning — Not What You May Expect!
  •  Fixed Positioning Outside Normal Flow
  •  Relative Absolute Positioning
  •  Absolutely Positioned Blocks in Relatively Positioned Containers
  •  Floating Boxes with the CSS float property
  •  Page Layout Using Absolutely Positioned Blocks

More on CSS Page Layout

  •  Alternative Methods of CSS Positioning
  •  Centring Blocks
  •  Styling Lists
  •  Redefining the Behaviour of Inline and Block Elements
  •  Hiding and Revealing Blocks
  •  Table Formatting in CSS
  •  Styling Table Cell Borders
  •  Page Layout with Table Display Properties

Cascade, Precedence, Specificity and Inheritance in CSS

  •  Taking Control: Ensuring that CSS Rules Interact in the Way You Want
  •  Combining Styles: Different Types, Origins, Importance, Specificity and Order
  •  Examples: Combining Rules
  •  Cascading and Cascade Order
  •  Resolving Style Conflicts By Origin
  •  Resolving Style Conflicts By Importance
  •  Resolving Conflict By Selector Specificity
  •  Resolving Conflict By Order
  •  Non-CSS Presentational Hints
  •  Property Inheritance

CSS Layers and Translucency

  •  Different Forms of Layered Presentation in CSS
  •  Layering with the z-index Property
  •  Different Methods for Creating Translucency Effects
  •  The CSS3 opacity Property
  •  opacity Example
  •  Fixed Attachment Backgrounds in Layers
  •  background-attachment Example
  •  Transparency and Semi-transparency with Alpha-Blended PNG
  •  PNG Translucency Example and Sample Code
  •  Pseudo-Transparency with JPG Positioned Backgrounds
  •  JPG Pseudo Transparency Example

Using CSS in the Real World

  •  Deploying CSS
  •  CSS Formatting Versus HTML Formatting
  •  Achieving a Balance
  •  Standard Tags and Semantic Markup
  •  Usability
  •  Readable Pages
  •  Screen Size and Fluid Design
  •  Text Size, Including Internet Explorer Quirks
  •  Table Layout and CSS Positioning
  •  Table Layout and CSS Positioning as Alternatives
  •  Combining Table Layout with CSS Positioning
  •  CSS Browser Support
  •  Testing Websites
  •  Test using Multiple Browsers

CSS3 on mobile devices

  •  CSS3 media queries
  •  Different Sizes
  •  Orientation Change

Fonts & Text

  •  Using Custom Fonts
  •  @font property
  •  Importing fonts
  •  Web Font formats
  •  Buying web fonts
  •  TypeKit, fontsquirrel
  •  Using google font api
  •  Text shadows
  •  Font sizing with REM
  •  Enhanced Text Gradients

Enhancing your boxes

  •  Box rounding
  •  Adding a Shadow to objects
  • • Opacity & Transparency
  •  Colouring with RGB and Alpha
  •  Adding a CSS3 Gradient
  •  Rotating objects
  •  Applying animations & transitions

Backward compatibility tools

  •  CSS3Pie,
  •  CSS3Please & Generators
  •  Transformie, Modernizr
  •  Selectivizr

Useful CSS Tips

  •  Usage of CSS Sprites
  •  Pseudo Selectors
  •  CSS minify
  •  Cheat Sheet for CSS3

Enhanced CSS3 Effects

  •  Speech bubbles using CSS3
  •  CSS3 Ribbons
  •  Using the CSS3 pseudo
  •  Pseudo background images
  •  Multi-column layouts CSS3
  •  CSS3 Patterns
  •  CSS3 Gradient Effect
  •  Applying CSS3 to forms
  •  Resize Background Image
  •  Cool CSS3 Hover Effects

Menus

  •  HoverBox Image Gallery
  •  Advanced CSS Menu
  •  Sliding Photograph Gallery
  •  CSS3 Navigation & Menus
  •  CSS3 toggle-button without JavaScript
  •  Create iOS back & forward buttons with CSS3
  •  3D in CSS3
  •  CSS3 3D Carou

CSS3 with jQuery

  •  Building a Clock
  •  AJAX tabs with jQuery and CSS3

Responsive Web Design - FAQ

Learnpact Responsive Web Design course is a hands-on, instructor-led course available in Chennai & Kolkata city. This training can be taken in part-time morning / afternoon / evening slot or even on the weekends.

You should be able to hand-code HTML and CSS and should have an understanding of CSS design techniques.

Yes, we have special batches and workshops on weekends. You can join our one-to-one or/and group training program as well.

Yes, To document your achievement, Learnpact will proudly present you with a certification award when you finish the course successfully

Yes, Learnpact also arrange corporate trainings if a group of people (minimum 5) are willing to undergo Responsive Web Design training at their office premises. Corporate Training can be arranged in any city of India. Get in touch with us for more details.

Training Testimonials

I had to unlearn; whatever i knew about XHTML all my career(5 years). HTML 5 & Responsive web is so much fun and has so much scope for web designers like me. I would recommend this course to all web designers.

Jhanvi, Sr. Web Designer. Perot Systems

 

I attended Learnpact Responsive Web workshop. It helped me in a big way.

Ahmed Basha

 

The Responsive Web Design corporate training workshop helped all our 16 member Webdesign team. We would highly recommend Learnpact.

Preetham Kumar, HR Manager – Aegis Global