# Web Development Learning Resources

### CSS

* [100 days of CSS](https://100dayscss.com/)
* [CSS Battle](https://cssbattle.dev/)
* [Style Stage CSS](https://stylestage.dev/)
* [CSS Speedrun](https://css-speedrun.netlify.app/)

### JavaScript

* [JS Challenges](https://www.jschallenger.com/)
* [advent JS](https://adventjs.dev/)
* [JavaScript info](https://javascript.info/)

### Machine Coding

* [DOM Challenge - Machine coding questions](https://github.com/devkodeio/the-dom-challenge)
* [Machine Coding Practice Questions](https://workat.tech/machine-coding/practice)

### Frontend Challenges

* [Frontend Mentor Challenges](https://www.frontendmentor.io/challenges)
* [Frontend Practice](https://www.frontendpractice.com)
* [Frontend App Challenges - Florin Pop](https://github.com/florinpop17/app-ideas)
* [Mini Frontend Challenges - Sadananda Pai](https://github.com/sadanandpai/frontend-mini-challenges)
* [First Timers Only - Open Source](https://www.firsttimersonly.com/)

### Frontend Interview Preparation

* [Big Frontend Dev](https://bigfrontend.dev/)
* [Great Frontend](https://www.greatfrontend.com/)

## Learn by Practice

* [HackerRank - Tutorials](https://www.hackerrank.com/dashboard)
  * [C](https://www.hackerrank.com/domains/c)
  * [C++](https://www.hackerrank.com/domains/cpp)
  * [Python](https://www.hackerrank.com/domains/python)
  * [Java](https://www.hackerrank.com/domains/java)
  * [Ruby](https://www.hackerrank.com/domains/ruby)
  * [Databases](https://www.hackerrank.com/domains/databases)
  * [SQL](https://www.hackerrank.com/domains/sql)
  * [Functional Programming](https://www.hackerrank.com/domains/fp)
  * [Data Structures](https://www.hackerrank.com/domains/data-structures)
  * [Regex](https://www.hackerrank.com/domains/regex)
  * [Linux Shell](https://www.hackerrank.com/domains/shell)
  * [Mathematics](https://www.hackerrank.com/domains/mathematics)
  * [Artificial Intelligence](https://www.hackerrank.com/domains/ai)
  * [30 days of code](https://www.hackerrank.com/domains/tutorials/30-days-of-code)
  * [10 days of statistics](https://www.hackerrank.com/domains/tutorials/10-days-of-statistics)
  * [10 days of JS](https://www.hackerrank.com/domains/tutorials/10-days-of-javascript)

<br>

* [Leetcode - Explore](https://leetcode.com/explore)
  * [Leetcode - Learn](https://leetcode.com/explore/learn/)
  * [Leetcode - Interview](https://leetcode.com/explore/interview/)

<br>

* [Freecodecamp - Courses](https://www.freecodecamp.org/learn/)
  * [(New) Responsive Web Design Certification](https://www.freecodecamp.org/learn/2022/responsive-web-design/)
  * [Legacy Responsive Web Design Certification](https://www.freecodecamp.org/learn/responsive-web-design/)
  * [JavaScript Algorithms and Data Structures Certification](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
  * [Front End Development Libraries Certification](https://www.freecodecamp.org/learn/front-end-development-libraries/)
  * [Data Visualization Certification](https://www.freecodecamp.org/learn/data-visualization/)
  * [Relational Database (Beta) Certification](https://www.freecodecamp.org/learn/relational-database/)
  * [Back End Development and APIs Certification](https://www.freecodecamp.org/learn/back-end-development-and-apis/)
  * [Quality Assurance Certification](https://www.freecodecamp.org/learn/quality-assurance/)
  * [Scientific Computing with Python Certification](https://www.freecodecamp.org/learn/scientific-computing-with-python/)
  * [Data Analysis with Python Certification](https://www.freecodecamp.org/learn/data-analysis-with-python/)
  * [Information Security Certification](https://www.freecodecamp.org/learn/information-security/)
  * [Machine Learning with Python Certification](https://www.freecodecamp.org/learn/machine-learning-with-python/)
  * [Coding Interview Prep](https://www.freecodecamp.org/learn/coding-interview-prep/)

<br>

* [HackerEarth - Tutorial and Practice Problems](https://www.hackerearth.com/practice/)
  * [Interview Prep](https://www.hackerearth.com/practice/interviews/)
  * [Codemonk](https://www.hackerearth.com/practice/codemonk/)
  * [Basic Programming](https://www.hackerearth.com/practice/basic-programming/input-output/basics-of-input-output/practice-problems/)
  * [Data Structure](https://www.hackerearth.com/practice/data-structures/arrays/1-d/practice-problems/)
  * [Algorithms](https://www.hackerearth.com/practice/algorithms/searching/linear-search/practice-problems/)
  * [Math](https://www.hackerearth.com/practice/math/number-theory/basic-number-theory-1/practice-problems/)
  * [Machine Learning](https://www.hackerearth.com/practice/machine-learning/prerequisites-of-machine-learning/basic-probability-models-and-rules/tutorial/)
  * [Python](https://www.hackerearth.com/practice/python/getting-started/input-and-output/tutorial/)

<br>

## Coding Practice Websites

* [HackerRank](https://www.hackerrank.com/)
* [Leetcode](https://leetcode.com/)
* [HackerEarth](https://www.hackerearth.com/)
* [Interview Bit](https://interviewbit.com/)

## Frontend Resources

**HTML**

* [MDN HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
* [W3 Schools](https://www.w3schools.com/html/)

<br>

**CSS**

* [MDN CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
* [Web Dev](https://web.dev/learn/css/)

<br>

**JavaScript**

* [Eloquent JavaScript](https://eloquentjavascript.net/)
* [JavaScript Info](https://javascript.info/)
* [JavaScript Tutorial](https://www.javascripttutorial.net/)
* [JavaScript for Impatient Programmers](https://exploringjs.com/impatient-js/toc.html)
* [Just Javascript](https://justjavascript.com/)
* [JavaScript Roadmap](https://roadmap.sh/javascript)
* [You don't know JS](https://github.com/getify/You-Dont-Know-JS)
* [Secrets of the JavaScript Ninja](https://www.manning.com/books/secrets-of-the-javascript-ninja-second-edition)
* [Deep JavaScript](https://exploringjs.com/deep-js/toc.html)
* [Professional JavaScript for Web developers](https://www.oreilly.com/library/view/professional-javascript-for/9781119366447/)

<br>

**TypeScript**

* [TypeScript Deepdive](https://basarat.gitbook.io/typescript/)
* [Tackling TypeScript](https://exploringjs.com/tackling-ts/index.html)
* [TypeScript Tutorial](https://www.typescripttutorial.net/)
* [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
* [Programming TypeScript](https://www.oreilly.com/library/view/programming-typescript/9781492037644/)
* [TypeScript Roadmap](https://roadmap.sh/typescript)

<br>

**React**

* [ReactJS docs (beta)](https://beta.reactjs.org/)
* [ReactJS Tutorials](https://reactjs.org/tutorial/tutorial.html)
* [React Roadmap](https://roadmap.sh/react)
* [React TypeScript Cheatsheet](https://github.com/typescript-cheatsheets/react)
* [Entire React code base explanation by visual block](https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS)
* [Bulletproof React](https://github.com/alan2207/bulletproof-react)

<br>

**HTTP**

* [MDN HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [HTTP2 in Action](https://livebook.manning.com/book/http2-in-action/about-this-book/)

<br>

**Git**

* [Become a git guru](https://www.atlassian.com/git/tutorials)
* [Pro Git](https://git-scm.com/book/en/v2)
* [Git Explorer](https://gitexplorer.com/)

<br>

**Web Performance**

* [MDN Performance](https://developer.mozilla.org/en-US/docs/Learn/Performance)
* [Web Dev Performance](https://web.dev/learn/#performance)
* [Google Dev - Performance](https://developers.google.com/web/fundamentals/performance/get-started)
* [Smashing Magazine - Performance](https://www.smashingmagazine.com/guides/performance/)

<br>

**Accessibility**

* [Develop Accessible Web Apps with React](https://egghead.io/courses/develop-accessible-web-apps-with-react)

<br>

**JS Design Patterns**

* [Modern Web App Design Patterns](https://www.patterns.dev/)
* [JS Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/)
* [Design Patterns for Humans](https://github.com/kamranahmedse/design-patterns-for-humans)

<br>

**JS Best practices**

* [Refactoring JavaScript](https://refactoringjs.com/files/refactoring-javascript.pdf)
* [The art of unit testing](https://www.manning.com/books/the-art-of-unit-testing-third-edition)

<br>

**Functional JavaScript**

* [Mostly adequate Guide](https://mostly-adequate.gitbook.io/mostly-adequate-guide/)
* [Functional Light JavaScript](https://aguru.gitbooks.io/functional-light-javascript/content/)

<br>

**Frontend youtube channels**

* [Traversy Media](https://www.youtube.com/c/TraversyMedia)
* [Clever Programmer](https://www.youtube.com/c/CleverProgrammer)
* [Net Ninja](https://www.youtube.com/c/TheNetNinja)
* [Web Dev Simplified](https://www.youtube.com/c/WebDevSimplified)
* [Academind](https://www.youtube.com/c/Academind)
* [Dev Ed](https://www.youtube.com/c/DevEd)
* [Kevin Powell](https://www.youtube.com/kepowob)
* [Codevolution](https://www.youtube.com/c/Codevolution)

<br>

**Interview Preparation Resources**

* [Front End Interview Handbook](https://github.com/yangshun/front-end-interview-handbook)
* [JavaScript Interview Questions](https://github.com/sudheerj/javascript-interview-questions)
* [JavaScript Code Challenges](https://github.com/sadanandpai/javascript-code-challenges)
* [React Interview Questions](https://github.com/sudheerj/reactjs-interview-questions)
* [Tech Interview Handbook](https://github.com/yangshun/tech-interview-handbook)
* [JavaScript Questions MCQ](https://github.com/lydiahallie/javascript-questions)
* [FreeCodeCamp Interview Prep](https://github.com/freeCodeCamp/freeCodeCamp/tree/main/curriculum/challenges/english/10-coding-interview-prep)
* [Interview Ant](https://www.interviewant.com/)

<br>

**Interview Preparation channels**

* [Namaste JavaScript](https://www.youtube.com/watch?v=pN6jk0uUrD8\&list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP)
* [Chirag Goel](https://www.youtube.com/c/engineerchirag)
* [Devtools Tech Frontend Interview Series](https://www.youtube.com/watch?v=qMkUziVZvzs\&list=PL4ruoTJ8LTT96O258zzjRwdiNxzDoas-G\&index=2)
* [Front-End Engineer](https://www.youtube.com/c/FrontEndEngineer)
* [RoadsideCoder](https://www.youtube.com/@RoadsideCoder)
* [Uncommon Geeks](https://www.youtube.com/watch?v=qcixpy3HQ9s\&list=PLmcRO0ZwQv4QMslGJQg7N8AzaHkC5pJ4t)

<br>

**Coding challenges**

* [Big Frontend Dev](https://bigfrontend.dev/)
* [Great Frontend Dev](https://www.greatfrontend.com/)
* [Frontend Mentor](https://www.frontendmentor.io/)
* [JS Challenger](https://www.jschallenger.com/)
* [Devtools Tech](https://www.devtools.tech/?ref=frontend-learning-kit)
* [Learners Bucket](https://practice.learnersbucket.com/)

***

**DSA youtube**

* [Adbul Bari](https://www.youtube.com/watch?v=0IAPZzGSbME\&list=PLDN4rrl48XKpZkf03iYFl-O29szjTrs_O)
* [Gaurav Sen](https://www.youtube.com/channel/UCRPMAqdtSgd0Ipeef7iFsKw)
* [Rachit Jain](https://www.youtube.com/channel/UC9fDC_eBh9e_bogw87DbGKQ)

<br>

**Coding platforms**

* [Leetcode](https://leetcode.com/)
* [Hackerrank](https://www.hackerrank.com/)
* [Interviewbit](https://www.interviewbit.com/practice/)

<br>

**Additional Resources**

* [JS Party podcast](https://jsparty.fm/)
* [JavaScript 30](https://javascript30.com/)
* [FreeCodeCamp React Challange](https://www.freecodecamp.org/learn/front-end-development-libraries/react/)
* [React Coding Challange](https://github.com/alexgurr/react-coding-challenges/)
* [React by Example](https://reactbyexample.github.io/)
* [React Cheatsheet](https://devhints.io/react)
* [React Patterns](https://reactpatterns.com/)
* [Tao Of React](https://alexkondov.com/tao-of-react/)
* [MDN - Front-end Web Dev pathway](https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer)
* [The React Handbook](https://reacthandbook.com/)<br>
