Building Interactive Web Pages Using Modern JavaScript

Building Interactive Web Pages Using Modern JavaScript

This course is part of Frontend Development using React Specialization

Instructor: NIIT

Access provided by KGiSL Educational Institutions

2,372 already enrolled

8 modules

Gain insight into a topic and learn the fundamentals.

12 reviews

Beginner level

No prior experience required

3 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

8 modules

Gain insight into a topic and learn the fundamentals.

12 reviews

Beginner level

No prior experience required

3 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

What you'll learn

Build interactive, optimized, and testable web applications using JavaScript

Skills you'll gain

Tools you'll learn

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

8 assignments

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

Build your subject-matter expertise

This course is part of the Frontend Development using React Specialization

When you enroll in this course, you'll also be enrolled in this Specialization.

Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate

There are 8 modules in this course

Most businesses with a strong online presence wish to provide its consumers a rich interactive user experience. HTML5 and CSS3 frameworks help you build a static web page, that displays content and works on any device. However, to make a page interactive you need a programming language that can be understood by the browsers. JavaScript is one of the core technologies of the World Wide Web.

JavaScript is a versatile language to build both frontend and backend applications. In this learning sprint you will learn about dynamic typing, loops, conditional statements and functions .

What's included

13 videos2 readings1 assignment1 programming assignment

13 videos Total 41 minutes

Context Setting 2 minutes
Identify the different datatypes available in JavaScript 6 minutes
Watch and Repeat : Hello World Alert 2 minutes
Create dynamically typed variables 4 minutes
Watch and Repeat : JavaScript Datatypes 4 minutes
Use conditionals in JavaScript 3 minutes
Use the loop constructs to perform repetitive tasks 3 minutes
Watch and Repeat : Conditional Statements 3 minutes
Modularize the code by creating functions 3 minutes
Watch and Repeat : Functions 4 minutes
Practice Brief 2 minutes
Practice Debrief 3 minutes
Learning Consolidation 1 minute

2 readings Total 20 minutes

Instructions to upload the Programming Assignment Solution 10 minutes
Get Started with JavaScript Routines 10 minutes

1 assignment Total 30 minutes

Get Started with JavaScript Routines 30 minutes

1 programming assignment Total 75 minutes

Getting started with JavaScript Programs 75 minutes

Most of the data exchanged between Client and Server these days is JSON. JSON can contain arrays, objects or a combination of them. In this learning sprint you will learn to structure data using Objects and Array and also apply transformations using Array Methods.

What's included

12 videos1 reading1 assignment1 programming assignment

12 videos Total 54 minutes

Context Setting 2 minutes
Filter, transform and aggregate data using Array functions 9 minutes
Watch and Repeat : Create and Access Array Elements 7 minutes
Watch and Repeat : Perform Array Operations 5 minutes
Watch and Repeat : Using Array Functions 7 minutes
Watch and Repeat : Chaining Array Functions 5 minutes
Watch and Repeat : Create Object Using Initializer and Constructor 7 minutes
Model data using Arrays and Objects 2 minutes
Watch and Repeat : Operations on Complex Data Structures 5 minutes
Practice Brief 2 minutes
Practice Debrief 2 minutes
Learning Consolidation 1 minute

1 reading Total 10 minutes

Wrangle Data using Objects and Arrays 10 minutes

1 assignment Total 15 minutes

Wrangle Data using Objects and Arrays 15 minutes

1 programming assignment Total 75 minutes

Resolve impedance mismatch in task board renderer 75 minutes

Interactive Web Pages provide great User Experience. They just don't respond to user's interactions but also keeps them engaged and coming back for more. JavaScript is the way to build interactive Web Pages. In this learning sprint you will learn to add interactivity by understanding about DOM and DOM Events.

What's included

15 videos1 reading1 assignment2 programming assignments

15 videos Total 47 minutes

Context Setting 1 minute
Select DOM elements 4 minutes
Watch and Repeat : Understanding Document Object Model 2 minutes
Manipulate DOM to add dynamic effects 5 minutes
Watch and Repeat : Perform DOM Manipulation to Retrieve and Remove DOM Elements 4 minutes
Watch and Repeat : Perform DOM Manipulation to Modify Styles and Add New Elements 3 minutes
Create EventHandlers 2 minutes
Watch and Repeat : Handling Events 1 5 minutes
Register and Unregister EventListeners 3 minutes
Watch and Repeat : Handling Events 2 7 minutes
Practice Brief 3 minutes
Practice Debrief 2 minutes
Challenge Brief 3 minutes
Challenge Debrief 2 minutes
Learning Consolidation 1 minute

