Curriculum

Module 1 : Frontend Fundamentals

Introduction

• What is Server? Discuss LAMP/WAMP/XAMP? 
• Difference between global server and local server?
• Configuration of local server.
• Role of http over the network/Internet.
• Terminologies 
  • Web client
  • Web server
  • Web browser
  • Webpage
  • Website
• Discuss Client server architecture.

 

Module 2 : Introduction to HTML

HTML Basics

• Understand the structure of a HTML page.
• Understanding HTML Elements.
• Creating and saving first web page.
• Defining the title on webpage.
• Showing the icon on webpage.
• Use of HTML Attributes. 
• Syntax to use attribute in HTML.
• Using background image.
• Defining marquee in HTML
• Empty HTML element.
• Creating horizontal line.

Text and link on web page

• Discussion on font formatting
• Creating Headings in HTML.
• Creating and styling Paragraphs.
• Using different color coding.
• Comments in HTML
• Linking webpages using hyperlink
• Creating different types of hyperlink
• Creating image on webpage.

HTML Tables and basic layout

• Showing data in tabular form.
• Creating tabular data in different format.
• Discussion on different properties of table and its impact
• Formatting on table.
• Initial layout management of website using table.
• Discussion on div and span.

HTML Lists

• Creating list on web page to show the details of product.
• Creating different types of List.
• Properties of numbered list.
• Properties of bulleted list
• Creating HTML description Lists

HTML Image Maps

• The Image
• The Map
• The Areas

HTML iframe

• What is the use of Iframe?
• Discussion on frameset and iframe.
• Setting height and width of iframe
• Removing the Border from iframe

HTML Entities

• HTML Symbols
• HTML Encoding (Character Sets)

HTML Forms

• Discussion on form
• Attribute related to form 
• Method of posting form on to server.
• Discussion on binary data posting

• Creating textbox, checkbox, radio button etc. control.
• Differentiation between checkbox, radio button and drop down list.
• Discussion on taking long text from user like feedback, address etc.

 

Module 3 : HTML5

HTML5 Basics

• Introduction of HTML5.
• Discussion on different version of HTML5.
• Document type declaration in HTML5.
• Comparing HTML5 with HTML.
• Creating different form controls introduce in HTML5.
• Discussion on different attribute introduce in HTML5.

Multimedia and graphics on webpage

• Creating of audio control on webpage.

• Creating video control on webpage.

• Discussion on plug-in
• Discussion of object, embed element.
• Embedding YouTube videos.

 

Module 4 : CSS

CSS Basics

• Introduction of CSS.
• Advantage of using CSS over the HTML.
• Properties and its value in CSS.
• Ways to use CSS.
• Why external CSS.
• Comment in CSS.

• Selectors in CSS
  • Discussion on selector.
  • Different type of selector
    • Tag selector
    • Defining and using multi selector.
    • Defining and using class selector
    • Multiple classes on particular tag.
    • Defining and using id selector.
    • Defining and using universal selector.
    • Why universal selector.
    • Defining and using attribute selector.
    • Use and advantage of using pseudo-class.
    • Defining nested selector.
    • Discussion on Pseudo element
• Text formatting using CSS
  • Defining the color, size of text.
  • Discussion on different measurement unit.
  • Removing underline from hyperlink.
  • Use of text transformation.
  • Creating text shadow.

• Page formatting using CSS
  • Defining the background.
  • Managing image in background.
  • Managing layout of page using position.
  • Differentiate absolute, relative and fixed layout.
  • Defining margin and padding. 
  • Setting individual margin and padding on page.
  • Create transparent box.

• Table formatting using CSS
  • Defining the separate and collapse border.
  • Managing image in background.
  • Generate different structure of table.
  • Create table striped.

• Border formatting using CSS
  • Defining border width
  • Define the individual border width.
  • Defining different kind of border style
  • Define the individual border style.
  • Defining border color
  • Define the individual border color.
  • Defining the radius of border.

• List formatting
  • Setting list style
  • Showing image as an list
  • Positioning list.
  • Creating navigation bar.
  • Generating different view of navigation bar.
