Professional Program in Front-end Web Development

Outcome Driven, Practitioner Designed

This program is designed to build the core competencies i.e., the knowledge and skills required to perform the tasks required
for the Front-end Web Developer job role at the entry-level. Aspiring learners will gain requisite knowledge of key concepts,
technologies and tools to transition into the role, along with an understanding of best practices professionals are expected to
adopt in the industry today. The program is designed to expose the student to a higher magnitude of challenges and will finish
the program with a capstone project that can showcase their knowledge and skills.

Progressively Builds Core Competencies

As part of our holistic approach to making them job-ready we ensure that learners are equipped, not just with technical
competencies, but also the complementary engineering & behavioral competencies.

Initially, this program will help you build a strong programming foundation. You will learn how to analyze and breakdown
simple problems so that you are able to construct a step-by-step approach to solving them. You will then learn how to program
these solutions using the Core Java Programming language. Once you have mastered the basic structured programming
concepts and techniques, you will learn how to do Object Oriented Programming in Java.

Then, you will be introduced to application prototyping. Once you are familiar with this step, the course will teach you the
process of systematically converting prototypes into interactive & responsive web pages that can be accessed from multiple
devices. This will require you to work with HTML5, CSS3, and Bootstrap skills in combination with Modern JavaScript.

Furthermore, you will learn how to analyze and breakdown simple problems so that you are able to construct a step-by-step
approach to solving them. You will then learn how to program these solutions using JavaScript as the programming language.

Finally, you will learn how to build Single Page Applications (SPAs) which allow users to navigate to different parts of a web
application without waiting for the pages to be re-loaded. This is a key aspect of the modern responsive web experience for
end-users. You will learn the popular Angular framework to build such SPAs.

© NIIT – 2022-23 - StackRoute For internal use only Page 1 of 4

Program Structure
We emphasize, that doing this program is not just about
attending virtual live sessions alone – it is also about following
through and completing the hands-on assignments & projects as
well. For an assignment to be considered complete, learners
must refactor their solution after getting it reviewed. Assignment
completion is necessary to move forward in the program.

The typical structure of a StackRoute program is shown in the

adjacent figure. At the top level, a program is mapped to the
target job role. In turn, the target job role is decomposed into its
constituent competencies which are broken down into the
associated collection of tasks that the job aspirants should be
able to do with confidence & precision. Tasks are in turn mapped
to the associated conceptual knowledge & skills along with the
associated tools, techniques, and best practices.

Structurally, the program is broken down into individual courses. Each course focuses on competency development – either
introducing a new competency or enhancing an existing one to the next level. Learning sprints within a course typically require
minimum 10 hours of learning effort. Each learning sprint is mapped to a distinct task. It is built around a challenge that
validates a learner’s ability to perform that task effectively and provides granular feedback to the learner as well as the mentor.
By completing all activities in a Learning Sprint, learners acquire the necessary knowledge & skills to complete a task and master
the associated concepts. It is expected that learners spend 70% of the learning effort in a sprint on doing hands-on practice or
reviewing & refactoring their work to complete the sprint.

The table below details the competencies developed and the associated learning outcomes.

Course Name Brief Description Learning Sprints Topics, Tools, and Techniques Covered
1. Programming Apply problem  Decompose a problem  Logic Building and Writing Algorithm
Foundation using solving techniques into step-by-step  Datatypes, Keywords in Java
Java to decompose a solution  Operators - Unary, Binary and Ternary
problem into  Introduction to Java,  Conditional statements (If … else)
computational variables, datatypes  Looping statements (for, while, do..while)
steps. Then, and operators  Functions (Arguments, return value)
translating the  Implement Conditional
steps into a Constructs
program using the  Looping Constructs
Core Java language  Implement Modular
Programming using
Functions
2. Java Language Implement  Unit Testing with JUNIT  Unit Testing using JUnit
Fundamentals program logic using  Working with Arrays  Implement single dimensional arrays
basic building  Implement Sorting  Sorting Techniques like Bubble Sort
blocks of Core Java. Algorithms  Using recursion
You will build,  Implement Recursion  Strings manipulations with in-built String
compile, test and  Java String functions
run Java programs. Manipulations

© NIIT – 2022-23 - StackRoute For internal use only Page 2 of 4

