JS Roadmap

Git

Task:

Set your user name (user.name) and email address (user.email) using terminal
Create a GitHub repository for the js assignments with the main branch as default branch.
Create a new branch, update ReadMe with description, Add LICENSE file (Apache 2.0) and create a Pull request assigning it to me (https://github.com/adityasharma7/hc-js-assignment)

Reference:

HTML:

Task:

Create a Registration and Login page for an eCommerce website

Reference:

https://blog.dareboost.com/en/2020/05/preload-prefetch-preconnect-resource-hints/

CSS Basic:

Reference:

JS

JS Module 1:

Task:

Find out about the most popular JavaScript frameworks. (At least 5)
Find out about the most popular open-source JavaScript frameworks. (At least 5)
Provided the following array: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] Filter out odd, even, and prime numbers and print them
Provided the following array: [0, 2, 4, 6, 8, 10, 12, 14, 16], generate and print another list such that:
1. Every element being twice of elements in the current list.
2. Every element being half of the elements in the current list.
Provided the following array: [10, 1, 42, 36, 4, 75, 6, 97, 81, 19, 10]
1. Find the sum, min, and max
2. Print “List is full of prime no” if every element is prime
3. Print “List has a prime no” if there is a prime no in it
4. Remove duplicate values from the list () Note: Use loops for above problems
What will be the output for below code:
1. console.log(typeof undefined)
2. console.log(typeof null)

Higly recomended:

let & const in JS 🔥Temporal Dead Zone | | Namaste JavaScript Ep. 8

JS Module 2:

Task:

Find the difference between Object and Map.
Identify the difference between regular functions and arrow functions
Provided the following array: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] , filter out odd, even, and prime numbers and print them
Provided the following array: [0, 2, 4, 6, 8, 10, 12, 14, 16], generate and print another list such that:
1. Every element being twice of elements in the current list.
2. Every element being half of the elements in the current list.
Provided the following array: [10, 1, 42, 36, 4, 75, 6, 97, 81, 19, 10]
1. Find the sum, min, and max
2. Print “List is full of prime no” if every element is prime
3. Print “List has a prime no” if there is a prime no in it
4. Remove duplicate values from the list. Note: Use map(), filter(), reduce(), some() and every() methods for above problems
5. Remove duplicate values from the list without using loop or any of the above methods (map(), filter(), reduce(), some() and every())
Provided an array of integers, find if there are any duplicates in the array.

Output: true - if any value appears at least twice in the array, false - if every element is distinct.

Example: Array -> [10, 1, 42, 36, 4, 75, 6, 97, 81, 19, 10] Output -> true

Array -> [10, 1, 42, 36, 4, 75, 6, 97, 81, 19] Output -> false
Provided array: [10, [1, 42], 36, [4, 75, [6, 97], 81], 19, 10]
1. Flatten array to [10, 1, 42, 36, 4, 75, [6, 97], 81, 19, 10]
2. Flatten array to [10, 1, 42, 36, 4, 75, [6, 97], 81, 19, 10]
3. Implement logic to flatten such arrays for any level. All the arrays of any depth should be flattened to single depth

Reference:

Array.prototype.flat() - JavaScript | MDN

Module 3:

Task:

Provided following array:
```
[
  {“id”: 1, “name”: “Amit Kumar”, “age”: 25},
  {“id”: 2, “name”: “Rahul Dixit”, “age”: 20},
  {“id”: 3, “name”: “Ravi Joshi”, “age”: 55},
  {“id”: 4, “name”: “Rohit Verma”, “age”: 35},
  {“id”: 5, “name”: “Ajay Jain”, “age”: 17},
]
```
1. Print id and name of the youngest and oldest person
2. Create another list having id and name of all the person above 18 years
3. Find the average age
4. Create 2 list with names starting with only ‘A’ and ‘R’ respectively
Note: Use map(), filter(), reduce, some() and every() methods for above problems
Try the below code and identify which of the below programs are a valid case of hoisting?
1. Program 1:
```
a = 10;
console.log(a);
var a;
```
1. Program 2:
```
a = 5;
console.log(a);
let a;
```

