Front End


  • Batch Timings :
  • Starting Date :

Course Overview

Front-end web developers are the magicians who create the interface you first see when you fire up a website. Every web and mobile app needs front-end developers, and given how everything we do is moving to the internet, front-end developers are in great demand.

Whether you’re looking to be a professional developer or just want to pick it up for fun, learning front-end programming will be time well-spent.

COURSE FEATURES

  • Resume & Interviews Preparation Support
  • Hands on Experience on One Live Project.
  • 100 % Placement Assistance
  • Resume Preparation
  • Interview Preparation
  • Multiple Flexible Batches

At the end of Front End Training Course, Participants will be able to:

  • Learn HTML & CSS from basics
  • Create responsive web design by using HTML5, CSS3
  • Integrate tons of jQuery elements & plugins to create highly interactive website

Course Duration

  • Weekdays: 1.5 Months

Prerequisites :

  • There is no any prior requirement of course to learn web designing. Anyone can be a web developer by working practically on live projects.
  • Basic computer skills

Course

1.1 Understanding of HTML

  • What is HTML ?
  • Why we use HTML?
  • Structure of HTML
  • Head Tag and Elements inside the Head Tag
  • Meta Tags & What are they used for?

1.2 Contents of HTML

  • Working with Basic Tags and Font Formatting Tags
  • Heading Tags
  • Paragraph Tags & Multiple Columns
  • HTML Styles
  • Working with Links & Link Attributes / Link States using Pseudo Classes

1.3  Images

  • Inserting Images & Image Attributes
  • Image Embedding in Web Page

1.4 HTML Lists

  • List Attributes & Types of Lists
  • Working with UNOrdered List
  • Working with Ordered List
  • Working with Nesting List
  • Working with Defination List

1.5 HTML Tables

  • Inserting & Updating Tables

1.6 HTML Block Elements

  • Understanding Blocks – Div Block
  • Understanding Box Model – Margins / Paddings / Borders / Border-Radius / Outlines
  • Positioning Div Blocks & HTML Elements

1.7 iFrames and Media Tags

  • Embedding Google Maps
  • Audio / Video Elements
  • Audio & Video Attributes

1.8 HTML Forms

  • HTML5 Form Attributes
  • HTML5 Form Validation Attributes
  • HTML Input attributes

1.9 HTML5

  • HTML 5?
  • Why HTML 5?
  • Power of HTML 5

1.10 HTML5 Elements

  • Understanding Document Outline in HTML5
  • HTML5 Structural Elements
  • Section,Article,Aside
  • Header,Hgroup
  • Footer,Nav
  • Figure,Video,Figcaption
  • Audio,Embed,Canvas, SVG

1.11 Input Types

  • Color
  • Time, Date, Week, Month
  • Range, Search
  • Email, Contact
  • URL

2.1 Introduction to CSS

  • What is CSS
  • What is New in CSS3

2.2 Types of CSS and Significance

  • Internal Style. External Style. Inline Style
  • Adding styles to web page and websites.

2.3 CSS Syntax and Selecters

  • Use of Class and ID’s with selectors
  • Defining Class to create TAG
  • Defining ID to identify an object

2.4 CSS Fonts & Texts

  • Understanding CSS font families
  • Setting Font Style
  • Defining font properties
  • Text formatting
  • Aligining Text
  • Text Decoration and transformation
  • Text Direction
  • Letter Spacing and word Spacing

2.5 CSS Background & Color properties

  • Adding Background Colors / Gradients / Background Images

2.6 CSS Box Model

  • Borders and Outline
  • Margin and Padding
  • Height and Width

2.7 CSS Border and Tables

  • Border
  • Width and Height
  • Color and Style

2.8 CSS Lists

  • list-style
  • list-style-image
  • list-style-position
  • list-style-type

2.9 Floating and Positioning

  • Normal Flow
  • Floating
  • Positioning Basics
  • Relative Positioning
  • Absolute Positioning
  • Fixed Positioning

2.10 CSS3

  • Rounded Corners
  • Borders
  • CSS3 Backgrounds
  • CSS3 Gradients
  • CSS3 Shadows
  • CSS3 TextEffects
  • CSS3 Fonts
  • CSS3 2D/3D Transforms
  • CSS3 Animations
  • CSS3 Transition
  • CSS3 Paginations
  • CSS3 Tooltips
  • CSS3 Multiple Columns
  • CSS3 FlexBox
  • CSS3 Media Queries

