Professional Course on Google's Accelerated Mobile Pages (AMP) - HTML5, CSS3, jQuery

Professional Course on Google's Accelerated Mobile Pages (AMP) - HTML5, CSS3, jQuery

This training program is jointly organized by BITM & eSoftArena Ltd

course at a glance

  • Date : 11 Mar - 10 Jun 2018
  • No. of Classes/ Sessions : 20
  • Total Hours : 60
  • Last Date of Registration : 11 Mar 2018
  • Class Schedule :
    • Sunday - 3:00 PM - 6:00 PM
    • Tuesday - 3:00 PM - 6:00 PM
    • Thursday - 3:00 PM - 6:00 PM
  • venue : Level 11, Software Technology Park, Janata Tower, 49 Kawran Bazar, Dhaka-1215

Price: TK. 12,000
(including VAT & TAX)

This training is jointly organized by BITM &  eSoftArena Ltd
Training will be held in  eSoftArena Ltd

Course Outline:

Module 1 : HTML

  • Introduction to the Web Design Course and discussion on benefits of learning web design and future aspects.
  • Introduction to HTML
  • Which IDE to use and how to use IDE for HTML, CSS and PHP, Basic ideas on IDE tools and menu.
  • Ideas on HTML Attributes and Tags, how and where to use which attributes and tags. Showing Common mistakes on tag placements.
  • HTML headings, paragraph, anchor, image, inline elements, block elements overview, usages and placements.
  • HTML Form elements, input, select, textarea, radio box, checkbox, buttons elements overview, usages and placements.

 

Module 2 : HTML & HTML 5

  • HTML lists, tables, quote, frames, fieldset,iframe elements overview, usages and placements.
  • Introduction to HTML5 and overview on difference from HTML.
  • HTML5 elements overview, usages and placements.
  • HTML5 media, video, audio elements overview, usages and placements.

Module 3 : Cascade Style Sheets (CSS)

  • Introduction to CSS, what is CSS and how and where to use it.
  • CSS syntax, Classes & IDs,
  • Relationship with HTML & HTML5. How CSS will work with HTML & HTML5.
  • What is Inline CSS, where to write it, precedence & priority of Inline CSS.
  • What is Internal CSS, where to write it, precedence & priority of Internal CSS.
  • What is External CSS, where to write it, precedence & priority of External CSS.
  • What is CSS overriding, how and where it takes places.

Module 4 : Cascade Style Sheets (CSS)

  • CSS use of fonts, from where and how to get fonts and how to use those.
  • CSS use of colors, Margins, Paddings, Borders, width and height, alignments and opacity.
  • CSS for block, inline and inline-block, display, display-table and visibility properties of HTML elements.

Module 5 : HTML & CSS

  • Understanding Table based layouts.

Module 6 : HTML & CSS

  • Layouts with Floating, Positioning and overflow elements.

 

Module 7 : CSS3

  • Introduction to CSS3, Difference between CSS and CSS3, and extra benefits of using CSS3.
  • CSS3 use of shadows and gradients.
  • CSS3 use of backgrounds, border images and rounded corners elements.
  • Use of Cross Browser CSS hacks to show HTML view same on different browsers.

 

Module 8 : CSS3

  • CSS3 making cool visual with use of transitions and animations.
  • CSS3 making cool visual with use of 2D and 3D transforms.
  • CSS3 Box sizing and Flex box features and use of these.

Module 9 : Basic Photoshop needed for HTML conversion

  • Basic knowledge of Photoshop
  • Tools overview
  • Image editing
  • Retouching Techniques
  • Filtrating & Drawings
  • Layer Management
  • Typography

 

Module 10 : PSD to HTML Conversion

  • Learn what is PSD slicing, how to slice PSD to convert to HTML files.
  • Work with PSD layers to convert each layers to single HTML file.
  • Convert PSD design to fixed width HTML with pixel perfect calculation.

Module 11 : PSD to HTML Conversion

  • Practical and Project Assignments on PSD to fixed width HTML.

Module 12 : PSD to HTML Conversion

  • Introduction to responsive HTML, where and when to use it and benefits of making responsive HTML.
  • Introduction to percentage based element displaying, positioning and alignments. How percentage features will make a HTML responsive.
  • Introduction to Media Query, media query syntax, how to use media query to make a HTML file to responsive.

 

Module 13 : PSD to HTML Conversion

  • Practical and Project Assignments on PSD to responsive HTML using Media Queries.

Module 14 : JAVASCRIPT

  • Introduction to Javascript, what is client side scripting, what is the benefits of using Javascript.
  • Where to write scripts, internal and external Javascript placements.
  • Javascript syntax, common syntax as global programming languages.
  • Javascript data types, creating variables and variable scopes.

Module 15 : JAVASCRIPT

  • Javascript use of operators, arithmetic and assignments.
  • Javascript using functions, parameters and return types.
  • Javascript built in functions and methods and usages.
  • Javascript use of conditions, loops and break.
  • JavaScript examples and assignments.

Module 16 : JQUERY

  • Introduction to jQuery, benefits of using jQuery library than to use raw Javascript.
  • jQuery syntax and how to write code in jQuery.
  • What is DOM elements, how to jQuery to traversing DOM element easily, necessity for element traversing. Make use to element traversing functions and most common usages.
  • Using jQueryto handle and control DOM elements CSS to change element behavior in client side.

 

Module 17 : JQUERY

  • How to use jQuery effects and animations to show nice effects in client side. Get used to built in animation/effect functions and make new custom effects.
  • Understanding window events.
  • What is jQuery plugins (slider/popup/etc.), where to get these and how and why to use these.

 

Module 18 : JQUERY

  • Practical and Project Assignments for making some small animations with element traversing options.

Module 19 : BOOTSTRAP

  • Introduction to Bootstrap, what are the benefits to use Bootstrap.
  • Knowing Bootstrap features, grids and measurements, use of Form elements, lists and panels.
  • Bootstrap use of popup, modal, tooltips, navigations and carousel,
  • PSD to bootstrap HTML conversion using bootstrap features.
  • Customizing Bootstrap attributes and necessity for this.

 

Module 20 : BOOTSTRAP

  • Practical and Project Assignment on PSD to bootstrap HTML conversion.

Module 21 :Create your first AMP page

  • Create your AMP HTML page
  • Include an image
  • Modify presentation and layout
  • Preview and validate
  • Prepare your page for discovery and distribution
  • Final steps before publishing

Module 22 : Convert HTML to AMP

  • Setting up
  • Building a regular HTML page
  • Resolving validation errors
  • Making your page discoverable
  • Congratulations!

 

Module 23 : Add advanced AMP features

  • Setting up
  • Reviewing the starter code
  • Adding extended AMP components
  • Adding carousels
  • Tracking engagement with analytics
  • Navigating your site
  • Adding fonts
  • Congratulations!

Module 24 : Create interactive AMP pages

  • Setting up
  • Getting familiar with the starter code
  • Improving the interactivity
  • Working with remote data
  • Wrapping up

 

Module 25 : Create a login-requiring AMP page

  • Login
  • Add a comment
  • Logout
  • Summary

 

Curriculum

Advanced Professional Course on Google's Accelerated Mobile Pages (AMP) - HTML5, CSS3, jQuery 60 Hrs

Tentative Class Start

11th March, 2018

Available Seat

10 / 25

who can join

Basic understanding on web technology is required.
Initial knowledge on html/css and php/mysql is required. 
Minimum CSE/EEE students/fresh graduate from diploma/University is required.

Meet the Instructor