Front End Development Bootcamp

Learning Objective:

By the end of this module you'll understand a different kind of HTML tags

Topics :

• Different kinds of tags
• Attributes
• Headings
• Paragraphs
• Comments

Hands On:

Create a basic HTML page with several heading tags, paragraphs and add documentation comments using HTML comments

Learning Objective:

By the end of this module learn how to navigate within the web page and outside the web page using links

Hands On:

Create an HTML page with several navigation links that opens a new page in the same page. Also using id based navigation, navigate within the page

Learning Objective:

By the end of this module learn how to display images in HTML page using IMG tag

Hands On:

Create an HTML page that displays local and remote images

Learning Objective:

By the end of this module learn how to draw HTML tables

Hands On:

Create an HTML page that displays table data

Learning Objective:

By the end of this module learn how to render ordered and unordered list

Hands On:

Create an HTML page and display ordered and unordered lists

Learning Objective:

By the end of this module how to display HTML code using entities and also learn how to embed a webpage into another web page using iframe

Hands On:

Create an HTML page that displays HTML by escaping using entities and also embed another document in a document using iframe

Learning Objective:

By the end of this module how to create HTML forms using different HTML form controls

Topics

• Forms
• Form Elements
• Input Types
• Input Attributes

Hands On:

Create an HTML form using different form input like text, textarea, checkbox, radio button, button and dropdown list

Learning Objective:

By the end of this module understand the overview a new features of HTML5

Topics:

• HTML5 Intro
• HTML5 Support
• HTML5 New Elements
• HTML5 Semantics
• HTML5 Migration
• HTML5 Style Guide

Learning Objective:

By the end of this module how to do graphic programming in HTML page using SVG and canvas

Topics

• Canvas
• SVG

Learning Objective:

By the end of this module learn how to make click work with multimedia in HTML

Topics

• Video
• Audio

Hands On:

Create html page that displays audio and video using multimedia tags

Learning Objective:

By the end of this module learn how to use geolocation and HTML storage API

Topics

• Geolocation
• Web Storage

Hands On:

Create an HTML page that stores and retrieves data from web storage also access user location using geolocation API.

Learning Objective:

By the end of this module learn how to use HTML5 form features to develop more rich and efficient forms

Topics :

• New Form elements
• Form validation and attributes

Hands On:

Create HTML form using new HTML5 form elements also validate form using validation attributes

Learning Objective:

By the end of this module you will learn the what and why of CSS, its syntax and different places styles in document

Topics :

• What is CSS?
• Why CSS?
• Syntax
• placing styles in document

Hands On:

Create HTML page and implements embedded CSS, external CSS and inline styles

Learning Objective:

By the end of this module you will learn about CSS selectors basics

Topics:

• Element
• Id
• class
• attribute
• inline styling

Hands On:

Create HTML page that use element, id, class and attribute selectors

Learning Objective:

By the end of this module you will learn about CSS colors and backgrounds

Topics :

• CSS Colors
• CSS Backgrounds

Hands On:

Create HTML page that apply colors and background colors to different HTML elements

Learning Objective:

By the end of this module you will understand about the box model

Topics:

• Understanding box model
• CSS Borders
• CSS Margins
• CSS Padding
• CSS Height/Width
• CSS Outline
• CSS Box Sizing

Hands On:

Create HTML page that demonstrates the box model and apply borders, margins, paddings to div and paragraphs

Learning Objective:

By the end of this module you will how to style text and fonts

Topics:

• CSS Text
• CSS Fonts

Hands On:

Create HTML page that styles text and font using several CSS properties

Learning Objective:

By the end of this module you will learn how to style links, lists and tables

Topics:

• CSS Icons
• CSS Links
• CSS Lists
• CSS Tables

Hands On:

Create HTML page that styles links, lists and tables

Learning Objective:

By the end of this module you will learn about different values of display property and their impact on the layout

Topics :

• CSS Display
• CSS Inline-block

Hands On:

Create HTML page that demonstrates the CSS display property values like inline, block, inline block, table, table-row, table-cell etc.,

Learning Objective:

By the end of this module you will to position elements, alignments, make layouts using float, issues and fixes of using float

Topics:

• CSS Position
• CSS Float
• CSS Overflow
• CSS Align

Hands On:

Create an HTML page with header, sidebar and main content layout

Learning Objective:

By the end of this module you will learn about the CSS specificity and more advanced CSS selectors

Topics:

• CSS Specificity
• CSS Combinators
• CSS Pseudo-class
• CSS Pseudo-element

Hands On:

Create an HTML page that demonstrates the usage of several different advanced CSS combinators

