Ultimate RoadMap with so many resources for Front-End Development 💥💥
Tags: react, webdev, html, css
Published: 2020-11-03 14:09:46

I've got you everything covered. This is the final you need. 
The best resources with the best road map. You definitely need this if you are curious how to start with front-end development. This post covers everything about front-end development. 
<hr>
The roadmap makes sure that gaps in the plan are identified and can be closed as needed in the future. It also serves as a guide for the developers during their journey, allowing them to recognize and act on events that require a change of direction. 
<hr>

Sorry for disturbing but don't forget to take the amazing <a href="https://api.daily.dev/get?r=rahxul">daily.dev</a> extension this is important for busy developers as it provides with the latest news and important resources. 

### Let's Start 🙌

## HTML

- Learn the basic 
- Forms and validation
- Accessibility
- SEO Basics
- Conventions and Best practices

> **(Free Resources )**

1. <a href="https://www.w3schools.com/" target="_blank">W3Schools</a> 
2. <a href="https://www.learn-html.org/" target="_blank">Learn HTML</a>
3. <a href="https://www.udemy.com/course/web-development-learn-by-doing-html5-css3-from-scratch-introductory/?LSNPUBID=JVFxdTr9V80&ranEAID=JVFxdTr9V80&ranMID=39197&ranSiteID=JVFxdTr9V80-.kQm3jmcBuCh.MiOQl7t4Q&utm_medium=udemyads&utm_source=aff-campaign" target="_blank">Free UDEMY Course for HTML/CSS from scratch</a>
4. <a href="https://www.youtube.com/watch?v=mU6anWqZJcc" target="_blank">HTML and CSS From scratch - FreeCodeCamp</a>
5. <a href="https://www.youtube.com/watch?v=pQN-pnXPaVg" target="_blank">HTML in 2hr - FreeCodeCamp</a>
6. <a href="http://www.tutorialspoint.com/html/html_tutorial.pdf" target="_blank">TutorialsPoint - HTML</a>

## Web Components

- HTML Templates
- Custom Elements
- Shadow DOM

> **(Free Resources)**

1. <a href="https://www.w3schools.com/w3css/w3css_templates.asp" target="_blank">W3Css templates</a> 
2. <a href="https://html5up.net/" target="_blank">HTML5 UP</a> 
3. <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM" target="_blank">Using Shadow DOM</a> 
4. <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements" target="_blank">Using custom elements</a> 


## Version control systems

- Basic usage of git
   - Terminal
   - GUI Client (SourceTree, Fork, GitKraken)
- Repo hosting services
  - Github
  - Bitbucket
  - Gitlab

> **(Free RESOURCES)**

1. <a href="https://guides.github.com/introduction/git-handbook/" target="_blank">GIT Handbook</a>
2. <a href="https://training.github.com/" target="_blank">GIT Cheatsheets(Available in all languages)</a>
3. <a href="https://lab.github.com/" target="_blank">Github learning lab</a>
4. <a href="https://confluence.atlassian.com/bitbucket" target="_blank">Bitbucket - Documentation</a>
5. <a href="https://docs.gitlab.com/ee/gitlab-basics/" target="_blank">GitLab - Docs</a>
6. <a href="https://about.gitlab.com/training/" target="_blank">GitLab - Learning Tracks</a>
7. <a href="https://launchschool.com/books/git" target="_blank">Free Book For github learning</a>
8. <a href="https://launchschool.com/books/http" target="_blank">HTTP - Intro</a>

## CSS

- Learn the basics
- Responsive design and media queries
- Making layouts
  - Floats
  - Positioning
  - Display box
  - Model CSS
  - Grid
  - FlexBox

## CSS Preprocessor

- SASS
- PostCSS
- Less

## CSS Architecture
- BEM
- OOCS
- SMACSS

## CSS Frameworks

- CSS First frameworks
  - Bootstrap
  - Materilize CSS
  - Bulma
- JS Based framework
 - Reactstrap
 - Material UI
 - Tailwind CSS
 - Chakra UI

## Modern CSS

- Styled component
- CSS Modules
- Styled JSX
- Emotion
- Radium
- Glamorous

> **(Free Resources For CSS )**

