Learning path
/ JavaScript

JavaScript is a popular scripting language that is widely used for web development. Many frameworks have been developed using JavaScript namely, AngularJS, Angular 2, ReactJS, BackboneJS, NodeJS, etc,. This SkillPractical expert designed learning path contains beginner to expert level DIY projects, tests and interview questions. You'll start as a beginner and you'll be advanced by the time you're finished.

Pre-requisites: Familiarity with HTML and CSS

Hands-On JavaScript
Hands-on ReactJS
Hands-on NodeJS

Take our Free Trial

Unlimited access to our full library of Learning Paths with Hands-on DIY's, Tests and Community IQ's

Start Learning for Free

Students 823
Avg Duration hr
Projects2
Tests4
Community29

Level 01 Hands-On JavaScript

JavaScript is a text-based programming language used both on the client-side and server-side that allows you to make web pages interactive. Where HTML and CSS are languages that give structure and style to web pages, JavaScript gives web pages interactive elements that engage a user.

Javascript is a MUST for students and working professionals to become great Software Engineers especially when they are working in Web Development Domain. Javascript is the most popular programming language in the world and that makes it a programmer’s great choice. Once you learned Javascript, it helps you developing great front-end as well as back-end software using different Javascript-based frameworks like jQuery, NodeJS, etc.

This level in SkillPractical JavaScript Learning Path is designed by our experts to give our learners the best way to LEARN real-time JavaScript projects using ReactJS and NodeJS, PRACTICE competitive tests, and PREPARE for Interviews.

DIY Projects

Making an EMI Calculator using HTML and JavaScript

Not Completed

Beginner

3 Step

Learn Project

Developing Restful webservices with Node.js & Express & Mongo DB

Not Completed

Beginner

2 Step

Learn Project

Integration With Stripe API

Not Completed

Beginner

3 Step

Learn Project

Learn HTML, CSS, and JavaScript from Scratch

Not Completed

Intermediate

5 Step

Learn Project

Web Application Security: Understanding HTTP Security Headers

Not Completed

Beginner

4 Step

Learn Project

MongoDB: The Complete Guide

Not Completed

Intermediate

6 Step

Learn Project

Learn Object-Oriented Programming in JavaScript

Not Completed

Intermediate

4 Step

Learn Project

Reactive Programming with RxJS

Not Completed

Intermediate

9 Step

Learn Project

Testing Vue.js Components with Jest

Not Completed

Advanced

5 Step

Learn Project

Tests

JavaScript(Latest)

Not Completed

expert

Practice Test

MongoDB

Not Completed

intermediate

Practice Test

Community IQ's

JavaScript Fundamentals

Name primitive data types in JS?

Name 2 syntaxes to access object properties?

List the comparison operators supported by Javascript?

What is callback in JS?

What is hoisting in JS?

What is function expression?

What are the different ways to create objects in JS?

Can array have elements of mixed types?

How many global scopes does JS have?

Is it legal to have objects as elements of array?

How do you create local scoped variables?

Scenario: How to run a function for every 5 minutes?

Basics and other JavaScript related questions

How to insert an element at beginning of array?

What is the difference between undefined and null?

How do you quit a loop?

How to find the type of a variable?

What is an anonymous function?

How to check if a given value is number?

What is the minimum number of execution for a do..while loop?

What are the different syntaxes to create arrays?

How to remove properties from the object?

What is a component. What is a function component?

What is difference between == and ===?

Scenario: What is the output of below code?

jQuery

How to replace innerHTML of a div using jQuery?

How to add table row in jQuery?

Is there an “exists” function for jQuery?

What is jQuery scroll to element?

In jQuery, how to attach events to dynamic html elements?

How to find if an array contains a specific string in JavaScript/jQuery?

How jQuery get specific option tag text?

How to change the href for a hyperlink using jQuery?

How we Create a div element in jQuery?

How $(document).ready equivalent without jQuery?

How to check whether a checkbox is checked in jQuery?

How to select the first element in the dropdown using jquery?

What is jQuery. What are the advantages of jQuery?

Is jQuery a JavaScript or JSON library file?

