RESPONSIVE WEB DESIGN AND FRONT-END DEVELOPMENT

RESPONSIVE WEB DESIGN AND FRONT-END DEVELOPMENT

Courses Info

A brief summary

After finishing this Responsive Web Design and Front-end Development training course, you can build an interactive website And will be able to work Freelancing Marketplace as a Responsive Web Designer.

What you will learn

This training class is 90% hands-on, 10% lecture. Students learn by doing, with immediate opportunities to apply the material they learn to real-world problems.

Course Outline: 

HTML Coding

  • Creating a HTML page, HTML Tags, Paragraph & Text Formatting
  • Lists, Horizontal Ruling lines, HTML Color, Background Color
  • Specifying Font Information, Formatting Tags

HTML Review and Basics

  • HTML Elements, HTML Attributes, HTML Headings, HTML Paragraphs, HTML Hyper links
  • HTML Table, Table & Data Alignment Options, Table Cell Spacing & Padding, Changing Table Height & Width of Table Elements
  • Links, Anchor Tag, HTML Lists & Blocks, HTML Forms & Media

HTML Advanced

  • HTML Layout, HTML Form, Form Overview
  • Marquee Tag, HTML Iframes, Create Interactive Button
  • List Background Using Images, Make menu Button Using HTML code & Image, HTML bdo tag, HTML span tag

Creative Artwork with HTML5

  • HTML5 Basics, HTML5 Intro, HTML5 New Elements, HTML5 Semantic
  • HTML5 Input Types, HTML5 Form Elements, HTML5 Form Attributes
  • HTML5 Media, HTML5 Video, HTML5 Audio

CSS Review and Basics

  • Introduction to CSS, External Style Sheet, Internal Style Sheet, Inline Style, Multiple Style Sheet, CSS Syntax, CSS Id & Class, CSS Selectors, CSS1 vs CSS2 vs CSS3, The Cascade & Styling
  • The letter-spacing Property, The word-spacing Property, Text Align Property, Line Height Property, Background-URL, Background-Position, Background-Repeat, Specificity & Validating your CSS

Building Layout with CSS

  • CSS Box Model, 2 Column Layout
  • 3 Column Layout, CSS Border, Outline, Margin & Padding

CSS Advanced

  • CSS Floating & Positioning, CSS Dimension & Display
  • CSS Align, Pseudo-class, Pseudo-element &Navigation Bar, CSS Image Gallery, Opacity, Sprites &Media Types

Creative Artwork with CSS3

  • CSS3 Round Corners, CSS3 Font-face, CSS3 Transparency and Semi-transparency
  • CSS3 Box Shadow & Text Shadow, CSS3 Transitions, Transform & Gradient

Responsive Web Design

  • Responsive Web Design using CSS LESS Frame Work

Adobe Photoshop

  • Interface and Basic tool and shape
  • Basic for retouching and related tool
  • Retouching
  • Working with texture and pattern
  • PS Mock-up
  • Mock-up making and Marketplace
  • Animation and Video editing
  • Apps UI/UX design
  • Web and Apps element design
  • Web Template design

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.
  • Practical and Project Assignments on PSD to fixed width HTML.
  • Introduction to responsive HTML, where and when to use it and benefits of making responsive HTML.
  • Introduction to Media Query, media query syntax, how to use media query to make a HTML file to responsive.
  • Practical and Project Assignments on PSD to responsive HTML using Media Query
  • Introduction to percentage based element displaying, positioning and alignments. How percentage features will make a HTML responsive.
  • Practical and Project Assignments on PSD to Responsive HTML using both media query and percentage.

A live project with Layout building with validations

  • Project Overview, Layout Planing, CSS Optimization
  • Final Build Up, Project Summary, Live Web Designing Project

JavaScript – MODULARITY / STRUCTURE

  • Memory
  • Global variables
  • Whitespace and semicolons
  • Comments
  • Arithmetic operators
  • Flow control
  • Code blocks
  • Scope Amd/commonjs module specifications

Javascript – Data Type

  • Primitive
  • Arrays
  • Array operations
  • Undefined and null

Objects

  • Built-in objects
  • Creating objects
  • Literal objects
  • Constructor function objects
  • Prototypes
  • Prototype chaining / inheritance
  • Prototypes in action – implementing the singleton pattern

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.
  • How to use jQueryeffects and animationsto show nice effects in client side. Get used to built in animation/effect functions and make new custom effects.
  • What is jQuery plugins, where to get these and how and why to use these.
  • Practical and Project Assignments for making some small animations with element traversing options.

Twitter 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.
  • Practical and Project Assignment on PSD to bootstrap HTML conversion.
  • Introduction to SASS, what is the difference with normal CSS, what are the benefits of using SASS
  • Installing SASS and creating SCSS files and converting to CSS files.
  • SASS rules and attributes and their usages.
  • Full course Review

Introducing WordPress and WordPress Customization

  • Introduction to the Course, What is WordPress?, Your WordPress Server, One Click Installations, Navigating WordPress, Using Real Content, Under the Hood: Files & Databases
  • Creating WordPress Content
  • WordPress Additional Types of Content<
  • Controlling WordPress Blog
  • Using WordPress as a Content Management System
  • Customizing WordPress Appearance
  • Getting More Performance from WordPress
  • Exploring the Anatomy of a Theme

Projects

Introducing CPANEL and Hosting Management

Introducing and working on Freelancing Marketplaces

Career Guideline, Problem Solving and Final Project submission