Front-End Developer Roadmap.
Learn the Basics of HTML like:
- Emmet
- Forms
- Semantic HTML
- SEO Basics
Learn the Basics of CSS like:
- Selectors
- Positioning
- Box Model
- Display
- Specificity
- FlexBox
- Grid
- Media Queries
- Pseudo Elements
- Pseudo Classes
- Animations
Learn the Basics of JS like:
- Basic Syntax
- DOM Manipulation
- Fetch API/ Ajax
- Async Await
- Event Listeners
- ES6+ Javascript
- Promises
- Classes
- Array Methods
- Scoping
- Hoisting
- Closures
Learn any CSS Framework:
- Bootstrap
- Tailwind
- Materialize
- Bulma
- Semantic UI
- Foundation
Learn any CSS Preprocessor mostly SASS and SCSS:
- SASS/SCSS
- Postcss
- Less
- Stylus
- Stylecow
Learn basic usage of Version Control System:
- Git
- GitHub
Learn the basics of Package Managers:
- NPM
- Yarn
Pick a JavaScript Franework/library:
- React
- Vue
- Angular
- Svelte
- Meteor
- Remix
Basic things to learn in React:
- Components
- JSX
- Props
- State
- Events
- Conditional Rendering
Important topics:
React-Hooks
- useState
- useEffect
- useRef
- useContext
- useReducer
- useMemo
- useCallback
Learn some of the React UI Framework:
- Material UI
- Ant Design
- Chakra UI
- React Bootstrap
- Rebass
- Blueprint
- Semantic UI React
Learn to use popular React packages:
- React Router
- React Query
- Axios
- Recat Hook Form
- Styles Components
- Storybook
- Framer Motion
Learn how to manage state in React with state management tools:
- Redux
- Mobx
- Hookstate
- Recoil
- Akita
Things to learn after learning React:
- Next JS
- Gatsby
- TypeScript
- React Native
- Electron
Important things to learn in Next JS:
- Static Site Generation
- Server Side Rendering
- Increamental Static Regenaration
- Dynamic Pages
- CSS/SASS Modules
- Lazy loading Modules
- API Routes
Learn to test your apps with some of these libraries/framewroks:
- Jest
- Testing Library
- Cypress
- Enzyme
- Jasmine
- Mocha
Learn to deploy your website:
(some free popular service)
- Netlify
- Vercel
- Firebase
- Github Pages
- Heroku
- Render
Project Ideas:
- React Estate App
- Cryptocurrency App
- Travel Companion App
- ECommerce Web Shop
- Voice Assistant News App
- Portfolio Website
- Voice Powered Budget Tracker
- Blog App with CMS
- Social Media Web App
- Modern UI/UX App
- Modern UI/UX Website
- Chat App
- Video Chat App
- Progressive Web Apps
- Covide-19 Tracker App
- Google Search Clone
- Premium Landing Page
Like, Share and Subscribe #DevTools99 for more useful videos, tools info and #tutorials . Thank you!