Does jQuery work for both HTML and XML documents?

What are the jQuery functions used to provide effects?

What is the use of css() method in jQuery?

What are events in jQuery?

What is the significance of jQuery.length?

What is jQuery click event?

Can you tell something about jQuery each() method?

What are the selectors in jQuery. How many types of selectors in jQuery?

Explain how CSS classes can be manipulated in HTML using jQuery?

How to perform jQuery AJAX requests?

Can you explain the difference between jQuery.get() and jQuery.ajax()?

Explain the .promise() method in jQuery?

What is the difference between JavaScript and jQuery?

Is jQuery replacement of JavaScript?

What is $() in jQuery library?

What are the effects methods used in jQuery?

What is the use of toggle() method in JQuery?

What is the purpose of fadeToggle() method in JQuery?

What is the use of delay() method in JQuery?

Is it possible that jQuery HTML work for both HTML and XML document?

What is the use of html() method in JQuery?

Is jQuery library used for server scripting or client scripting?

What is the starting point of code execution in jQuery?

What is the basic requirement to start with the jQuery?

Can you use multiple document.ready() function on the same page?

What is a CDN. What is the goal of CDN and what are the advantages of using CDN?

How can you use a jQuery library in your project?

What is a use of jQuery filter?

What is the difference between the ID selector and class selector in jQuery?

What is the use of serialize() method in JQuery?

What is the use of val() method in JQuery?

What is the difference between prop and attr?

What is the use of the animate() method in jQuery?

How can you disable jQuery animation?

What is JQuery.noConflict?

What is the use of jQuery .each() function?

What is meant by jQuery UI. What is the usage of Draggable, Droppable, Resizable, Selectable in jQuery UI?

What are the methods used to provide effects?

How we can use jQuery in ASP.NET?

How can we use hide() method on a button click using jQuery?

What is the difference between $(window).load and $(document).ready function in jQuery?

How to handle Controls attribute Using jQuery?

How to work with parent(), children() and siblings() methods in jQuery?

What is jQuery Datepicker in jQuery?

How to use scrolling an ASP.NET Multiline Textbox using jQuery?

What is Ajax in jQuery?

Define slideToggle() effect?

Define bind() and unbind elements in jQuery?

How to remove a DOM Element using jQuery?

What is the use of jQuery.ajax method()?

What is an attribute in jQuery?

What are jQuery Events?

How can you find browser and browser version in jQuery?

What is the difference between Map and Grep function in jQuery?

What are jQuery plugins?

What is the difference between bind() and live() method in jQuery?

What is jQuery.holdReady() function?

What is resize() function in jQuery?

Define Add or Remove class in jQuery?

Define jQuery UI Autocomplete?

What is jQuery UI Sortable and how to use it?

Why to use jQuery $ sign?

What is the use of param() method in jQuery?

What is jQuery connect and how to use it?

What is the difference between jquery.size() and jquery.length?

Scenario: Can you write a jQuery code to select all links inside the paragraph?

Scenario: Can you use any other name in place of $ (dollar sign) in jQuery?

Scenario: Which of the two lines of code below is more efficient and why?

Scenario: Can you write a jQuery code selector that needs to be used for querying all elements whose ID ends with string “IB”?

Vue.js

What is a Vue Plugin?

Why is Vue known as a ‘progressive framework’?

What is declarative rendering in Vue.js?

What is vue-loader and mixin in Vue.js?

What are watchers and slots in Vue.js?

What is the Virtual DOM in Vue.js?

What are Async components?

What are render functions. Cite an example?

What is a directive and filters in Vue.js?

What is a dynamic prop?

What is the use of the v-show directive. How is v-show different from the v-if directive?

How would you implement routing in a Single Page Vue Application (SPA)?

What are computed properties?

How can we emit custom events from child components?

How would you toggle a CSS class on an element dynamically?

What are lifecycle hooks in Vue.js. List some lifecycle hooks?

Which directive would you use to loop through the properties of an Object?

How would you implement two-way data binding between an input box and a data attribute?

How would you capture a click event on an element?

When rendering a list of items, what is the role & importance of the ‘key’ attribute?

