Hey DEV Community!
As we step into 2024, the landscape of web development continues to evolve at a rapid pace. Whether you're a seasoned developer or just starting out, having a roadmap can greatly assist in charting your course through the vast sea of technologies and frameworks. In this article, we'll delve into a comprehensive roadmap for both frontend and backend development, equipping you with the knowledge and resources needed to thrive in the ever-changing world of web development.
2024 Frontend Roadmap
HTML
- Basics
- Forms
- Emmet
CSS
- Selectors
- Inheritance
- Specificity
- Box Model
- Position
- Display
- Flexbox
- Grid
- Calc
- Pseudo Elements
- Pseudo Classes
- Custom Properties
- Logical Properties
- Media Queries
- Container Queries
- Animation
- Transitions
- Transforms
- Responsive Design
- Accessibility
- BEM
- SMACSS
- CSS Modules
- CSS Frameworks
- CSS Preprocessors
JavaScript
- Async vs Defer Script Loading
- Var vs Let vs Const
- Function Basics
- Callbacks
- Arrow Functions
- Hoisting
- Scoping
- Closures
- Strict Equality
- Objects/Arrays
- Reference Vs Value
- DOM Traversal
- DOM Manipulation
- Event Listeners
- Control Flow (If, Loops, etc.)
- Promises
- Async Await
- Fetch
- Browser Storage
- Event Loop
- Modules
- Null Vs Undefined
- Recursion
- Bundlers
- Array Methods
- Template Literals
- Destructuring/Spread Operator
- Classes
- Inheritance
- Iterators
- Generators
- Destructuring
- String Methods
- Object Methods
- Map/Set
- WeakMap/WeakSet
- Symbols
- Default Parameters
- Rest Parameters
Frontend Framework - (Choose Any)
- React (Recommended)
- Astro (Second Recommendation)
- Svelte (Growing Popularity)
- Angular (Declining Popularity)
- Vue (Declining Popularity)
React
- Component Model
- JSX
- Props
- State
- Events
- useEffect
- StrictMode
- Lists/Conditional Rendering
- Fragments
- Refs
- useMemo
- useCallback
- Custom Hooks
- useReducer
- Context
- Routing
- Portal
- useLayoutEffect
- Suspense
- Hooks in general
- Best Practices
Meta Framework - (Optional) (Choose Any)
- React
- Next.js (Recommended)
- Astro (Second Recommendation)
- Remix
- Astro
- Astro (Recommended)
- Svelte
- SvelteKit (Recommended)
- Angular
- Analog (Recommended)
- Vue
- Nuxt.js (Recommended)
Next.js
-
App Router
- Folder Based Routing
- Metadata/SEO
- Server vs Client Components
- Data Fetching
- Loading/Error Pages
- Dynamic Routes
- Data Cache/Request Memoization/Full Route Cache/Router Cache
- Dynamic vs Static Pages
- Dynamic Functions
- Server Actions
- useOptimistic/useFormState/useFormStatus
- Parallel Routes/Intercepting Routes
- Route Handlers
-
Pages Directory
- Page Based Routing
- CSR vs SSR vs SSG vs ISR
- getServerSideProps/getStaticProps/getStaticPaths/getInitialProps
- API Routes
TypeScript
- TSConfig
- Type Inference
- Array Type
- Any/Unknown Type
- Type vs Interfaces
- Functions
- Unions/Intersections
- readonly/keyof/typeof
- As Const/Enums
- Tuples
- Generics
- Built In Types (Pick, Omit, etc.)
- Type Guards
- Satisfies
- Discriminated Union
- Function Overloads
- Type Predicate Functions
- Declaration Files
2024 Backend Roadmap
Backend Language - (Choose Any)
- JavaScript (Recommended If Also Learning Frontend)
- Python (Recommended If Also Learning AI)
- PHP (Recommended If Also Learning Wordpress)
- C# (Recommended If Also Learning.NET)
- Rust (Difficult To Learn)
- Ruby (Easier To Learn But Not Used As Much)
- Go (Difficult To Learn)
Backend Framework - (Choose Any)
- JavaScript
- Node.js With Express or Hono (Recommended)
- Bun with Hono (Recommended)
- Deno with Hono
- PHP
- Laravel (Recommended)
- Wordpress (Also Recommended)
- CodeIgniter
- Python
- Django (Recommended)
- Flask
- C#
- .NET (Recommended)
- Rust
- Rocket (Recommended)
- Ruby
- Rails (Recommended)
- Go
- Gin (Recommended)
Node.js/Express
- Var vs Let vs Const
- Function Basics
- Callbacks
- Arrow Functions
- Hoisting
- Scoping
- Closures
- Strict Equality
- Objects/Arrays
- Reference Vs Value
- Control Flow (If, Loops, etc.)
- Promises
- Async Await
- Callbacks
- Promises
- Async Await
- Common Modules
- Null Vs Undefined
- Recursion
- Array Methods
- Template Literals
- Destructuring/Spread Operator
- Node.js File System Library
- Express Middleware
- Express Routing
- Templating Language (EJS, Handlebars, Pug, etc.)
Databases - SQL vs NoSQL
- SQL
- PostgreSQL (Recommended)
- MySQL (Also Recommended)
- SQLite
- NoSQL
- MongoDB (Recommended)
- Redis (Recommended For Caching)
- Cassandra
- DynamoDB (Recommended If Working With AWS)
TypeScript
(Similar to frontend TypeScript)
Next.js - (Optional)
(Similar to frontend Next.js list)
Other Important Topics
- Version Control (Learn As Soon As Possible)
- JSON (Learn Alongside JavaScript)
- Regular Expressions (Optional)
- How To Deploy
- Basic Security
- Testing
With this roadmap in hand, you're well-equipped to navigate the complex and dynamic world of web development in 2024 and beyond. Happy coding!
Let me know your thoughts and if you have any questions or suggestions in the comments below.
Follow me @ricardogesteves
GitHub
Twitter
Cheers,
Ricardo Esteves
Top comments (0)