Roadmap to becoming an Industry Leading Web Developer (Frontend).
After multiple hours of research with several industry professionals currently working as Web Developer in the industry, we've aggregated all the best, free and open source learning material that they used to become a Web Developer.
The roadmap has been carefully and accurately broken down into a step-by-step action plan of theory and practice resources to make sure you never miss any aspect in your Web Development learning.
-
The document can be read for various tables describing the content respectively. For each table, we have topics that need to be learned, links from where it needs to be learned alongside additional exercises/material that follows.
-
The tutorials/courses that we describe are available for free and need not be bought. This document is in no way any paid promotion of the described tutorials/courses, we recommend them based on community feedback and experience. Similar applies to the links/exercises we follow.
-
The tutorials/courses, being highly rated in the community are found to provide a good understanding, however, in the cases otherwise, we in no manner suggest against looking/searching for other similar videos that help the candidate's understanding.
-
The Week Structure we illustrate may not be in complete balance with the candidate's timeline. Therefore, in cases like these, we advise considering the stipulated time frame 1 week/topic to be more than 1 (maybe 2 weeks/topic) as we strongly advise to not break the structure of tutorials/course action.
-
This roadmap assumes that you have a prior understanding of any programming language.
Exercises: https://www.w3schools.com/git/exercise.asp
Advanced Git Exercises: https://www.rithmschool.com/courses/git/git-github-advanced-git-exercises
https://github.com/nnja/advanced-git/blob/master/exercises/Exercise8-ForksAndRemoteRepos.md
Suggested Tutorials: https://www.youtube.com/watch?v=ItYye9h_RXg&list=PL0eyrZgxdwhxNGMWROnaY35NLyEjTqcgB
Suggested Playlist: https://www.youtube.com/watch?v=NCwa\_xi0Uuc
NOTE: You can code in any preferred language.
Suggested Playlist: https://www.coursera.org/learn/sql-data-science?specialization=ibm-data-analyst
https://www.youtube.com/watch?v=6T_HgnjoYwM
Conceptual Problems
| Topic | Coding References |
|---|---|
| Classes and Objects | https://www.geeksforgeeks.org/classes-objects-java/ |
| Attributes & Constructors | |
| Inheritance | https://www.geeksforgeeks.org/inheritance-in-java/ https://www.geeksforgeeks.org/java-and-multiple-inheritance/ |
| Overloading | https://www.geeksforgeeks.org/overloading-in-java/ https://www.geeksforgeeks.org/different-ways-method-overloading-java/ |
| Overriding | https://www.geeksforgeeks.org/overriding-in-java/ |
| Polymorphism | |
| Data hiding | https://www.geeksforgeeks.org/difference-between-data-hiding-and-abstraction-in-java/ |
| Regular Expression |
Tutorial to Follow
https://www.youtube.com/watch?v=RBSGKlAvoiM
Coding Questions
- https://www.hackerrank.com/domains/data-structures (Easy + Medium)
- https://www.hackerrank.com/domains/algorithms (Easy + Medium)
| Topic | Coding Question |
|---|---|
| Time Complexity | https://www.interviewbit.com/courses/programming/topics/time-complexity/ |
| Recursion | https://web.stanford.edu/class/cs9/lectures/06/Recursion%20Problems.pdf |
| Linked List | Practice from Hackerank given above |
| Stacks and Queues | Practice from Hackerank given above |
| Hashing | Practice from Hackerank given above |
| Searching Algorithms | Practice from Hackerank given above |
| Sorting Algorithms |
Database Introduction: https://www.youtube.com/watch?v=wR0jg0eQsZA
| Topic | Course/Tutorial | Exercises |
|---|---|---|
| What is HTML & What are HTML tags | ||
| Basic CSS elements | ||
| Responsive HTML/CSS design | https://www.freecodecamp.org/learn/responsive-web-design/#responsive-web-design-projects (recommended to be done after completing the CSS Flexbox & CSS Grid) |
|
| CSS Flexbox | ||
| CSS Grid | https://www.youtube.com/watch?v=jV8B24rSN5o https://www.freecodecamp.org/news/learn-css-grid-by-building-5-layouts/ |
- What are package managers: https://www.youtube.com/watch?v=0W8-3RwvJwc
- Npm: https://www.youtube.com/watch?v=2V1UUhBJ62Y
- Yarn: https://www.youtube.com/watch?v=g9_6KmiBISk
Additional Links
- Best practices of using npm: https://blog.risingstack.com/nodejs-at-scale-npm-best-practices/
- What are module bundlers: https://www.youtube.com/watch?v=5IG4UmULyoA
- Webpack: https://www.youtube.com/watch?v=GU-2T7k9NfI
- Configuring Webpack: https://www.youtube.com/watch?v=TzdEpgONurw
- Advanced webpack configurations: https://www.youtube.com/watch?v=X1nxTjVDYdQ
Webpack practice problems
- https://github.com/styopdev/webpack-interview-questions/blob/master/answers.md
- https://www.fullstack.cafe/blog/basic-webpack-interview-questions-and-answers-2019
- https://www.freecodecamp.org/news/how-to-solve-webpack-problems-the-practical-case-79fb676417f4/
- Motivation for Lint check: https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.56.1841&rep=rep1&type=pdf
- What is ES Lint: https://eslint.org/docs/about/
- How ES Lint works: https://eslint.org/docs/developer-guide/architecture (Architecture of modern-day ES Lint)
- Linting & formatting with ESLint in JS: https://www.youtube.com/watch?v=slEtjbr8sVY
- Types of standard ES Lint configs (AirBnb): https://www.youtube.com/watch?v=SydnKbGc7W8&t=8s
NOTE: For the sake of this roadmap we’ll be beginning out with React JS to set up our foundational understanding of modern-day frontend javascript frameworks. This will indeed enable us to later subjectify the choice of frameworks depending on our use cases.
Suggested Playlist:
https://www.youtube.com/watch?v=QFaFIcGhPoM&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3
Note: Use the links below for a structured approach to a project.
https://github.com/taniarascia/react-tutorial
https://github.com/101t/react-tutorial
Advanced Concepts in React
https://github.com/enaqx/awesome-react
NOTE: Check this out once you complete the playlist and beginner-level projects to get familiar with the React ecosystem
Continuing React from week 8
| Topic | Resource | Practice Codes |
|---|---|---|
| Lifting State up | https://shopify-1.gitbook.io/react/2.-intermediate/lifting-state-up |
|
| Contexts | Refer to playlist above | https://www.toptal.com/react/react-context-api |
| High Order Components | Refer to playlist above | https://github.com/Asabeneh/30-Days-Of-React/blob/master/16\_Higher\_Order\_Component/16\_higher\_order\_component.md |
| Synthetic Events | https://youtu.be/wi8RwDOCxhQ | https://www.rithmschool.com/courses/react-fundamentals/react-events |
Solve this after completing React: https://github.com/sudheerj/reactjs-interview-questions
Suggested Playlist
https://www.youtube.com/playlist?list=PLC3y8-rFHvwheJHvseC3I0HuYI2f46oAK
Project-Based Tutorials:
PS: Couple Redux with React in all these projects
| Beginner Project | Use Case | Reference |
|---|---|---|
| Basket App | Add/delete list of items in shopping basket | https://github.com/AliceWonderland/Basket-App |
| Pet appointment planner | Schedule your pet’s appointment (No Database or APIs) |
https://github.com/YahiaElTai/React-Redux-Projects-for-beginners/tree/master/pet-appointment This will be a little large project, make sure to cover .eslintrc checks with it and try creating custom build with webpack |
Testing
We will be using the enterprise accepted libraries of enzyme and jest as the testing library for test-driven development of our react apps
Theory
- What is testing?: https://www.guru99.com/software-testing-introduction-importance.html
- What is unit testing?: https://smartbear.com/learn/automated-testing/what-is-unit-testing/
- What is integration testing?: https://www.guru99.com/integration-testing.html
- What is regression testing?: https://www.katalon.com/resources-center/blog/regression-testing/
- What is alpha testing?: https://www.javatpoint.com/alpha-testing
- What is beta testing?: https://www.guru99.com/alpha-beta-testing-demystified.html
- What is system testing?: https://www.geeksforgeeks.org/system-testing/
- What is performance testing?: https://www.microfocus.com/en-us/what-is/performance-testing
- What is the Agile framework of development: https://www.guru99.com/agile-scrum-extreme-testing.html
Suggested Playlist
https://www.youtube.com/watch?v=EgJZv9Iyj-E&list=PL-Db3tEF6pB8Am-IhCRgyGSxTalkDpUV_
Capstone Projects/Problems
- https://github.com/simpletut/Testing-React-Redux-with-Jest-and-Enzyme
- https://github.com/twclark0/react-enzyme-jest
- https://github.com/ebramanti/react-jest-enzyme-examples
[Revision]
Polish your skills with this additional concept based coding problems: https://github.com/Asabeneh/30-Days-Of-React
In this week of learning, create mini-projects encompassing the concepts you’ve learned so far in React
| Mini Projects | Use Case | Reference |
|---|---|---|
| Birthday Reminder | Add birthdate of your friends and display days remaining to their birthdays as a list | https://github.com/bilkn/birthday-reminder-app |
| Todo App | A simple todo app that enlists your tasks of the day and marks them done | https://github.com/kabirbaidhya/react-todo-app |
| Movie Database | A database of IMDB movies allowing search query | https://github.com/iftee/react-movie-database |
| Quiz App | React app which contains MCQs and make the user moves ahead as it answers correctly | https://github.com/Jatin-8898/react-quiz-app |
Database Introduction: https://www.youtube.com/watch?v=wR0jg0eQsZA
SQL
Suggested Playlist: https://www.coursera.org/learn/sql-data-science?specialization=ibm-data-analyst
.PNG){kind=link}
.PNG){kind=link}
.PNG){kind=link}
Additional Practice Problems:
- https://www.khanacademy.org/computing/computer-programming/sql/sql-basics/pc/challenge-book-list-database
- https://www.khanacademy.org/computing/computer-programming/sql/sql-basics/pc/challenge-box-office-hits-database
- https://www.khanacademy.org/computing/computer-programming/sql/sql-basics/pc/challenge-todo-list-database-stats
- https://www.khanacademy.org/computing/computer-programming/sql/more-advanced-sql-queries/pc/challenge-karaoke-song-selector
- https://www.khanacademy.org/computing/computer-programming/sql/more-advanced-sql-queries/pc/challenge-playlist-maker
- https://www.khanacademy.org/computing/computer-programming/sql/more-advanced-sql-queries/pc/challenge-the-wordiest-author
- https://www.khanacademy.org/computing/computer-programming/sql/more-advanced-sql-queries/pc/challenge-gradebook
- https://www.khanacademy.org/computing/computer-programming/sql/relational-queries-in-sql/pc/challenge-bobbys-hobbies
- https://www.khanacademy.org/computing/computer-programming/sql/relational-queries-in-sql/pc/challenge-customers-orders
- https://www.khanacademy.org/computing/computer-programming/sql/relational-queries-in-sql/pc/challenge-sequels-in-sql
- https://www.khanacademy.org/computing/computer-programming/sql/relational-queries-in-sql/pc/challenge-friendbook
- https://www.khanacademy.org/computing/computer-programming/sql/modifying-databases-with-sql/pc/challenge-dynamic-documents
- https://www.khanacademy.org/computing/computer-programming/sql/modifying-databases-with-sql/pc/challenge-clothing-alterations
- https://www.khanacademy.org/computing/computer-programming/sql/sql-basics/pp/project-design-a-store-database
- https://www.khanacademy.org/computing/computer-programming/sql/more-advanced-sql-queries/pp/project-data-dig
- https://www.khanacademy.org/computing/computer-programming/sql/relational-queries-in-sql/pp/project-famous-people
- https://www.khanacademy.org/computing/computer-programming/sql/modifying-databases-with-sql/pp/project-app-impersonator
Once you have made till here, you can jump on to working on frontend projects and start applying to frontend roles. Also, do explore different frontend frameworks now and learn about them.
For those who wanna continue on the journey of web development and want to tackle Backend and DevOps too. Stay Tuned!