1. <a href="https://www.w3schools.com/css/" target="_blank">W3Schools CSS</a>
2. <a href="https://www.freecodecamp.org/" target="_blank">FreeCodeCamp - CSS Course</a>
3. <a href="https://scrimba.com/learn/introtocss" target="_blank">Intro CSS - This series will teach you CSS in one hour</a>
4. <a href="https://openbase.io/js/bulma/tutorials" target="_blank">Bulma - Tutorials provided by OpenBase</a>
5. <a href="https://scrimba.com/learn/bootstrap4" target="_blank">Scrimba - Bootstrap 4</a>
6. <a href="https://materializecss.com/" target="_blank">Materiliza CSS : Docs</a>
7. <a href="https://www.sololearn.com/" target="_blank">SoloLearn - CSS (And all the major Langauges too)</a>
8. <a href="http://overapi.com/css" target="_blank">CSS - CheatSheets</a>
9. <a href="http://grid.malven.co/" target="_blank">CSS Grid - CheatSheets</a>
10. <a href="https://darekkay.com/dev/flexbox-cheatsheet.html" target="_blank">CSS Flexbox - CheatSheets</a>
11. <a href="https://chakra-ui.com/getting-started" target="_blank">Chakra UI</a>
12. <a href="https://www.w3schools.com/sass/">SASS - Tutorials</a>
13. <a href="https://css-tricks.com/">CSS-Tricks - Provide you everything tutorial with best understanding</a>


## Javascript

- Syntax and Basic construct
- Learn DOM Manipulation
- Learn fetch API / Ajax (XHR)
- ES6+ and modular Javascript
- Understand the concepts, Hoisting, Event bubbling, scope, prototype, Shadow DOM, strict...

##  JS Framework

- React.js
 - Reux
 - MobX
- Vue.js
 - VueX
- Angular
 - RxJS
 - NgR

## Type checkers
 - Typescript
 - Flow


## Progressive Web Apps (PWA)

- Storage
- Web Socket
- Service Workers
- Location
- Notifications
- Device Orientation
- Payments
- Credentials
- Accelerated Mobile Pages (AMP)

## Performance
- PRPL Pattern
- RAIL Model
- Performance
- Metrics
- Using lighthouse
- Using DevTools

## Server-Side Rendering (SSR)

- React.js
 - Next.js
 - After.js
- Angular
 - Universal
- Vue.js
 - Nuxt.js

> **(Resources For JS )**

1. <a href="http://jsforcats.com/" target="_blank">JS for Cats</a>
2. <a href="https://javascript30.com/" target="_blank">A 30-day coding challenge in which you will build 30 things using vanilla JavaScript</a>
3. <a href="https://watchandcode.com/p/practical-javascript" target="_blank">The excellent teachers at Watch and Code have released their beginning JavaScript course for free. </a>
4. <a href="http://www.asmarterwaytolearn.com/js/index-of-exercises.html" target="_blank"> javascript exercises for beginners</a>
5. <a href="https://www.learn-js.org/" target="_blank">A short interactive website which has exercises for introducing new programmers to the primary concepts in JavaScript.</a>
6. <a href="https://www.youtube.com/watch?v=A71aqufiNtQ" target="_blank">The Epic React Crash Course</a>
7. <a href="https://reactjs.org/docs/hello-world.html" target="_blank">React DOCS</a>
8. <a href="https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa" target="_blank">Vue.js - Best NET NINJA Playlist</a>
9. <a href="https://www.youtube.com/watch?v=Wy9q22isx3U" target="_blank">Vue.js Crash Course</a>
10. <a href="https://angular.io/" target="_blank">Angular - Docs </a>
11. <a href="https://github.com/avatsaev/angular-learning-resources" target="_blank">Github - More learning Resources</a>
12. <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools" target="_blank">Using DevTools</a>
13. <a href="https://medium.com/@prashantramnyc/javascript-closures-simplified-d0d23fa06ba4" target="_blank">A closure is a function that has access to its outer function scope even after the return of the outer function (For better understanding head inside the blog).</a>
14. <a href="https://developers.google.com/web/progressive-web-apps/" target="_blank">For learning PWAS</a>
15. <a href="https://webpack.js.org/" target="_blank">Using WEBPACK</a>
16. <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank">Typerscript - Official Handbook</a>