JS Module 4:

JS Module 5:

Task: -

Implement 2 event listener on click event of which one executes on bubbling and while other on capture

Reference:

Bubbling and capturing

JS Module 6:

Task: -

To change the background color of the second column of a table having “n ” rows on click by using querySelector.

JS Module 7:

Resource loading: onload and onerror
Popups and window methods
Binary data, files
LocalStorage, sessionStorage
Static properties and methods
Private and protected properties and methods
Class checking: "instanceof"

Task: -

To create a textarea and if a user makes changes to it without saving then show an alert that data is not saved. (Similar to https://stackoverflow.com/questions/ask)
Change the color of the cell to red when the user clicks on a cell and revert when the user again clicks.

JS Module 8:

Task: -

Change image on runtime when it is not available on the specified path while loading the page.

JS Module 9:

JS Module 10:

Module 11: Expected: 8 hours

WebSocket
SPA (Single Page Applications)
SEO (Search Engine Optimization) and how it works with SPA?
SSR (Server Side Rendering)
CORS (Cross-Origin Resource Sharing)
JavaScript & Typescript Best Practices

Task:

Verify your code comply with the best practices and fix them if required.

Reference:

CSS Advanced

Task:

You are writing a responsive layout for a website that has dramatically different layouts for mobile and desktop. Which of the following media queries would you use and why?
```
@media (max-width: …
@media (min-width: …
```
Cite 3 sources that back up your position. You cannot cite Stackoverflow. Provide links for all sources and time codes for videos.

Vue.js

Module 1:

Task:

Create a basic “Hello World!” Vue application.

Module 2:

Module 3:

Module 4:

Routing
Routing Guards
Working with API
Axios

Task: -

Create a ecommerce-clone branch and push files & folders generated for new fresh app using Vue CLI
Create a new branch from the last task branch and Implement e-commerce web application (Clone any popular website like Amazon, Flipkart etc or any template of your choice) with a home page and top navigation with dead links.
Create a new branch from the last task branch and add a category page which lists all products belonging to the category. Create a new PR with the last task branch as the target branch.
You could use Fakestoreapi or any other public APIs

Module 5:

Event Bus
State Management
Vuex
Composition API

Task: -

Create a new branch from the last task branch. Add features to sort and filter out products based upon price, color or any other field on the category page. Create a new PR with the last task branch as the target branch.
Create a new branch from the last task branch. Implement product details page. Create a new PR with the last task branch as the target branch.

Module 6:

Debugging
Interceptor and its use with Axios
Internationalisation/Localisation in applications
Using Vue I18n

Task: -

Implement Registration and Login page.
Store the token in local storage
Implement a interceptor which adds token to headers
Use Axios cache plugin to cache product API
Update application labels to use internationalization

Module 7:

PWA(Progressive Web App)
Service Worker
Precaching

Reference:

https://developers.google.com/web/tools/workbox/modules/workbox-precaching

Module 8:

SSR in Vue and prerendering
Dynamic content rendering in Vue
Vue best practices
Modes and Environment Variables
Dev Tools ()
Postman Task:
Verify your code comply with the best practices and fix them if required.

Name		Name	Last commit message	Last commit date
Latest commit History 42 Commits
LICENSE		LICENSE
README.md		README.md

License

adityasharma7/js-roadmap

Folders and files

Latest commit

History

Repository files navigation

JS Roadmap

Git

HTML:

CSS Basic:

JS

Recommended

JS Module 1:

JS Module 2:

Module 3:

JS Module 4:

JS Module 5:

JS Module 6:

JS Module 7:

JS Module 8:

JS Module 9:

JS Module 10:

CSS Advanced

Vue.js

Module 1:

Module 2:

Module 3:

Module 4:

Module 5:

Module 6:

Module 7:

Module 8:

Ionic Training

JavaScript Design Patterns

Builder pattern

Free icons for website

Common JavaScript references:

Top Javascript Frameworks and Libraries to Learn

Frontend

Backend

Website Animations Library

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Contributors 6

Uh oh!

Packages