3. Object Oriented Introduction to how  Introduction to Object  Classes and Objects
Programming real-world objects Oriented Programming  Abstraction
is represented in  Creating Objects and  Encapsulation
programs. Learn to Constructors  Access Specifiers (private, public,
identify objects for  Implement Data protected)
a given problem Abstraction and  Inheritance, Types of Inheritance
and write object- Encapsulation  Abstract class and Interfaces
oriented programs  Implement Inheritance  Polymorphism
in Java  Implement  Overloading, Overriding
Polymorphism
4. Develop This course helps  Develop a Web Page  Introduction to HTML
Responsive Web you acquire the using HTML5  Anatomy of an HTML document
Pages using skills to build  Structure a Web Page  Create web page using various HTML
HTML5 and CSS3 Responsive Web using Semantic HTML5 elements
Pages that can elements  HTML5 semantic elements
adapt to multiple  Style a Web Page using  Use of ARIA labels by screen readers
devices. In this Basic CSS Properties  Apply styles using CSS properties
course, you will and CSS Box Model  Create layout by using CSS Box model
learn to structure  Structure a web page  CSS Floats to create multi-column layout
and style web using CSS Floats  CSS Position properties
pages using HTML5  Develop a Responsive  Responsive web design patterns
and CSS3. Web Page Using  Flexbox and grid
Modern CSS  CSS Media Queries
 Develop a Responsive  Introduction to Bootstrap Framework
Web Page Using  Bootstrap 12 column grid layout
Bootstrap  Various Bootstrap components
 Bootstrap utilities
5. Developing Basic In this course, you  Getting Started with  Introduction to client-side JavaScript
Programs using will explore basic JavaScript  Variable declaration and initialization
JavaScript programming  Implement Modular  Operators
concepts and solve Programming using  Conditional statements
simple Functions  Loop statements
computational  Implement Unit Testing  Functions
problems using  Testing libraries
JavaScript.
6. Building In this course, you  Utilize Arrays to Model  Array declaration and initialization
Interactive Web will learn to use Aggregate Data  Objects
Pages using JavaScript to add  Perform Common  Array methods
Modern behavior to your Array Operations using  Chaining Array methods
JavaScript web pages and JavaScript Array  JSON
make them Methods  HTTP requests and responses
interactive  Model Real World Data  DOM
Using Objects  Callbacks
 Implement Stateless  Promises
Communication using
REST APIs and JSON
 Develop Interactive
Web Pages using DOM
and DOM Events
 Interact with
Application Servers
using HTTP Protocol

© NIIT – 2022-23 - StackRoute For internal use only Page 3 of 4

7. Building Single In this course, you  Build Interactive Web  Introduction to TypeScript
Page Applications would develop Pages with TypeScript  Single Page Application
Using Angular Single Page  Develop SPA using  Angular Framework
Applications with Angular Components  Angular Module
type-safe reusable  Implement Unit Testing  Directives
components and for Angular  Angular Components
interactive views Components and  Data Binding
using Angular. Services  Testing using Jasmine and Karma
 Implement Interactions framework
between Angular  Component Hierarchy
Components  Component Interaction
 Build Reusable  Angular Services
Application Logic using  Observable
Angular Services  HttpClient
 Life cycle methods
8. Building SPA with This course  Style a Single Page  Material Design
Complex Forms introduces you to Application using  Angular Material
and Navigable the fundamentals Angular Material  Angular Material Components
Workflows Using of designing  Develop Interactive  Themes
Angular interactive and Template Driven Forms  Schematics
navigable views. Inside SPA  Template-driven Forms
 Develop Interactive  Reactive Forms
Reactive Forms inside  Angular Routing
SPA  Route Guards
 Implement Navigation
using Angular Routing
 Guarding Routes in
Angular
9. Project In this project,  Project Brief  As part of this project, you will be
learners will  Project Sprints provided access to project artifacts. You
develop front-end  Project Final will have to develop interactive and
solutions for the Presentation and responsive frontend single page
given problem walkthroughs application using Angular. In the end, you
statements using will have to present your solution, design
Angular. They will and the code for evaluation.
build interactive
and responsive
Single Page
Applications (SPAs)
using the skills
acquired from the
HTML5, CSS3,
Modern JavaScript
and Angular
courses.

© NIIT – 2022-23 - StackRoute For internal use only Page 4 of 4