1 reading Total 10 minutes

Develop Interactive Web Pages using DOM and DOM Events 10 minutes

1 assignment Total 30 minutes

Develop Interactive Web Pages using DOM and DOM Events 30 minutes

2 programming assignments Total 240 minutes

Theme Changer 75 minutes
Develop Tic-Tac-Toe Game 165 minutes

JavaScript can help you saving lot of network bandwidth by preempting server validation and performing client side validation. In this learning sprint you will learn to validate users data using client side JavaScript.

What's included

8 videos1 reading1 assignment1 programming assignment

8 videos Total 29 minutes

Context Setting 2 minutes
Perform client-side validations 5 minutes
Communicate errors for invalid inputs 4 minutes
Watch and Repeat : Product Feedback Form 9 minutes
Watch and Repeat : Product Feedback Form Toggle Display 3 minutes
Practice Brief 2 minutes
Practice Debrief 4 minutes
Learning Consolidation 1 minute

1 reading Total 10 minutes

Validate User Data using Client Side JavaScript 10 minutes

1 assignment Total 30 minutes

Validate User Data using Client Side JavaScript 30 minutes

1 programming assignment Total 75 minutes

Develop contact form with validation 75 minutes

One of most popular protocols used for exchange of information is HTTP. Browsers and Application Servers exchange information using HTTP Protocol. In this learning sprint you will learn about HTTP, HTTP Methods and how do we exchange information with Application Servers.

What's included

8 videos1 reading1 assignment1 programming assignment

8 videos Total 32 minutes

Context Setting 1 minute
Make HTTP calls 6 minutes
Watch and Repeat : Understanding HTTP and HTTP Methods 6 minutes
Handle HTTP responses 3 minutes
Watch and Repeat : Making HTTP Calls with XHR 8 minutes
Practice Brief 3 minutes
Practice Debrief 4 minutes
Learning Consolidation 1 minute

1 reading Total 10 minutes

Interact with Application Servers using HTTP Protocol 10 minutes

1 assignment Total 30 minutes

Interact with Application Servers using HTTP Protocol 30 minutes

1 programming assignment Total 75 minutes

Implement Persistence on Contact form data 75 minutes

There are tasks which can make pages Unresponsive. Like getting data from the server can be time consuming and can hinder user from using the rest of the application, until the data is received. You will learn to build asynchronous applications using Promises and Callbacks to provide uninterrupted responsive experience to users.

What's included

11 videos1 reading1 assignment2 programming assignments

11 videos Total 42 minutes

Context Setting 3 minutes
Use callbacks for asynchronous programming 5 minutes
Watch and Repeat : Change Background Color Using Callbacks Every 3 Seconds 7 minutes
Use promises for asynchronous programming 6 minutes
Watch and Repeat : Fetch Currency Exchange Rates Using Promise 5 minutes
Watch and Repeat : Fetch Task Board Data Using Callback 6 minutes
Practice Brief 2 minutes
Practice Debrief 2 minutes
Challenge Brief 3 minutes
Challenge Debrief 3 minutes
Learning Consolidation 2 minutes

1 reading Total 10 minutes

Build Asynchronous Data Driven Applications Using Promises and Callbacks 10 minutes

1 assignment Total 30 minutes

Build Asynchronous Data Driven Applications Using Promises and Callbacks 30 minutes

2 programming assignments Total 240 minutes

Develop Promise driven HTTP Client 75 minutes
Develop UI to Fetch and Display Contact Form Data 165 minutes

Static resources like JS, CSS, images usually take large share of network bandwidth causing slow and unresponsive user experience. In this learning sprint you will learn to optimize static assets which is faster and responsive user experience.

What's included

9 videos1 reading1 assignment1 programming assignment

9 videos Total 33 minutes

Context Setting 2 minutes
Create server-side scripts for Node.js 2 minutes
Watch and Repeat : Create Node.js application 5 minutes
Write bundling logic for minification 5 minutes
Watch and Repeat : Minification 2 minutes
Watch and Repeat : Bundling using Webpack 9 minutes
Practice Brief 3 minutes
Practice Debrief 3 minutes
Learning Consolidation 1 minute

1 reading Total 10 minutes

Optimize delivery of static assets using JavaScript 10 minutes

1 assignment Total 30 minutes

Optimize delivery of static assets using JavaScript 30 minutes

1 programming assignment Total 75 minutes

Optimize static assets of contact form application 75 minutes

Producing top quality products requires rigorous testing. Web isn't an exception. In this learning sprint you will learn to think and write test cases using JavaScript Libraries to test your Web Application.