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.
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.
Sorry for disturbing but don't forget to take the amazing daily.dev 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 )
- W3Schools
- Learn HTML
- Free UDEMY Course for HTML/CSS from scratch
- HTML and CSS From scratch - FreeCodeCamp
- HTML in 2hr - FreeCodeCamp
- TutorialsPoint - HTML
Web Components
- HTML Templates
- Custom Elements
- Shadow DOM
(Free Resources)
Version control systems
- Basic usage of git
- Terminal
- GUI Client (SourceTree, Fork, GitKraken)
- Repo hosting services
- Github
- Bitbucket
- Gitlab
(Free RESOURCES)
- GIT Handbook
- GIT Cheatsheets(Available in all languages)
- Github learning lab
- Bitbucket - Documentation
- GitLab - Docs
- GitLab - Learning Tracks
- Free Book For github learning
- HTTP - Intro
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 )
- W3Schools CSS
- FreeCodeCamp - CSS Course
- Intro CSS - This series will teach you CSS in one hour
- Bulma - Tutorials provided by OpenBase
- Scrimba - Bootstrap 4
- Materiliza CSS : Docs
- SoloLearn - CSS (And all the major Langauges too)
- CSS - CheatSheets
- CSS Grid - CheatSheets
- CSS Flexbox - CheatSheets
- Chakra UI
- SASS - Tutorials
- CSS-Tricks - Provide you everything tutorial with best understanding
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 )
- JS for Cats
- A 30-day coding challenge in which you will build 30 things using vanilla JavaScript
- The excellent teachers at Watch and Code have released their beginning JavaScript course for free.
- javascript exercises for beginners
- A short interactive website which has exercises for introducing new programmers to the primary concepts in JavaScript.
- The Epic React Crash Course
- React DOCS
- Vue.js - Best NET NINJA Playlist
- Vue.js Crash Course
- Angular - Docs
- Github - More learning Resources
- Using DevTools
- 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).
- For learning PWAS
- Using WEBPACK
- Typerscript - Official Handbook
READ MORE -> Unique and cool toolkit for developers
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 )
- The Fullstack Tutorial for GraphQL
- A free video course for building static and server-side rendered applications with Next.js and React
- Gatsby - Tutorials
- 4hrs Great Gatsby Bootcamp
- Learn WebPack in 15mins
- Learn webpack - FreeCodeCamp Video lecture
- Linting and formatting
- Learn standard JS
- Learn - Parcel
- Parcel - the simpler webpack
- Learn HTTPS
- CORS - Complete tutorial
- NPM - TutorialsPoint
- NodeFreeSchool
- Yarn - Docs
- Learning Yarn
- Jest - Docs
- Electron - Tutorials
- React Native - Docs
- Flutter - Docs
- 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!
- React Native - Github repo resource
Sorry I used alphabetical order instead of numbers,
I hope you for best developer career ahead,
All the resources are comprised of tutorials, docs and courses,
If you find this some way or the other way helpful plz comment and share,
If you have anything to add in this, Comment down below, 😀
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.
Top comments (3)
The last I heard, W3Schools is not a resource to seriously push. I've found instances that's just wrong.
However Mozilla's Documentation for all things web is great. (You did post the Webcomponets part but I love MDN for references and documenation) developer.mozilla.org/en-US/
Hm yea you right. Let me change to something else. Thanks for suggestions i need people like you who post comments good or bad.
Thanks @rahxuls for an interesting read.
Open source is essential for application developers. It is unfortunate that Open Base has shut down. While searching for alternate, came across kandi from Open Weaver. It helps developers find code snippets, packages, libraries and solutions from millions of assets.
Thanks to such tools for support to the community. Happy coding!