• Cursor 
  • Setting different kind of mouse pointer.
  • Defines the double headed arrow.
  • Defining the four headed arrow.

 

Module 5 : CSS3

• CSS3 formatting
  • Create sections with rounded corner.
  • Defines the image on border.
  • Defines the background.
  • Creating and managing different kind of gradients.
  • Creating shadow on text and box.
  • Defines skew, scale, move and rotate elements.

 

Module 6 : Responsive design using Bootstrap

• Introduction of bootstrap
  • Introduction of bootstrap.
  • Discussion of responsive websites.
  • Discussion on different size of screen.
  • Difference between bootstrap3 and bootstrap4.
  • Discussion on different container and its limitations.
  • Ways to use bootstrap.
  • Discussion on CDN over downloaded version.

• Layout management in bootstrap
  • Managing layout of webpage using bootstrap.
  • Differentiate container and container-fluid class.
  • Creating and manipulating sections in container.
  • Generating responsive text on webpage.

• Text in bootstrap
  • Discussion on size of different heading in bootstrap.
  • Generating lighter and secondary text in bootstrap.
  • Discussion on block quotes, description list, code snippets etc.
  • Different text formatting in bootstrap. 
  • Generating contextual text color and background in bootstrap.
  • Showing text on jumbotron.

• Table in bootstrap
  • Showing records in tabular format with basic styling.
  • Showing striped style on bootstrap table.
  • Showing bordered table and also apply hover format.
  • Contextual classes on table.
  • Generating responsive web site.

• Icons in bootstrap
  • Discussion on glyphicon.
  • Use of glyphicon over normal text.
  • Limitation of glyphicon.
  • Showing icons on form controls like user, lock etc.

• Modal in bootstrap
  • Understanding modal.
  • Create and open modal.
  • Different classes used for modal.
  • Defining the size of modal.
  • Showing login and registration page on modal.

• Image in bootstrap
  • Creating responsive image.
  • Defining the rounded image.
  • Creating circle image.
  • Creating thumbnail image.
  • Image with caption.
  • Creating responsive video with scale to parent element.
  • Image with media class.
  • Defining alignment of media object.
  • Showing nested media object.

• Button in bootstrap
  • Generate different style of button.
  • Generate different size of button in bootstrap.
  • Mean of large button, small button and block level button.
  • Using different state of button in bootstrap.

• Button group in bootstrap
  • Creating horizontal button group.
  • Horizontal button group with different sizes.
  • Creating vertical button group.
  • Defining justified button group.
  • Nesting button and creating drop down.
  • Defining different section in drop down.

• Alert message in bootstrap
  • Generating different types of alert message.
  • Generating different types of alert message as link.
  • Generating different type of alert message with close button.
  • Generating different type of alert message with animation.

• Badges in bootstrap
  • What do you mean by badges?
  • Generating different types of badges.
  • Badges with contextual classes.

• • Panel and collapsible panel in bootstrap
    • What do you mean by panel?
    • Panel with heading.
    • Panel with footer.
    • Create panel group.
    • Panel with contextual class.
    • Create basic collapsible.
    • Create collapsible panel.

• Menu and navigation bar in bootstrap
  • Creating menu as tab and pills.
  • Differentiating tab and pills.
  • Creating tabs as drop down menu.
  • Showing horizontal and vertical pills.
  • Creating pills with drop down menu.
  • Showing centered tabs and pills.
  • Creating toggleable tabs.
  • Creating dynamic tabs.
  • Creating toggleable pills.
  • Creating dynamic pills.
  • Creating navigation bar.
  • Defining inverted navigation bar.
  • Designing navigation bar with drop down menu.
  • Aligning menus in navigation bar.
  • Creating fixed navigation bar.
  • Create collapsing navigation bar in bootstrap.