Learning Objective:

By the end of this module you will learn about the CSS 3 features about rounded corners,gradients,shadows, transitions and animations

Topics:

• CSS Rounded Corners
• CSS Border Images
• CSS Backgrounds
• CSS Colors
• CSS Gradients
• CSS Shadows
• CSS Text Effects
• CSS Web Fonts
• CSS 2D Transforms
• CSS Transitions
• CSS Animations

Hands On:

Create an HTML page that takes advantage of CSS 3 features to present visually rich and animated presentation

Learning Objective:

By the end of this module you will learn how to layout web page using powerful flexbox

Topics:

• Flexbox Intro
• Flexbox Container
• Flexbox Item

Hands On:

Create an HTML page and layout elements using flexbox

Learning Objective:

By the end of this module you will learn how to layout web page using powerful grid

Topics:

• Grid Intro
• Grid Container
• Grid Item

Hands On:

Create an HTML page and layout elements using grid

Learning Objective:

By the end of this module you will learn how to write media queries to develop responsive web pages

Hands On:

Create an HTML page that changes layout based on the screen width

Learning Objective:

By the end of this module you will learn about what is source control and its importance

Learning Objective:

By the end of this module you will learn what is git and its features

Topics:

• What is git
• Why git
• Features of git

Learning Objective:

By the end of this module you will learn how to setup git

Learning Objective:

By the end of this module you will understand the basic workflow in using git for day to day activities

Learning Objective:

By the end of this module you will learn how to edit, view and configure git settings

Topics

• First-Time Git Setup
• Set email and username
• Set config editor
• Checking Your Settings

Hands On:

Use GIT config command to edit settings

Learning Objective:

By the end of this module you will learn how to initialize a new repository and clone the existing remote repository

Topics:

• Initialize repository
• Clone a repository

Hands On:

Use git init to create new repository and git clone command to clone the remote repository

Learning Objective:

By the end of this module you will learn how to inspect the changes and status of the repository

Topics:

• View changes
• View commits
• View differences

Hands On:

Use git status command to verify the status of the repository, use git log command to view the commits and use git diff command to compare the file changes

Learning Objective:

By the end of this module you will learn how to add changes to stage and commit changes to local repository

Topics:

• Adding files to stage
• Committing files to local repo

Hands On:

Use git add command to add files to stage and git commit to commit the changes to repo

Learning Objective:

By the end of this module you will learn what is github and how to set up account with github

Topics:

• What is Github
• Other alternatives
• Creating an account in github

Hands On:

Create an account with github

Learning Objective:

By the end of this module you will learn how to push the local changes to the remote repository and how to pull the changes from the remote repository

Topics:

• Push changes to the remote repo
• Pull changes

Hands On:

Use git remote to add the remote repository details to local repository, use git push to push local changes to remote and use git pull and git fetch to pull changes from remote

Learning Objective:

By the end of this module you will learn how to rollback the changes in repository and also learn how to unstage the changes

Topics:

• Reverting the changes to a commit
• Reset changes from stage

Hands On:

Use git revert to revert previous commits and git reset to reset the files changes from stage

Learning Objective:

By the end of this module you will learn how to manage branches

Topics:

• Create a branch
• Checkout branches
• Merge branches

Hands On:

Use git branch to list branches, git checkout to create and checkout branch and git merge to merge changes from another branch

Learning Objective:

By the end of this module you will gain insight about JS features and its support across browsers. Also learn about data types and debugging JS apps,different operators and their uses

Topics:

• What is JavaScript?
• Why JavaScript?
• Advantages and Limitations
• JS Versions
• Browser compatibility
• Explore JS syntax
• Using console
• JS comments
• Variables and Data types
• Debugging using chrome developer tools
• Expressions and operators
• Assignment operators
• Comparison operators
• Arithmetic operators
• Bitwise operators
• Logical operators
• String operators
• Conditional (ternary) operator

Hands On:

Create basic JS program that uses different data types and debug it in chrome, multiple expressions made of different operators

Learning Objective:

By the end of this module you will learn about how to use conditionals in JS, how to use iterative statements and differences between them

Topics:

• if
• if..else
• if..elseif
• switch
• for statement
• do..while statement
• while statement
• break statement
• continue statement
• for..in statement
• for..of statement (ES6)

Hands On:

Create JS program which implements decision based program flow using different if types and switch. Create JS programs that iteratively prints numbers with different types of loops

Learning Objective:

By the end of this module you will learn how to define different types of functions and differences between them. You also explore the scope, context and powerful function api

Topics:

