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 |