3.1 Overview of JavaScript

  • What is JavaScript?
  • Statements, Syntax and Comments
  • Using Variables in Javascript
  • Operators and Data types
  • Looping and conditional statement
  • How to use Events in JavaScript

3.2 Window Event Attributes

  • Onload and Onunload

3.3 Form Events

  • onblur
  • onchange
  • onfocus
  • oninput
  • onselect
  • onsubmit

3.4 Keyboard Events

  • onkeyup
  • onkeydown
  • onkeypress

3.5 Mouse Events

  • onclick
  • ondblclick
  • onmouseover
  • onmouseout
  • onmousedown
  • onmouseup

3.6 JS Form Validations

4.1 Basic of Javascript

  • Arrays in JavaScript
  • Defining and Invoking Functions

4.2 JS Object

  • Date and Math
  • JS String Objects

4.3 JS DOM Objects

  • Access and Modify HTML through DOM
  • Event Listeners
  • Collections

5.1 JQuery Basics
5.2 JQuery Syntax
5.3 How to use Selectors?

  • jQuery – CSS Element Selector and ID Selector
  • jQuery – CSS Element Class Selector and Universal Selector
  • jQuery – CSS Multiple Elements E, F, G Selector
  • jQuery Callback Functions

5.4 JQuery – DOM Attributes

  • Get Attribute Value
  • Set Attribute Value

5.5 JQuery – DOM Traversing

  • Find Elements by index
  • Filtering out Elements
  • Locating Descendent Elements

5.6 jQuery – CSS Methods

  • Apply CSS Properties and Multiple CSS Properties
  • Setting Element Width & Height
  • JQuery CSS Methods

5.7 jQuery –DOM Manipulation Methods

  • DOM Element Replacement
  • Inserting & Removing DOM Elements
  • Event Handling
  •  Triggering
  • Helpers

5.8 jQuery – Effects

  • JQuery Effect Methods, Hide and Show
  • jQuery Toggle
  • jQuery Slide – slideDown, slideUp, slideToggle
  • jQuery Fade – fadeIn, fadeOut, fadeTo
  • jQuery Custom Animations

5.9 jQuery –The noConflict() Method

6.1 What is AJAX and how it works
6.2 Syntax of AJAX
6.3 AJAX Operations
6.4 AJAX – XMLHttpRequest

  • XHR Create Object
  • XHR Request
  • XHR Response
  • XHR readyState

6.5 Jquery AJAX Methods

  • jQuery load() Method
  • jQuery – AJAX get() and post() Methods

7.1 Introduction of Bootstrap
7.2 Download and Install Bootstrap and jQuery
7.3 Bootstrap Basics

  • jQuery load() Method
  • jQuery – AJAX get() and post() Methods

7.4 Bootstrap Basics

  • Bootstrap Grid System
  • Fixed Layout vs. Fluid Layout
  • Bootstrap Code Lookup
  • Tables in Bootstrap
  • Forms in Bootstrap
  • Bootstrap Buttons
  • Image Handling in Bootstrap

7.5 BOOTSTRAP ─ NAVBAR

  • Default Navbar
  • Responsive Navbar
  • Forms in Navbar
  • Buttons in Navbar
  • Text in Navbar
  • Non-nav Link

7.6 BOOTSTRAP ─ DROPDOWNS
7.7 BOOTSTRAP ─ PAGINATION
7.8 BOOTSTRAP ─ LABELS
7.9 BOOTSTRAP ─ JUMBOTRON
7.10 BOOTSTRAP ─ PAGE HEADER
7.11 BOOTSTRAP ─ THUMBNAILS
7.12 BOOTSTRAP ─ PROGRESS BARS

  • Default Progress Bar
  • Alternate Progress Bar
  • Striped Progress Bar
  • Animated Progress Bar
  • Bootstrap Stacked Progress Bar

FAQ

Web design is the process of creating websites. It encompasses several different aspects, including webpage layout, content production, and graphic design. While the terms web design and web development are often used interchangeably, web design is technically a subset of the broader category of web development.

you’ll learn how to build beautiful, interactive websites by learning the fundamentals of HTML, CSS, and JavaScript – three common coding languages on which all modern websites are built.

Yes! Web development is considered to be easy to learn, as plenty of resources are available, and hands-on training provides much-needed experience. The educational requirements for web developers ranges from a high-school diploma to a bachelor’s degree, meaning that your educational qualification will not stop you from landing your dream job. If you are passionate and possess the right skills, then you’re on your way to becoming a front-end web developer.

Quick Enquiry