• Define functions
• Parameters
• Scope, context and hoisting
• Named, Anonymous and function expressions
• Function invocation
• Call, apply and bind
• Callbacks
• Closures

Hands On:

Create named functions, anonymous functions, function expressions, use call, apply and bind to change the context. Create closures to simulate private variables

Learning Objective:

By the end of this module learn how to work with arrays

Topics:

• What is an array?
• CRUD operations with array
• Most commonly used array methods

Hands On:

Create Arrays using literal and constructor syntax. Perform CRUD operations on array and use functional programming styled methods like map, filter etc.,

Learning Objective:

By the end of this module you will learn how to perform operations with string and date object

Topics:

• Creating Strings
• Most commonly used string methods
• Creating Dates
• Most commonly used Date methods

Hands On:

Create string as primitives and objects, Date instances. Use most commonly used string methods.

Learning Objective:

By the end of this module learn how to create objects in different syntaxes,access object properties, using accessors and implementing inheritance

Topics:

• What is Object?
• Different ways to create objects?
• Constructors and object instances
• Accessing properties with dot and bracket notation
• Getters and setters
• What is "this"?
• The Object constructor and its methods
• Working with prototype
• Prototypal inheritance

Hands On:

Create object using literal, constructor function, Object constructor. Create getters and setters, Implement inheritance using prototype

Learning Objective: 

By the end of this module you will learn how to handle errors

Topics:

• Try..catch
• Types of Errors

Hands On:

Create a JS program to throw and catch expections

Learning Objective:

By the end of this module you will learn how to work with HTML DOM

Topics:

• What is DOM?
• Why DOM?
• Understand Document object
• CRUD with DOM
• Traversing DOM
• working with events

Hands On:

Create a dynamic table with CRUD operations

Learning Objective:

By the end of this module you will learn how to take advantage of modern browser features to read geolocation, access browser history and cookies

Topics:

• Window Object
• History Object
• Navigator Object
• Timers
• Cookies

Hands On:

Create a program to read user geolocation and write it to cookie and delete after timeout

Learning Objective:

By the end of this module you will learn how to manage HTML forms with JS

Topics:

• Setting and Getting values from form elements
• Validating forms

Hands On:

Create form with validation and submission features

Learning Objective:

By the end of this module you will learn how to consume data from remote api using inbuilt browser features

Topics:

• Understanding AJAX programming
• Working with promises
• Working in fetch
• What is JSON?
• Why JSON?
• Data Types?
• Parse and Stringify JSON
• Objects and Arrays in JSON

Hands On:

Create a program that performs CRUD on mock REST Api

Learning Objective:

By the end of this module you will learn next generation javascript syntaxes which help you write better JavaScript code

Topics:

• Introduction to Babel
• Let & const
• Temporal Dead Zone
• Template Strings
• Array Destructuring
• Object Destructuring
• Spread and Rest Operators
• Arrow functions
• Default function Arguments
• Object Literal Short hand properties and methods
• Object Literal Computed Keys
• Iterable and Iterators
• Promises
• Generators
• Async/Await

Hands On:

Create JS code that applies the next generation JS syntaxes

Learning Objective:

By the end of this module you will learn how new data structures in ES6 will help you to manage data with standard api

Topics:

• Map and Weak Maps
• Sets and Weak Sets

Hands On:

Create a JS code that performs CRUD using Map, Weak Map, set and Weak Set

Learning Objective:

By the end of this module you will learn how new ES6 modules will help you modularize you JS code and load modules using SystemJS

Topics:

• Introduction
• working with modules
• export, import and default export

Hands On:

Create a module. Import and export module

Learning Objective:

In this project you will you all skills acquired so far in this course

Classroom Project

• Issue Tracker Application

Hands On:

Create a issue tracker application with CRUD features

Learning Objective:

Understand how react makes things performant, learn how to set up, run and debug a react app

Topics:

• What is React?
• Why React?
• React version history
• React 16 vs React 15
• Just React - Hello World
• Using create-react-app
• Anatomy of react project
• Running the app
• Debugging first react app

Hands On:

Install create-react-app and create a new react project

Learning Objective:

Understand the significance of JSX and know its syntax and features

Topics:

• Working with React.createElement
• Expressions
• Using logical operators
• Specifying attributes
• Specifying children
• Fragments

Hands On:

Create JSX expressions with different javascript expression, apply css via className and styles, use conditionals

Learning Objective:

Understand the significance of component architecture and learn how to decompose UI into components and compose them back to make UI

Topics:

• Significance of component architecture
• Types of components
• Functional
• Class based
• Pure
• Component Composition

Hands On:

