320+ free resources for learning fullstack, frontend and backend
Tags: webdev, javascript, beginners, programming
Published: 2022-01-19 16:20:37


You only need this post to become a Developer because this post has nearly unlimited amount of every type of resources covering everything you will need. 

<hr>

# Blog your Journey
-  [Hashnode](https://hashnode.com/@RAHULISM/joinme)  - Hashnode is the easiest way to start a developer blog on your personal domain 🌏 for free and connect with the readers through our global dev community! 👩‍💻👨‍💻
- [ Dev.to](https://dev.to/) - DEV is a community of software developers getting together to help one another out. 
-  [Hackernoon ](https://hackernoon.com/) - An Independent Tech Media Site

<hr>

# Must have Chrome extensions
-  [DailyDev](https://api.daily.dev/get?r=rahxul) - Get the latest new about the Dev community in your chrome default tab.
-  [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm) - Get to know which font is the website using. 
-  [ColorPick Eyedropper](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg)  - Get to know which color is the website using by just dropping the pen.  
-  [Wappalyzer ](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg) - Get to know the tech stack of any website
-  [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm)  -  Amazing amount of tools this extensions has. 
-  [React developer tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)  - React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

<hr>

# VS Code Must have extensions
-  [NPM ](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script) -  This extension helps you to manage your Package.json and will provide warnings if dependencies are not installed also will help with the version control.
-  [Prettier ](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
-  [Rainbow Brackets](
https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets)  - Find that missing tag with ease by color-coding every bracket set in your environment.
-  [VS Code Great Icons](https://marketplace.visualstudio.com/items?itemName=emmanuelbeziat.vscode-great-icons)  - Organize your environment by applying an appropriate icon set to visually identify files by type.
-  [Placeholder Images](https://marketplace.visualstudio.com/items?itemName=JakeWilson.vscode-placeholder-images)  - Services like unsplash.it and placehold.it are extremely useful. Now you can save time by adding placeholder images right from within VS Code
- [Vetur]( https://marketplace.visualstudio.com/items?itemName=octref.vetur) - The official VueJS extension
-  [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - The extension uses the ESLint library installed in the opened workspace folder.
-  [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - Launch a development local Server with live reload feature for static & dynamic pages. 
-  [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode) - This extension will move the most relevant completion suggestions to the top. 
-  [Debugger For Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) - This extension allows you to debug your JavaScript code running in the Chrome browser, from inside of VS Code.
-  [Debugger for Microsoft Edge](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-edge)  - Debug your JavaScript code in the Microsoft Edge browser
-  [Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug)  - Debug your web application or browser extension in Firefox
- [ Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)  - A customizable extension for colorizing matching brackets

### VS Code themes
-  [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) - Atom's iconic One Dark theme for Visual Studio Code
-  [Material Theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme) - The most epic theme now for Visual Studio Code
-  [Horizon Theme](https://marketplace.visualstudio.com/items?itemName=jolaleye.horizon-theme-vscode) - A beautifully warm dual theme for Visual Studio Code

<hr>

# General Resources

-  First of all you will need a check list for marking what all you have learned. You can see the below image for how the checklist will look like.  <br>
Link ->  [The Front-End Checklist](https://frontendchecklist.io/) 
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608173033183/RTWMoCY5a.png)

-  [Frontend Development Roadmap](https://roadmap.sh/frontend) 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608173416316/Z0Jacl94l.png)

## Learning Resources 📘

### DOCS and Cheat sheets 😁

-  [MDN Web Docs](https://developer.mozilla.org/en-US/)  - The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
-  [DevDocs](https://devdocs.io/)  - Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app.
-  [DEVHINTS](https://devhints.io/)  - A modest collection of cheatsheets.
-  [FLEX - Malven](https://flexbox.malven.co/)  - A visual cheatsheet for CSS flex layout.
-  [GRID - Malven](https://grid.malven.co/)  - A visual cheatsheet for CSS grid layout.

### 🌐 HOW DOES IT WORKS?

- [How the Internet Works Video](https://www.youtube.com/watch?v=x3c1ih2NJEg) - How does the Internet Works?
- [How the Internet Works Brief Videos](https://www.youtube.com/playlist?list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7) - A brief explanations on, how does the Internet works?
- [DNS](https://howdns.works) - How DNS works?
- [HTTPS](https://howhttps.works) - How HTTPS works?

### For HTML and CSS

-  [freeCodeCamp](https://www.freecodecamp.org/learn)  - Free course to learn Web Development.
- Flexbox Froggy - A game that helps you to learn CSS Flex.
-  [CSS TRICKS - Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)  - A Complete Guide to Flexbox.
- Grid Garden - A game for learning CSS Grid.
-  [CSS TRICKS - A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)  - A comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
-  [Learn CSS Grid](https://learncssgrid.com/)  - A comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh.
-  [Can I Use](https://caniuse.com/)  - Up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
-  [HTML Dog ](https://htmldog.com/) - Simple and to the point explanations. 
-  [Marksheet](https://marksheet.io/)  - Unlimited amount of tutorials
-  [The ODIN Project ](https://www.theodinproject.com/) - Amazing way of learning.
-  [CSS Effects](https://emilkowalski.github.io/css-effects-snippets/)  - CSS Animations.
-  [Keyframes](https://keyframes.app/)  - Create basic or complex CSS @keyframe animations with a visual timeline editor.
-  [Animista ](https://animista.net/) - Play with a collection of ready to use CSS animations.
-  [Interneting Is Hard](https://www.internetingishard.com/)  - Friendly web development tutorials for complete beginners.
-  [BEM](https://9elements.com/bem-cheat-sheet/)  - BEM naming cheat sheet.
-  [Autoprefixer](https://autoprefixer.github.io/)  - Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes.
-  [CSS Formatter ](https://www.cleancss.com/css-beautify/) - Online CSS Formatter, CSS Beautifier.
- [ Placeholder](https://placeholder.com/)  - How To Use Our Placeholders. Just specify the image size after our URL and you'll get a placeholder image.

<hr>

# 📝 ONLINE IDE, EDITOR
-  [goormIDE](https://ide.goorm.io/) 
-  [CodeSandbox](https://codesandbox.io/) 
-  [CodePen](https://codepen.io/)
- [ Repl.it ](https://repl.it/) 
-  [JSFiddle](https://jsfiddle.net/) 


# 📷 IMAGE RESOURCES

- [Slazzer](https://www.slazzer.com/) - Image  [Background Remover](https://www.slazzer.com/) 
Automatically and Free
- [Unsplash](https://unsplash.com/)  - Free images and photos.
-  [Pexels](https://www.pexels.com/)  - Free stock photos.
- Remove Photo Data - Remove personal data from photos before sharing them on the internet.
-  [LottieFiles](https://lottiefiles.com/)  - LottieFiles is a collection of animations designed for - Lottie - gone are the days of bugging your developer.
-  [Pixabay](https://pixabay.com/)  - Free image or video.

# 👓 ACCESSIBILITY

- [Accessibility Blog - Medium](https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94)  - Seven easy-to-implement - guidelines to design a more accessible web.
-  [Accessibility Cheatsheet ](https://moritzgiessmann.de/accessibility-cheatsheet/) - Practical approaches to Universal Design for making your website/webapp accessible to everyone.

# 📄 TERMINALS FOR WINDOWS 

-  [Windows Terminal](https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701?activetab=pivot:overviewtab) 
-  [FluentTerminal](https://github.com/felixse/FluentTerminal) 
-  [Hyper](https://hyper.is/) 

### 📺 YOUTUBE CHANNELS

- [Traversy Media](https://www.youtube.com/user/TechGuyWeb)
- [freeCodeCamp.org](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ)
- [Codevolution](https://www.youtube.com/channel/UC80PWRj_ZU8Zu0HSMNVwKWw)
- [Fireship](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA)
- [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg)
- [Wes Bos](https://www.youtube.com/channel/UCoebwHSTvwalADTJhps0emA)

### 🖋 FONTS AND TYPOGRAPHY

- [Google Fonts](https://fonts.google.com) - The #1 resource for free and easy-to-use webfonts.
- [FontPair](https://fontpair.co) - Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.
- [Fontjoy](https://fontjoy.com) - Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing.
- [Fonts Arena](https://fontsarena.com) - Free fonts, free alternatives to premium fonts, done-for-you-research articles.

### 🎨 ILLUSTRATIONS

- [unDraw](https://undraw.co/illustrations) - Browse to find the illustrations that fit your needs and click to download.
- [freepik](https://www.freepik.com) - Free graphic resources.
- [DrawKit](https://www.drawkit.io) - Hand-drawn vector illustration and icon resources, perfect for your next project.

### 💧 ICONS

- [Font Awesome](https://fontawesome.com) - Vector icons and social logos.
- [Ionicons](https://ionicons.com) - Open-Sourced and MIT licensed icon pack.
- [icons8](https://icons8.com/icons) - Download free icons in PNG and SVG.
- [flaticon](https://www.flaticon.com) - Free vector icons in SVG, PSD, PNG, EPS format or as ICON FONT.
- [Simple Icons](https://simpleicons.org) - 1463 Free SVG icons for popular brands.

<hr>

# Front-end Framework Learning Resources

### ⚡ JAVASCRIPT

- [freeCodeCamp](https://www.freecodecamp.org/learn) - Best free resource to learn JavaScript interactively.
- [JavaScript.info](https://javascript.info) - Modern JavaScript Tutorial.
- [JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/)
- [JavaScript Reference By MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)
- [Eloquent JavaScript](https://eloquentjavascript.net) - This is a book about JavaScript, programming, and the wonders of the digital. You can read it online here.
- [JavaScript30](https://javascript30.com) - 30 days vanilla JS coding challenge. Build 30 things in 30 days with 30 tutorials.
- [DOM Manipulation Reference](http://youmightnotneedjquery.com)
- [How JavaScript works](https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5)
- [JavaScript Event Reference](https://developer.mozilla.org/en-US/docs/Web/Events)
- [Mostly Adequate Guide to Functional Programming](https://mostly-adequate.gitbooks.io/mostly-adequate-guide/) - Excellent primer to functional programming using JavaScript.
- [Functional-Light JavaScript](https://github.com/getify/Functional-Light-JS) - This book explores the core principles of functional programming (FP) as they are applied to JavaScript.
- [Code School](https://www.codeschool.com/learn/javascript) - From Basics to Best Practices. Different courses related to JavaScript.
- [Functional programming](http://reactivex.io/learnrx/) - Learn basic principles of functional programming in an interactive way by using map, filter, concatAll, reduce and zip.
- [Learn JavaScript Online](https://learnjavascript.online) - Interactive JavaScript course with spaced repetiton flashcards app.
- [Exercism JavaScript Track](https://exercism.io/tracks/javascript) - Exercism provides individual practice and mentor-based learning for free.

<hr>

# ⚡ REACT

### Why React?
- [JS Apps at Facebook](https://www.youtube.com/watch?v=GW0rj4sNH2w)
- [React: Rethinking best practices](https://www.youtube.com/watch?v=x7cQ3mrcKaY)
- [React](https://facebook.github.io/react/)
- [React Docs - Quick Start section](https://facebook.github.io/react/docs/installation.html) `basic`
- [The Road to learn React](https://leanpub.com/the-road-to-learn-react) `basic`

### ES2015+
- [Learn ES6 (ECMAScript 2015)](https://egghead.io/courses/learn-es6-ecmascript-2015) `basic`
- [Exploring ES6](http://exploringjs.com/es6/) `advanced`
- [Exploring ES2016 and ES2017](https://leanpub.com/exploring-es2016-es2017/read) `advanced`

### Routing
- [React Router Docs](https://react-router.now.sh/) `basic`

### State Management
#### [Redux](http://redux.js.org/)
- [Getting Started with Redux](https://egghead.io/courses/getting-started-with-redux) `basic`
- [Building React Applications with Idiomatic Redux](https://egghead.io/courses/building-react-applications-with-idiomatic-redux) `advanced`

### Bundlers
#### [Webpack](https://webpack.js.org/)
- [Get Started with Webpack](https://webpack.js.org/get-started/)

### Build Stuff
- [Several project ideas](https://react.rocks/)
- [React - TodoMVC](http://todomvc.com/examples/react/#/)
- [Bootstrapping a React project](https://auth0.com/blog/bootstrapping-a-react-project/)
- [Build a Weather app](http://academy.plot.ly/react/1-introduction/)
- [The SoundCloud Client in React + Redux](http://www.robinwieruch.de/the-soundcloud-client-in-react-redux/)
- A Primer on the React Ecosystem: [1](http://patternhatch.com/2016/07/06/a-primer-on-the-react-ecosystem-part-1-of-3/), [2](http://patternhatch.com/2016/08/02/a-primer-on-the-react-ecosystem-part-2-of-3/) and 3.
- [Building a React/Redux App with JSON Web Token (JWT) Authentication](http://blog.slatepeak.com/build-a-react-redux-app-with-json-web-token-jwt-authentication/)

Want to goo deep in React? Visit  [React-Learning](https://github.com/ericdouglas/react-learning)
 
<hr>

### 🎮 APIs

- [Quotes REST API](http://quotes.rest) - They Said So has more than 1 million+ quotes in the database, the largest such database in the world. And Quotes API gives easy way to access the data.
- [OpenWeather](https://openweathermap.org/guide) - Simple and fast and free weather API from OpenWeatherMap you have access to current weather data, hourly, 5- and 16-day forecasts.
- [Public APIs](https://public-apis.io) - A collective list of more than 1000 Free Public and Open REST APIs for developers.
- [SWAPI](https://swapi.dev) - The Star Wars API.
- [JSONPlaceholder](https://jsonplaceholder.typicode.com) - Free to use fake Online REST API for testing and prototyping.

### ⚡ NODEJS

- [Node.js Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jsz4LDYc6kv3ymONOKxwBU) - Node.js Crash Course Tutorial by Net Ninja.
- [You Don't Know Node.js](https://github.com/azat-co/you-dont-know-node)

- [The Art of Node](https://github.com/maxogden/art-of-node#readme) - Introductory tutorial covering the basics. 
- [NodeSchool](https://nodeschool.io) - Interactive self guided workshops you can also do on your own.
- [Node Patterns](http://nodepatternsbooks.com) - Short books about code and networking patterns related to Node.js.
- [Learn Node](https://learnnode.com) - A premium training course to learn to build apps with Node.js, Express, MongoDB.
- [The Node Way](http://thenodeway.io) - An entire philosophy of Node.js best practices and guiding principles exists for writing maintainable modules, scalable applications, and code that is actually pleasant to read.
- [Express.js Security Tips](https://www.freecodecamp.org/news/express-js-security-tips/) - How You Can Save and Secure Your App.
- [Awesome Nodejs](https://github.com/sindresorhus/awesome-nodejs) - Delightful Node.js packages and resources.
- [nodebestpractices](https://github.com/goldbergyoni/nodebestpractices) - Huge list of best practices for building node apps. Important for big projects.

### 😐 Learn GIT 

- [ Git Handbook](https://guides.github.com/introduction/git-handbook/) 
Git, GitHub, DVCS, oh my! Learn all the lingo and the basics of Git.
-  [Cheat Sheets](https://training.github.com/) 
Keep these handy! Reference sheets covering Git commands, features, SVN migrations, and bash. Available in a multiple languages.

-  [Learn Git branching](https://learngitbranching.js.org/) 
Try Git commands right from your web browser. Featuring some of your soon-to-be favorites: branch, add, commit, merge, revert, cherry-pick, rebase!

-  [Visualizing Git](http://git-school.github.io/visualizing-git/) 
Look under the hood! Explore how Git commands affect the structure of a repository within your web browser with a free explore mode, and some constructed scenarios.

-  [Git-It](https://github.com/jlord/git-it-electron#what-to-install) 
You’ve downloaded Git, now what? Download Git-It to your machine and you’ll get a hands-on tutorial that teaches you to use Git right from your local environment, using commands on real repositories.

<hr>

# Prepare for Interview (Questions)
-  [Front-end Developer Interview Questions](https://h5bp.org/Front-end-Developer-Interview-Questions/)  - A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.
-  [Front End Interview Handbook](https://yangshun.github.io/front-end-interview-handbook/en/html-questions/) - Go from zero to front end interview hero with this handbook. No prior interview experience needed.
-  [Front-end Developer Interview Questions](http://flowerszhong.github.io/) - A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore. 

<hr>

I have gathered all the resources that you will require to become a MERN or MEAN stack developer. All these resources will include Articles, Videos, Course, Websites, Tutorials, Books etc. And everything is FREE

- MERN - MongoDB, Express, React, NodeJS
- MEAN - MongoDB, Express, Angular, NodeJS

> ☢ You should know the basics of HTML, CSS AND JS

---

# Learn MongoDB 

### Courses

- [MongoDB University](https://university.mongodb.com/courses/catalog) -> This website has many course for free that will definitely take you from Zero to Hero
- [Understanding the basics of MongoDB](https://www.udemy.com/course/mongodb-essentials/) -> Udemy free course for learning the basics  
- [Server-side Development with NodeJS express and MongoDB](https://www.coursera.org/learn/server-side-nodejs) - Coursera course starting from 7th Feb😉

### Blogs  /  Tutorials /  Docs /  eBooks

- 🥃 [Guru99 MongoDB in 7 days Tutorial](https://www.guru99.com/mongodb-tutorials.html)
- 📚 [MongoDB Docs](https://docs.mongodb.com/manual/)
- 📖 [The little MongoDB book](https://www.openmymind.net/2011/3/28/The-Little-MongoDB-Book/)
- ⏲ [Intro to MongoDB](https://www.koderhq.com/tutorial/mongodb/)

### Videos

- [MongoDB tutorial Intellipat  2Hrs](https://www.youtube.com/watch?v=t4wPUQ5RElY)
- [MongoDB - noSql database](https://www.youtube.com/playlist?list=PLLAZ4kZ9dFpOFJ9JcVW9u4PlSWO-VFoao) [Playlist]
- [MongoDB Crash Course](https://www.youtube.com/watch?v=-56x56UppqQ) by Traversy Media [40mins Apprx]
- [MongoDB Tutorial for beginners](https://www.youtube.com/playlist?list=PLS1QulWo1RIZtR6bncmSaH8fB81oRl6MP) Playlist. Contains small videos and informative
- [MongoDB Tutorial for beginners](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jpvoYriLI0bY8DOgWZfi6u) Playlist. 

--- 

# Learn Express

### ▶ Videos

- [ExpressJS Crash Course by Traversy Media](https://www.youtube.com/watch?v=L72fhGm1tfE)
- [Introduction to Node with Express](https://lab.github.com/everydeveloper/introduction-to-node-with-express)


### Tutorials / eBooks / Blogs

- 🦿[Tutorials Point - ExpressJS tutorials](https://www.tutorialspoint.com/expressjs/index.htm)
- 📚[MongoDB Guide eBook](https://www.pdfdrive.com/expressjs-guide-leanpub-e5912929.html)
- 📖[Hacksparrow Blog](https://www.hacksparrow.com/webdev/express)
- 📖[RoseHosting](https://www.rosehosting.com/blog/tag/express/)
- 📖[Code with Hugo - Express](https://codewithhugo.com/tags/express/)
- 📚[Express Handbook by Flavio](https://flaviocopes.com/page/express-handbook) 

---

# Learn React

### Blogs / eBooks / Tutorials / Docs

- [What the React - Blog Series](https://hashnode.com/series/what-the-react-ckj29pch203pw25s1hkr8as0w)
- [React DOCS](https://reactjs.org/docs/hello-world.html)
- [JSX in Depts](https://reactjs.org/docs/jsx-in-depth.html)
- [React Patterns](https://reactpatterns.com/)
- [33 JavaScript Concepts Every DEV Should know](https://github.com/leonardomso/33-js-concepts)
- [High Order Components](https://reactjs.org/docs/higher-order-components.html)
- [Refs and DOM](https://reactjs.org/docs/refs-and-the-dom.html)
- [EggheadIO Redux Course by Dan Abarmov](https://egghead.io/courses/getting-started-with-redux)
- [React Compositon - Flavio Copes](https://flaviocopes.com/react-composition/)
- [React Handbook by Flavio](https://flaviocopes.com/page/react-handbook/)

### Course

- [EggheadIO React for Beginners](https://egghead.io/lessons/react-introduction-to-the-beginner-s-guide-to-reactjs)
- [Free React Bootcamp](https://ui.dev/free-react-bootcamp/)
- [Learn React for free - Scrima](https://scrimba.com/learn/learnreact)
- [React basics in 1 hr](https://www.udemy.com/course/react-basic-in-just-1-hour/?LSNPUBID=JVFxdTr9V80&ranEAID=JVFxdTr9V80&ranMID=39197&ranSiteID=JVFxdTr9V80-p4Roao8.OesVvhckLdQGBA&utm_medium=udemyads&utm_source=aff-campaign)
- [ React JS Frontend Web Development for Beginners ](https://www.udemy.com/course/react-tutorial/?ranMID=39197&ranEAID=JVFxdTr9V80&ranSiteID=JVFxdTr9V80-IC2uTX64TKt5E9lwqC47fg&LSNPUBID=JVFxdTr9V80&utm_source=aff-campaign&utm_medium=udemyads)
- [React and Redux MASTERCLASS](https://www.udemy.com/course/learning-react-and-redux-decoupling-with-stateless-components/?ranMID=39197&ranEAID=JVFxdTr9V80&ranSiteID=JVFxdTr9V80-FG1Z7z7TrlLvROsK9JIUJw&LSNPUBID=JVFxdTr9V80&utm_source=aff-campaign&utm_medium=udemyads)
- [FreeCodeCamp React Course](https://www.freecodecamp.org/learn/front-end-libraries/react/)

### React cheatsheets

- [Ultimate React cheatsheet](https://devhints.io/react)


### React Interview Questions

- [13 Essential React Interview Questions](https://www.toptal.com/react/interview-questions)
- [List of React interview Questions and Answers](https://github.com/sudheerj/reactjs-interview-questions)


### React Styling

- [styled-components](https://github.com/styled-components/styled-components) - Visual primitives for the component age
- [emotion](https://github.com/emotion-js/emotion) - Library designed for writing CSS styles with JavaScript
- [radium](https://github.com/FormidableLabs/radium) - Tool for React component styling

### React and TypeScript

- [TypeScript, React and Webpack](https://www.typescriptlang.org/docs/handbook/react-&-webpack.html)
- [JSX in TypeScript](https://www.typescriptlang.org/docs/handbook/jsx.html)
- [Cheatsheets for experienced React developers getting started with TypeScript](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet)
- [React by Example](https://reactbyexample.github.io/)

--- 

# Learn Angular

### Course / Videos

- [Angular for beginners Course + Free eBook](https://www.udemy.com/course/angular-for-beginners-course/?ranMID=39197&ranEAID=JVFxdTr9V80&ranSiteID=JVFxdTr9V80-agWnLiSdmEvistlFmFWgmA&LSNPUBID=JVFxdTr9V80&utm_source=aff-campaign&utm_medium=udemyads)
- [AngularJS fundamentals in 60mins](https://www.youtube.com/watch?v=i9MHigUZKEM)
- [Anngular crash course by Traversy Media](https://www.youtube.com/watch?v=Fdf5aTYRW0E)
- [33-part course Angular](https://www.freecodecamp.org/news/want-to-learn-angular-heres-our-free-33-part-course-by-dan-wahlin-fc2ff27ab451/)
- [AngularJS on YouTube](https://www.youtube.com/user/angularjs)

### Tutorials / Docs / Blogs / eBooks

- [W3Schools Angular Tutorials](https://www.w3schools.com/angular/)
- [A better way to learn AngularJS](https://thinkster.io/a-better-way-to-learn-angularjs)
- [Minko Gechev Blog](https://blog.mgechev.com/)
- 📚[Angular Succinctly](https://www.syncfusion.com/ebooks/angular-succinctly/introduction)
- [Angular from theory to courses](https://codecraft.tv/courses/)


### Cheatsheets

- [Angular CheatSheets](https://angular.io/guide/cheatsheet)

--- 

# Learn NODEJS

- [Node.js FUNdamentals: A Concise Overview of The Main Concepts](http://webapplog.com/node-js-fundamentals-a-concise-overview-of-the-main-concepts)
- Why Node.js
- [Why The Hell Would I Use Node.js? A Case-by-Case Introduction](http://www.toptal.com/nodejs/why-the-hell-would-i-use-node-js)
- [Why I use Node.js?](http://pettergraff.blogspot.com/2013/01/why-node.html)
- [PHP vs. Node.js](http://webapplog.com/php-vs-node-js/)

- [Dismantling the Monoliths](https://engineering.groupon.com/2013/misc/i-tier-dismantling-the-monoliths/)
- [Node.js at PayPal](https://www.paypal-engineering.com/2013/11/22/node-js-at-paypal/)
- [Official Documentation](http://nodejs.org/api/)

- [Node.js Modules Official Documentation](http://nodejs.org/api/modules.html)
- [Managing module dependencies](http://howtonode.org/managing-module-dependencies)
- [Using Node's Event Module](http://code.tutsplus.com/tutorials/using-nodes-event-module--net-35941)
- [Understanding exports vs. module.exports](http://openmymind.net/2012/2/3/Node-Require-and-Exports/)


- [Node.js Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jsz4LDYc6kv3ymONOKxwBU) - Node.js Crash Course Tutorial by Net Ninja.

- [You Don't Know Node.js](https://github.com/azat-co/you-dont-know-node)

- [The Art of Node](https://github.com/maxogden/art-of-node#readme) - Introductory tutorial covering the basics. 
- [NodeSchool](https://nodeschool.io) - Interactive self guided workshops you can also do on your own.
- [Node Patterns](http://nodepatternsbooks.com) - Short books about code and networking patterns related to Node.js.
- [Learn Node](https://learnnode.com) - A premium training course to learn to build apps with Node.js, Express, MongoDB.
- [The Node Way](http://thenodeway.io) - An entire philosophy of Node.js best practices and guiding principles exists for writing maintainable modules, scalable applications, and code that is actually pleasant to read.
- [Express.js Security Tips](https://www.freecodecamp.org/news/express-js-security-tips/) - How You Can Save and Secure Your App.
- [Awesome Nodejs](https://github.com/sindresorhus/awesome-nodejs) - Delightful Node.js packages and resources.
- [nodebestpractices](https://github.com/goldbergyoni/nodebestpractices) - Huge list of best practices for building node apps. Important for big projects.

--- 

## 📖MISC RESOURCES😉

(THIS HAS ALL THE RESOURCES OTHER THEN THE ABOVE ONES, Some fundamentals and important)

### JavaScript (A bit advanced)

- [30 Days VanillaJS project challenge](https://javascript30.com/)
- [Advanced JavaScript Tutorials](https://www.rithmschool.com/courses/advanced-javascript)
- [Become a JavaScript Console Power-User](https://www.youtube.com/watch?v=4mf_yNLlgic) - Introduction to the browsers JavaScript console.
- [Debugging The Web](https://www.youtube.com/watch?v=HF1luRD4Qmk) - Learn state of the art in debugging using Chrome dev tools.
- [Udacity JavaScript Basics](https://www.udacity.com/course/javascript-basics--ud804) - They also offer more advanced courses.
- [Code School](https://www.codeschool.com/learn/javascript) - From Basics to Best Practices. Different courses related to JavaScript.
- [Functional programming](http://reactivex.io/learnrx/) - Learn basic principles of functional programming in an interactive way by using map, filter, concatAll, reduce and zip.

---

# Monetize Your Work
You can join the amazing website Buy Me A Coffee and get support and also start a membership if you're a content writer.

Link -> [BUYMEACOFFEE](https://buymeacoff.ee/?via=rahxuls)


<hr>


Thanks For Seeing this post. <br />
If you didn't liked this post let me know in the comments<br />