Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adityasharma7/js-roadmap
https://github.com/adityasharma7/js-roadmap
hacktoberfest
Last synced: about 21 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/adityasharma7/js-roadmap
- Owner: adityasharma7
- License: apache-2.0
- Created: 2022-08-16T07:06:21.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-05T04:54:24.000Z (over 1 year ago)
- Last Synced: 2023-03-06T20:27:41.448Z (over 1 year ago)
- Topics: hacktoberfest
- Homepage:
- Size: 186 KB
- Stars: 0
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JS Roadmap
## Git
- [ ] Version Control System - Benefits & types
- [ ] Git - Introduction
- [ ] Configuration - Git config
- [ ] Repository
- [ ] Commit
- [ ] Stages of a file - Untracked, Staged, Tracked & Modified/Dirty
- [ ] .gitignore
- [ ] Diffing
- [ ] Branching
- [ ] Log command
- [ ] Reset and Revert
- [ ] Cherry Pick
- [ ] Merge conflicts
- [ ] Stashing
- [ ] Remote
- [ ] Pull & Push
- [ ] GitHub & GitLab
- [ ] Merge Request
- [ ] Pull Request
- [ ] Forking
Task:
1. Set your user name (user.name) and email address (user.email) using terminal
2. Create a GitHub repository for the js assignments with the main branch as default branch.
3. 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:
1. https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup
2. https://dev.to/smitterhane/git-pull-vs-git-fetch-66m
3. https://learngitbranching.js.org/
4. https://git-scm.com/docs/git-config
5. https://git-scm.com/docs/git-add
6. https://github.com/git-guides/git-init
7. https://www.atlassian.com/git/tutorials/inspecting-a-repository
8. https://www.atlassian.com/git/tutorials/using-branches
9. https://www.atlassian.com/git/tutorials/saving-changes/git-stash
10. https://git-scm.com/docs/git-pull
11. https://www.atlassian.com/git/tutorials/using-branches/merge-conflicts
12. https://docs.github.com/en/get-started/quickstart/hello-world
13. https://docs.github.com/en/get-started/quickstart/fork-a-repo
14. https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests
15. https://www.simplilearn.com/tutorials/devops-tutorial/version-control
16. https://www.javatpoint.com/git-log
17. https://github.com/git-tips/tips
## HTML:
- [ ] Introduction to HTML
- [ ] Elements and Attributes
- [ ] Classes and identifiers
- [ ] Forms & Inputs
- [ ] Semantic HTML
Task:
1. Create a Registration and Login page for an eCommerce website
Reference:
1. https://blog.dareboost.com/en/2020/05/preload-prefetch-preconnect-resource-hints/
## CSS Basic:
- [ ] Introduction to CSS
- [ ] CSS Selectors
- [ ] Inline, Internal, and External CSS
- [ ] CSS Properties
- [ ] Viewport
Reference:
1. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference
2. https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
3. https://uxplanet.org/figma-all-you-need-to-know-156b52b88e54
4. https://www.seobility.net/en/wiki/Viewport
https://flukeout.github.io/
## JS
### Recommended
- [Javascript Essentials](https://www.udemy.com/course/javascript-essentials/) by Lawrence Turton (Udemy Free)
- Namaste JavaScript [Season 1](https://www.youtube.com/playlist?list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP) and [Season 2](https://www.youtube.com/playlist?list=PLlasXeu85E9eWOpw9jxHOQyGMRiBZ60aX) by Akshay Saini (YouTube)
### JS Module 1:
- [ ] Introduction to JavaScript
- [ ] Variables
- [ ] var, let, and const
- [ ] Data types
- [ ] Primitives
- [ ] Type Conversions
- [ ] Operators
- [ ] typeof operator
- [ ] Comparisons
- [ ] Interaction: alert, prompt, confirm
- [ ] Conditional operators: if, '?'
- [ ] Logical operators
- [ ] Loops & iteration
- [ ] The "switch" statement
- [ ] Functions
- [ ] Function expressions
- [ ] console object and its methods
Task:
1. Find out about the most popular JavaScript frameworks. (At least 5)
2. Find out about the most popular open-source JavaScript frameworks. (At least 5)
3. 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
4. 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.
5. 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
6. What will be the output for below code:
1. console.log(typeof undefined)
2. console.log(typeof null)
Higly recomended:
1. [let & const in JS 🔥Temporal Dead Zone | | Namaste JavaScript Ep. 8](https://www.youtube.com/watch?v=BNC6slYCj50)
### JS Module 2:
- [ ] Objects and its methods (Object.keys(), values(), entries())
- [ ] Array
- [ ] Array - flat()
- [ ] Map and Set
- [ ] Garbage Collection
- [ ] Explore map(), filter(), reduce(), find(), some() and every() methods
- [ ] Strict keyword
- [ ] Cookies
- [ ] Arrow functions
Task:
1. Find the difference between Object and Map.
2. Identify the difference between regular functions and arrow functions
3. 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
4. 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.
5. 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())
6. 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
7. 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:
1. [Array.prototype.flat() - JavaScript | MDN ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat)
### Module 3:
- [ ] “this” keyword
- [ ] Constructor functions and the "new" operator.
- [ ] Numbers
- [ ] Strings
- [ ] Array and its methods
- [ ] Hoisting
- [ ] Scoping
- [ ] Super keyword
- [ ] Error Handling, “try...catch”
- [ ] throw keyword
- [ ] Modules
- [ ] export/import
- [ ] Dynamic import
- [ ] Nested functions
- [ ] Classes
- [ ] Class basic syntax
- [ ] Class Inheritance
- [ ] Extending built-in classes
Task:
1. 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
2. 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;
```
2. Program 2:
```
a = 5;
console.log(a);
let a;
```
### JS Module 4:
- [ ] JSON and its methods(toJSON)
- [ ] Rest Parameters
- [ ] arguments keyword
- [ ] Spread Syntax
- [ ] Recursion and Stack
- [ ] Variable Scope
- [ ] Regular Expressions
Task:
- [ ] Implement code to deep clone an object using JSON methods
- [ ] Implement regular expression for name with letters
- [ ] Implement code for sum using recursion
### JS Module 5:
- [ ] DOM
- [ ] Searching: getElement*, querySelector*
- [ ] Introduction to Events
- [ ] Introduction to browser events
- [ ] Bubbling and capturing
- [ ] Event delegation
- [ ] Browser default actions
- [ ] Dispatching custom events
Task: -
1. Implement 2 event listener on click event of which one executes on bubbling and while other on capture
Reference:
1. [Bubbling and capturing](https://javascript.info/bubbling-and-capturing)
### JS Module 6:
- [ ] UI Events
- [ ] Mouse events basics
- [ ] Scrolling
- [ ] Forms, controls
- [ ] Form properties and methods
- [ ] Focusing: focus/blur
- [ ] Forms: event and method submit
- [ ] Page: DOMContentLoaded, load, beforeunload, unload
- [ ] Scripts: async, defer
Task: -
1. 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: -
1. 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)
2. 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:
- [ ] Blob
- [ ] File and FileReader
- [ ] REST API
- [ ] GraphQL
- [ ] XMLHttpRequest and AJAX
- [ ] Fetch API
- [ ] Fetch methods
- [ ] Preflight Request
- [ ] FormData
- [ ] URL objects
Task: -
1. Change image on runtime when it is not available on the specified path while loading the page.
### JS Module 9:
- [ ] Date and time
- [ ] Object to primitive conversion
- [ ] Scheduling: setTimeout and setInterval
- [ ] Callbacks
- [ ] Promise
- [ ] Promises chaining
- [ ] Error handling with promises
- [ ] Promise API
- [ ] Promisification
- [ ] Async/await
- [ ] The "new Function" syntax
Task: -
- [ ] Implement a simple code to use a Promise
- [ ] Implement code to handle multiple promises. You have to fetch information of 5 different products from API
### JS Module 10:
- [ ] Function binding
- [ ] Custom errors, extending Error
- [ ] Async iterators and generators
- [ ] Destructuring assignment
- [ ] ECMAScript 5(EC5)
- [ ] ECMAScript 6(EC6)
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:
1. Verify your code comply with the best practices and fix them if required.
Reference:
1. https://www.w3.org/wiki/JavaScript_best_practices
2. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
3. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin
### CSS Advanced
- [ ] Object fit property
- [ ] Media Queries
- [ ] Box Model
- [ ] Specificity
- [ ] CSS Grid
- [ ] Flexbox
- [ ] Comments
- [ ] Responsive design
- [ ] Material Design
- [ ] Figma
- [ ] NPM and Yarn
Task:
1. 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:
- [ ] Vue.js : Introduction
- [ ] The Vue Instance
- [ ] Data and Methods
- [ ] Instance Lifecycle Hooks
- [ ] Life cycle diagram
- [ ] Template Syntax
- [ ] Computed Property and Watchers
Task:
- [ ] Create a basic “Hello World!” Vue application.
### Module 2:
- [ ] Declarative Rendering
- [ ] Conditionals and Loops
- [ ] Class and Style Bindings
- [ ] List Rendering
- [ ] Event Handling
- [ ] Form Input Bindings
- [ ] Component Basics
Task:
- [ ] Create a new branch from last task and Implement a Login and Registration page
### Module 3:
- [ ] Transitions
- [ ] Props
- [ ] Filters
- [ ] Directives
- [ ] Custom Directives
- [ ] Mixins
- [ ] Slots
### Module 4:
- [ ] Routing
- [ ] Routing Guards
- [ ] Working with API
- [ ] Axios
Task: -
1. Create a ecommerce-clone branch and push files & folders generated for new fresh app using Vue CLI
2. 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.
3. 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.
4. You could use [Fakestoreapi](https://fakestoreapi.com/) or any other public [APIs](https://github.com/public-apis/public-apis)
### Module 5:
- [ ] Event Bus
- [ ] State Management
- [ ] Vuex
- [ ] Composition API
Task: -
1. 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.
2. 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](https://kazupon.github.io/vue-i18n/)
Task: -
1. Implement Registration and Login page.
2. Store the token in local storage
3. Implement a interceptor which adds token to headers
4. Use Axios cache plugin to cache product API
5. Update application labels to use internationalization
### Module 7:
- [ ] PWA(Progressive Web App)
- [ ] Service Worker
- [ ] Precaching
Reference:
1. 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.
Reference:
1. https://vuejs.org/v2/style-guide/
2. https://v3.vuejs.org/style-guide
3. https://cli.vuejs.org/guide/mode-and-env.html#modes
## Ionic Training
- [ ] Ionic Framework - Introduction
- [ ] Hybrid, cross platform and native apps
- [ ] Cordova and Capacitor
- [ ] Webview
- [ ] Components
- [ ] Slots
- [ ] Debugging
Task:
1. Build Netflix/Twitter UI using Ionic components.
Reference:
1. https://www.youtube.com/playlist?list=PLgsLdFrhfGLTYUUf5dwD6YiT9a1O9QHoE
2. https://www.youtube.com/watch?v=_X0FzNBKEZg&list=PLgsLdFrhfGLQ9tz-akOEucCch8HjHgOlc
3. https://www.youtube.com/watch?v=qoH3-JISa4w&list=PLgsLdFrhfGLRNhU4DL8a0ONEAUhcAfdXR
4. https://youtu.be/3_XPLojd83I
5. https://youtu.be/xCZmlkKc36Y
6. https://youtu.be/zyBY4xTga8M
7. https://youtu.be/lhY79cBaH_o
8. https://youtu.be/WKwfP_6e044
9. https://youtu.be/P4ok5td5_gY
10. https://youtu.be/ySVNifnuq3Q
11. https://youtu.be/n0q8E615eOI
12. https://youtu.be/xSy73Fx0qlE
13. https://youtu.be/-rkHVDLSSrU
14. https://youtu.be/PY5xqeWYpTw
15. https://youtu.be/Xk_Jc7BwJqw
16. https://youtu.be/OobddatK434
17. https://ionicframework.com/docs/core-concepts/fundamentals
18. https://ionicframework.com/getting-started
19. https://ionicframework.com/docs/vue/quickstart
20. https://ionicframework.com/docs/core-concepts/cross-platform
21. https://ionicframework.com/docs/core-concepts/webview
22. https://www.youtube.com/channel/UC1zRV-9GAScMjydTPRf-tSw
23. https://capacitorjs.com/
24. https://capacitorjs.com/docs
25. https://www.youtube.com/watch?v=d70jQxQuSeY
26. https://stackoverflow.com/questions/63084828/gitignore-for-an-ionic-project-with-android-target
27. https://developer.apple.com/design/human-interface-guidelines/ios/views/popovers/
28. https://www.youtube.com/watch?v=0ZiSjFj8tMI&list=RDCMUCZZPgUIorPao48a1tBYSDgg&start_radio=1
29. https://ionicframework.com/docs/troubleshooting/debugging
## JavaScript Design Patterns
### Builder pattern
- [JavaScript Design Patterns #10 - Builder Pattern by DevSage](https://youtu.be/McF9ak0kKjA)
## Free icons for website
- [Iconscout](https://iconscout.com/)
- [Fontawesome](https://fontawesome.com/)
- [Flaticon](https://flaticon.com/)
## Common JavaScript references:
- [W3 Schools](https://www.w3schools.com/js/)
- [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- [DevDocs](https://devdocs.io/javascript/)
- [Scrimba](https://scrimba.com/topic/javascript)
- [GeeksForGeeks](https://www.geeksforgeeks.org/javascript/)
- [Javascript](https://www.javatpoint.com/javascript-tutorial)
### Top Javascript Frameworks and Libraries to Learn
#### Frontend
- [Reactjs](https://reactjs.org/docs/getting-started.html)
- [Vuejs](https://vuejs.org/guide/introduction.html)
- [Angular](https://angular.io/docs)
- [jQuery](https://api.jquery.com/)
#### Backend
- [Nodejs](https://nodejs.org/docs/latest/api/)
## Website Animations Library
- [Animate On Scroll Library](https://michalsnik.github.io/aos/)
- [animista.net](https://animista.net/)
- [scrollrevealjs.org](https://scrollrevealjs.org/)
- [swiperjs.com](https://swiperjs.com/)
- [shapedivider.app](https://www.shapedivider.app/)
- [neumorphism.io](https://neumorphism.io/)