Create class based and functional components

Learning Objective:

Learn how to manage state in class based react component and how to make communication between components using props

Topics:

• What is state and it significance
• Read state and set state
• Passing data to component using props
• Validating props using propTypes
• Supplying default values to props using defaultProps

Hands On:

• Create a stateful component and stateless component.
• Pass data from parent component to child component using props.
• Implement child to parent communication using callbacks

Learning Objective:

Learn how to render lists and use key prop

Topics:

• Using react key prop
• Using map function to iterate on arrays to generate elements

Hands On:

Create component which renders lists iteratively using map function of array

Learning Objective:

Learn about React's synthetic event system and its working

Topics:

• Understanding React event system
• Understanding Synthetic event
• Passing arguments to event handlers

Hands On:

Handle different synthetic events

Learning Objective:

Understand the significance of lifecycle methods and application in real time use cases. Also learn how to handle errors declaratively

Topics:

• Understand the lifecycle methods
• Handle errors using error boundaries

Hands On:

Create a stateful component and implement lifecycle methods. Implement try catch mechanism using error boundaries

Learning Objective:

Understand how to handle forms in react

Topics:

• Controlled components
• Uncontrolled components
• Understand the significance to defaultValue prop
• Using react ref prop to get access to DOM element

Hands On:

Create a component that uses different form controls

Learning Objective:

Understand how to work with global state using context API

Topics:

• What is context
• When to use context
• Create Context
• Context.Provider
• Context.Consumer
• Reading context in class

Hands On:

Create components that get applied with multiple themed styles using context to store theme info globally and apply to all components

Learning Objective:

Understand the need of code splitting and implement the same on a component basis

Topics:

• What is code splitting
• Why do you need code splitting
• React.lazy
• Suspense
• Route-based code splitting

Hands On:

Create react application that implements code splitting and lazy load components using React.lazy and suspense features

Learning Objective:

Understand the need for hooks and implement hooks to access state and effects hook in functional components

Topics:

• What are hooks
• Why do you need hooks
• Different types of hooks
• Using state and effect hooks
• Rules of hooks

Hands On:

Create a functional component that uses the ability of state and life cycle features

Learning Objective:

Understand the significance of routing, configure routing for SPA

Topics:

• Setting up react router
• Understand routing in single page applications
• Working with BrowserRouter and HashRouter components
• Configuring route with Route component
• Using Switch component to define routing rules
• Making routes dynamic using route params
• Working with nested routes
• Navigating to pages using Link and NavLink component
• Redirect routes using Redirect Component
• Using Prompt component to get consent of user for navigation
• Path less Route to handle failed matches

Hands On:

Install and setup router, configure routing rules, implement declarative and imperative navigation

Learning Objective:

Understand how to manage state in just redux in plain vanilla JS app

Topics

• What is redux
• Why redux
• Redux principles
• Install and setup redux
• Creating actions, reducer and store

Hands On:

Create actions, reducer and store. Dispatch actions and subscribe to store changes

Learning Objective:

Understand the challenges of mutability and how immer js helps over the mutability challenges

Topics:

• What is immer?
• Immutability with normal JavaScript objects and arrays

Hands On:

Create immutable JavaScript objects and arrays

Learning Objective:

Understand how to integrate redux into react application

Topics:

• What is React Redux
• Why React Redux
• Install and setup
• Presentational vs Container components
• Understand high order component
• Understanding mapStateToProps and mapDispatchtToProps usage

Hands On:

• Install and setup react redux
• Configure Provider component as top level component
• Migrate react stateful component to connected component

Learning Objective:

Understand the significance of middleware and learn how saga middleware works

Topics:

• Why redux middleware
• Available redux middleware choices
• What is redux saga
• Install and setup redux saga
• Working with Saga helpers
• Sagas vs promises

Hands On:

• Install and setup logger and saga middleware
• Develop sagas use different side effects
• Code sagas to fetch data from remote API using fetch/axios

Learning Objective:

Understand the significance of UI testing and learn how to unit test components, reducers using jest and enzyme

Topics:

• Understand the significance of unit testing
• Understand unit testing jargon and tools
• Unit testing react components with Jest
• Unit testing react components with enzyme

Hands On:

• Understand jest configuration
• Install and setup enzyme
• Write unit test to components and reducers

Learning Objective:

Understand the significance of Webpack and learn how to setup a react project from scratch

Topics:

• What is webpack
• Why webpack
• Install and setup webpack
• Working with webpack configuration file
• Working with loaders
• Working with plugins

Hands On:

• Install and Setup webpack v4
• Create a react boilerplate from scratch