How would you render raw HTML in a template?

How can props specify type requirements for props?

Which lifecycle hook is ideal for fetching data from an API call?

When is the ‘updated’ lifecycle hook called?

Why shouldn’t we use arrow functions when writing lifecycle hooks or other options/properties in a Vue instance?

When would you use the keep-alive element?

What is the recommended way to manage state in a large Vue application and why?

How would you ensure that the CSS styles defined in a single file component are applied only to that component and not elsewhere?

Scenario: During development, if your Vue app and your backend API server are not running on the same host?

Scenario: Given the template, describe the output of the Vue.js app below?

Scenario: For a comments box, implemented as a element, we want to enable the user to press the enter button on the keyboard?

Scenario: What is the best way to call event.preventDefault() when using Vue?

Scenario: When binding the HTML class, how would you concatenate classes?

Scenario: Quite often developers use the letters ‘vm’ as the variable name to declare a root Vue app instance. e.g. const vm = new Vue()?

Level 03 Hands-on ReactJS

ReactJS is a component-based library (not a framework!!) which is used to develop interactive UI’s. Currently, it is the most popular front-end JavaScript library. It deals with View in the MVC (Model - View - Controller). So, if you are dealing with the applications where data keeps on changing in real time, you should go for React.

This level in SkillPractical JavaScript Learning Path is designed by our experts to give our learners the best way to LEARN real-time ReactJS projects, PRACTICE competitive tests, and PREPARE for Interviews.

DIY Projects

Getting Started with React

Not Completed

Intermediate

3 Step

Learn Project

Testing React Apps with Jest and React Testing Library

Not Completed

Intermediate

7 Step

Learn Project

Advanced React Patterns With Hooks

Not Completed

Advanced

4 Step

Learn Project

Tests

ReactJS

Not Completed

expert

Practice Test

Community IQ's

ReactJS

Is React, a framework or a library. Explain why?

Why are React components defined as ‘declarative’?

What do we mean by ‘state’?

What is ‘JSX’ in React?

What is a prop in React?

What is the purpose of the create-react-app?

What is the use of context in React?

What is a stateful component In ReactJS?

What is a synthetic event?

What is the use of dangerouslySetInnerHTML?

What is the Virtual DOM In ReactJS?

What is the purpose of the ReactDOM package?

What is the use of keys when rendering a list of items/components?

List major lifecycle methods that a React component offers?

What are controlled components in React?

What is Strict Mode in React?

What are forwarding refs?

How would you ensure that a component only re-renders when its props update?

A component is usually mounted into the nearest parent’s DOM as a child node?

What are higher-order-components (HOCs)?

How would you render a list of items from an Array. Demonstrate that with an example?

How would you handle a button click in a React component?

How can you gain direct access to a component’s underlying DOM element?

How would you access the value of an input box?

How would you intercept an error in a child component?

Why shouldn’t you use an index value of the Array as a ‘key’ when rendering lists?

How would you set an initial state for a component?

How and where should you fetch data from an API in a component?

How would you lazy-load components in a large React application?

Why are class methods such as event handler methods bound to ‘this’ in the constructor?

We know that components re-render when either the props or the state updates such as when using setState()?

When creating a component using classes why do we call super() in the constructor?

Scenario: How to check if a variable has certain symbols in React?

Scenario: How can I manipulate a 2D array in React?

Scenario: Using toFloat and setState on number input in React?

Scenario: REACT conditionally rendering a alert if field left blank?

Scenario: Should a React component use (fixed) values not on state or props?

What would be the output of this component?

Scenario: You wrote and deployed a function component. At a later stage in the development process, you felt the need to add local state to the component?

Level 03 Hands-on NodeJS

Node. js is primarily used for non-blocking, event-driven servers, due to its single-threaded nature. It's used for traditional web sites and back-end API services, but was designed with real-time, push-based architectures in mind.

This level in SkillPractical JavaScript Learning Path is designed by our experts to give our learners the best way to LEARN real-time NodeJS projects, PRACTICE competitive tests, and PREPARE for Interviews.

DIY Projects