### READ MORE ->  [Unique and cool toolkit for developers](https://blog.rahulism.co/unique-and-cool-toolkit-for-developers-big-bonus) 

## GraphQL
 - Apollo
 - Relay Modern

## Static Site Generator
 - Next.js
 - GatsbyJS
 - Vuepress
 - Jekyll
 - Hugo

## Mobile Applications
 - React native
 - Native Script
 - Flutter
 - Ionic

## Desktop Applications
- Electron
- Carlo
- Proton Native

## Package Manager

- npm
- yarn

## Testing your apps

- Jest
- react-testing-library
- Cypress
- Enzyme

## Build tools
- Linters and formatters
 - Prettier
 - ESLint
 - StandardJS

## Module Bundlers
- Webpack
- Rollup
- parcel

## Web security Knowledge

- HTTPS
- CORS
- Content secure policy
- OWASP Security risks

**(RESOURCES )**

1. <a href="https://www.howtographql.com/" target="_blank">The Fullstack Tutorial for GraphQL</a>
2. <a href="https://masteringnextjs.com/" target="_blank">A free video course for building static and server-side rendered applications with Next.js and React</a>
3. <a href="https://www.gatsbyjs.com/tutorial/" target="_blank">Gatsby  - Tutorials</a>
4. <a href="https://www.youtube.com/watch?v=kzWIUX3CpuI" target="_blank">4hrs Great Gatsby Bootcamp</a>
5. <a href="https://tutorialzine.com/2017/04/learn-webpack-in-15-minutes" target="_blank">Learn WebPack in 15mins</a>
6. <a href="https://www.youtube.com/watch?v=MpGLUVbqoYQ" target="_blank">Learn webpack - FreeCodeCamp Video lecture</a>
7. <a href="https://survivejs.com/maintenance/documentation/linting/" target="_blank">Linting and formatting</a>
8. <a href="https://standardjs.com/" target="_blank">Learn standard JS</a>
9. <a href="https://parceljs.org/getting_started.html" target="_blank">Learn  - Parcel</a>
10. <a href="https://flaviocopes.com/parcel/" target="_blank">Parcel - the simpler webpack</a>
11. <a href="https://www.tutorialsteacher.com/https" target="_blank">Learn HTTPS</a>
12. <a href="https://auth0.com/blog/cors-tutorial-a-guide-to-cross-origin-resource-sharing/" target="_blank">CORS - Complete tutorial</a>
13. <a href="https://www.tutorialspoint.com/nodejs/nodejs_npm.htm" target="_blank">NPM - TutorialsPoint</a>
14. <a href="https://nodeschool.io/" target="_blank">NodeFreeSchool</a>
15. <a href="https://yarnpkg.com/lang/en/docs/getting-started/" target="_blank">Yarn - Docs</a>
16. <a href="https://www.packtpub.com/gb/big-data-and-business-intelligence/learning-yarn" target="_blank">Learning Yarn</a>
17. <a href="https://jestjs.io/" target="_blank">Jest - Docs</a>
18. <a href="https://www.tutorialspoint.com/electron/index.htm" target="_blank">Electron - Tutorials</a>
19. <a href="https://reactnative.dev/docs/getting-started" target="_blank">React Native - Docs</a>
20. <a href="https://flutter.dev/docs" target="_blank">Flutter - Docs</a>
21. <a href="https://github.com/Solido/awesome-flutter" target="_blank">Awesome Flutter - A bit overwhelming for beginners, but have a look at the ‘Video Series’ section, ‘Blogs’ section, and the apps under ‘Templates’. You’ll utilise the other sections once you’ve begun your journey with Flutter!</a>
22. <a href="https://github.com/shubhnik/react-native-learning-resources" target="_blank">React Native - Github repo resource</a>  

<hr>
Sorry I used alphabetical order instead of numbers, <br />
I hope you for best developer career ahead, <br />
All the resources are comprised of tutorials, docs and courses, <br />
If you find this some way or the other way helpful plz comment and share, <br />
> If you have anything to add in this, Comment down below, 😀

<hr>

# DO YOU WANT AN INTERACTIVE ROAD MAP IN PDF FORMAT 😎🙌 ?
> If yes. Then subscribe to my blog I'll be sending INteractive RoadMap you via email with something extra too. 

### Thanks For Reading.😎 
<hr>