• Form in bootstrap
  • Creating form.
  • Discussion on form control default setting.
  • Creating form with different layout.
  • Discussion on default layout of form.
  • Creating text box in bootstrap.
  • Taking long string in text area.
  • Checkbox and radio button in bootstrap.
  • Creating drop down list.
  • Grouping input control on form.
  • Creating static control on form.
  • Using state of control on form.
  • Showing text box in different size.
  • Showing help text with form controls.
  • Carousel in bootstrap
  • What do you mean by carousel?
  • Creating carousel.
  • Discussion of different carousel classes.
  • Defining carousel with caption.
  • Spinner in bootstrap
  • What is spinner?
  • Creating and showing spinner on web page.
  • Showing colored spinner.
  • Creating growing spinner.
  • Defining the size of spinner.
  • Spinner with button.

 

Module 7 : Client Side Scripting with JavaScript

• Introduction of JavaScript
• What do you mean by scripting language?
• Differentiate client side scripting and server side scripting.
• Introduction of java script.
• How to use java script?
• First “Hello World” in Java script.
• Discussion on syntax of java script.
• Advantage of loosely typed languages over the strongly typed.

• Basic of java script
  • Identifiers in java script.
  • Variable and its scope.
  • What is keyword?
  • What do you mean by operator?
  • Explore typeof operator.
  • Discuss Let and const keyword.
  • Introduction of control flow statement.
  • What do you mean by selection constructs?
  • What do you mean by iteration constructs?

• Function in java script
  • What do you mean by function?
  • Advantage of using function.
  • Types of function in java script.
  • Creating user defined function.
  • Ways to create user defined function.
  • Local and global scope of variable.
  • What do you mean by strict mode?
  • Discussion on built in functions.
  • Anonymous function in java script.
  • Discuss array function.

• Events in java script
  • What is event?
  • Different event and its uses in java script.
  • Demonstrating click event in java script.
  • Demonstrating double click event in java script.
  • Demonstrate the code of java script to change image using mouse over and out event.
  • Demonstrating change event on drop down list in java script.

•  Object in java script
  • What do you mean by object?
  • Advantages of using object.
  • Creating object in java script.
  • How bind properties and method in object.
  • Accessing member of object.
  • Use of this keyword in java script.
  • What do you mean by Date object?
  • Showing running time on the text box.

• String in java script
  • What do you mean by string?
  • Finding the length of string.
  • Finding sub string from given string.
  • Searching string from given string.
  • Extracting string in different ways.
  • Extracting domain from web address.
  • Replacing string in given string.
  • Converting string in lower and upper.
  • Joining two strings in java script.
  • Removing extra spaces from string.
  • Extracting character from given string.
  • Conversion from string to array.

• Number in java script
  • What do you mean by number?
  • Discussion on number and floating point.
  • Description on precision of floating point numbers.
  • Difference between joining string and adding number. 
  • What do you mean by NaN and its type?
  • Mean by infinity.
  • Properties and methods of number.
  • Finding minimum value and maximum value.

• Array in java script
  • What do you mean by array?
  • Creating and accessing array element in java script.
  • Role of new keyword in java script.
  • Discuss array is object or both are different?
  • Array properties and method.
  • Adding and removing element in/from an array.
  • What do you mean by associative array?
  • Converting array into string.
  • Join two arrays.
  • Shifting array elements.
  • Slicing operation on an array.
  • Arranging array element in ascending or descending order.

• Type conversion in java script
  • What do you mean by type casting?
  • How many types of type casting in java script?
  • Discuss conversion in java script.

• Form control with JavaScript
  • Syntax to accessing form control in java script.
  • Showing full name after adding first name and second on text box. 
  • Demonstrate the events on drop down list.
  • Demonstrate the events on radio button.
  • Demonstrate the code to check status of radio button(checked/Unchecked)
  • Demonstrate the code to check status of checkbox(checked/Unchecked)
  • Accessing radio button in java script. Discuss the index of radio button.
  • Demonstrate the java script code to create exam portal.

Module 8 :  DOM 

• Introduction of DOM.
• Discuss DOM over the java script.
• Ways to access HTML element using DOM.
• Accessing style using DOM.
• Add event listener using DOM.
• Add event handler to an element.
• Remove event listener.
• Create new HTML element using DOM.
• Remove HTML element using DOM.
• Discuss collection object.

Module 9 :  Front end design using React JS

Overview

• Introduction of React.
• Discussion on SPA.
• Features of React JS
• Advantages of react
• Limitations of React

Environment setup

• Install global packages
• Add dependencies and plugin
• Run the server
• Create first react app.

Basic of React

• Discussion on local server.
• How does react work?
• Run the server
• Using HTML with react app.
• Discussion on ES6.

React JS Component

• Discussion on render function.
• Component API
• Brief Component life cycle
• What do you mean by State object?
• Demonstrate the ready state object.
• How to use ready state object?
• Changing the state object.
• What is Props?
• Passing data from one to another component.
• Discussion on props in constructor.
• Discuss the term Mixing.
• What do you mean by JSX?

React JS- Component life cycle

• Discussion of life cycle of components.
• Discuss mounting, unmounting and updating.
• Discussion on Life cycle methods
• Explanation on life cycle

React JS-Events

• What do you mean by event?
• Adding event and specifying event handler.
• Demonstrate example.
• Discuss the use of this keyword.
• Arrow function and bind method.
• Discussion on child events

React JS router

• Install a react router
• Create components
• Add a router

Component inter communication

• Component composition
• Pass data from parent to child
• Pass data from child to parent

React form handling

• Create and render user form with react

• Demonstrate the conditional rendering.

• Discussion on submitting the form.

• Demonstration on validate user input.

• Adding error messages.

• Adding CSS styles with the react app.

Module 10 : Node JS

Introduction 

• Foundation
• Introduction to Node JS framework
• Installing node JS
• Using Node JS to execute scripts
• Discuss NPM
• The package.json configuration file
• Global Vs local package installation

Module in Node JS

• What do you mean by Module?
• Discussion on built-in module.
• Creating and using/including own module.
• Export specific attribute.

HTTP and URL module in Node JS

• Discussion on HTTP module in node.
• Discussion on node JS as server.
• Creating sever using http module.
• Discuss localhost and port no.
• Demonstration on adding http header.
• Discuss the query string and reading it in node.
• Discuss and demonstrate URL module.

Module 11 : MongoDB

• Design Goals, architecture and installation
  • What is the need for Non-RDBMS?
  • Benefits of using Document based data bases
• Introduction to MongoDB
• History of MongoDB
• Features of MongoDB
• What do you mean by NoSQL Database?
• SQL vs NoSQL
• Advantages of NoSQL
• Discussion on MongoDB over RDBMS
• Advantages of using Mongo DB
• Discussion on Mongo Shell Basic Commands

Installation & Basic on Mongo DB

• Discussion on different Datatypes used in MongoDB 
• Installation of Mongo DB
• Demonstration on creating and using database 
• Removing database.
• Adding data in database

Collection & documents

• Discussion on Collection and documents
• Creating and removing collection
• Creating documents
• Removing documents
• Updating documents
• Finding documents
• Query Operation
• Protection queries
• Limiting query result

Operations in MongoDb

• Why use Modules
• What do you mean by Sorting? 
• Discussion & demonstration on Indexing
• Demonstration on advance indexing
• Discussion on Replication
• advantage and disadvantage of replication
• How replication works?
• Need of replication
• Discussion on aggregation
• Discussion on sharding 
• Writing the first script

Export

• Discuss Export 
• Exporting data from Mongo Db collection to JSON 
• Exporting data from Mongo Db collection to CSV
• Creating data backup in Mongo DB
• Restore data in Mongo Db.

Module 12 : Express Framework

• Express Overview 
• Installation of express.
• First example.
• Discussion on request and response.
• Discussion on basic routing.
  • setting up router 
  • Route parameter and queries
• Discussion on get and post method
• Express Cookies management 
• Scaffolding as MVC.
• Connecting to mongo database
• Performing CRUD operations
• Handling form data
• Handling query parameters
• Error handling
• Using templates
• The MVC Pattern
• Building a front end controller
• Defining routes
• Creating actions
• Configuring express to use handlebars
• Using REST reading POST data
• Adding middleware
• Data sources.

CRUD Operations

• Understanding of CRUD operations
• Fundamentals usages of CRUD
• Read/write operations with CRUD