Convert Figma logo to code with AI

kamranahmedse logodeveloper-roadmap

Interactive roadmaps, guides and other educational content to help developers grow in their careers.

294,506
38,939
294,506
77

Top Related Projects

A complete computer science study plan to become a software engineer.

323,302

😎 Awesome lists about all kinds of interesting topics

:books: Freely available programming books

💯 Curated coding interview preparation materials for busy software engineers

Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

Quick Overview

Developer Roadmap is a comprehensive guide for developers to navigate their learning journey in various tech stacks. It provides visual roadmaps and step-by-step guides for different roles in software development, including frontend, backend, DevOps, and more. The project aims to help both beginners and experienced developers plan their career paths and stay updated with the latest technologies.

Pros

  • Offers clear, visual representations of learning paths for various tech roles
  • Regularly updated to reflect current industry trends and technologies
  • Provides detailed explanations and resources for each topic in the roadmaps
  • Community-driven project with contributions from experienced developers worldwide

Cons

  • Can be overwhelming for absolute beginners due to the vast amount of information
  • Some roadmaps may not align perfectly with specific job requirements or regional differences
  • The linear nature of roadmaps might not suit everyone's learning style or career progression
  • Keeping all roadmaps up-to-date can be challenging due to the rapid pace of technological change

Getting Started

To use the Developer Roadmap:

  1. Visit the project's GitHub repository: https://github.com/kamranahmedse/developer-roadmap
  2. Browse the available roadmaps in the repository or visit the official website: https://roadmap.sh/
  3. Choose a roadmap that aligns with your career goals (e.g., Frontend, Backend, DevOps)
  4. Follow the roadmap, exploring each topic and utilizing the provided resources to guide your learning journey
  5. Contribute to the project by suggesting improvements or updates through GitHub issues or pull requests

Remember that these roadmaps are guides, not strict rules. Adapt them to your needs and learning pace as you progress in your development career.

Competitor Comparisons

A complete computer science study plan to become a software engineer.

Pros of coding-interview-university

  • More focused on computer science fundamentals and algorithm preparation
  • Provides a comprehensive study plan for self-taught developers
  • Includes detailed explanations and resources for each topic

Cons of coding-interview-university

  • Less emphasis on modern web development technologies and frameworks
  • May be overwhelming for beginners due to its extensive content
  • Primarily targets interview preparation rather than practical development skills

Code Comparison

While both repositories focus on learning resources rather than code examples, coding-interview-university occasionally includes code snippets for algorithms. For example:

def binary_search(list, item):
    low = 0
    high = len(list) - 1
    while low <= high:
        mid = (low + high) // 2
        guess = list[mid]
        if guess == item:
            return mid
        if guess > item:
            high = mid - 1
        else:
            low = mid + 1
    return None

developer-roadmap, on the other hand, focuses more on visual roadmaps and doesn't typically include code examples.

Both repositories serve different purposes: coding-interview-university is ideal for those preparing for technical interviews and wanting to strengthen their computer science knowledge, while developer-roadmap provides a broader overview of various development paths and technologies for career planning and skill development.

323,302

😎 Awesome lists about all kinds of interesting topics

Pros of awesome

  • Broader scope covering a wide range of programming topics and resources
  • Larger community-driven collection with more frequent updates
  • Easier to navigate and find specific topics of interest

Cons of awesome

  • Less structured learning path for beginners
  • May be overwhelming due to the sheer volume of information
  • Lacks visual representations of learning paths

Code comparison

While both repositories primarily consist of markdown files, awesome includes a simple JSON file for managing the list:

{
  "awesome": [
    {
      "name": "Python",
      "url": "https://github.com/vinta/awesome-python"
    },
    // More entries...
  ]
}

developer-roadmap, on the other hand, includes some JavaScript files for rendering interactive roadmaps:

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import RoadmapList from './components/RoadmapList';
import Roadmap from './components/Roadmap';

// More code...

Both repositories primarily focus on curating and organizing information rather than providing extensive code examples.

:books: Freely available programming books

Pros of free-programming-books

  • Extensive collection of free programming resources across various languages and topics
  • Regularly updated with community contributions
  • Includes resources in multiple languages, making it accessible to a global audience

Cons of free-programming-books

  • Lacks a structured learning path or roadmap for beginners
  • May overwhelm users with too many options without guidance on where to start
  • Doesn't provide visual representations of learning paths or technology relationships

Code comparison

While both repositories primarily consist of markdown files, developer-roadmap includes some JavaScript code for interactive features. Here's a brief comparison:

developer-roadmap:

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import RoadmapList from './components/RoadmapList';
import Roadmap from './components/Roadmap';

free-programming-books:

## Index

* [0 - Meta-Lists](#0-meta-lists)
* [1 - Programming Languages](#1-programming-languages)
* [2 - Frameworks and Libraries](#2-frameworks-and-libraries)
* [3 - Databases](#3-databases)

The developer-roadmap repository includes React components for interactive roadmaps, while free-programming-books primarily uses markdown for organizing links to resources.

💯 Curated coding interview preparation materials for busy software engineers

Pros of tech-interview-handbook

  • Focused specifically on technical interview preparation
  • Includes detailed algorithm and data structure explanations
  • Provides curated lists of interview questions and solutions

Cons of tech-interview-handbook

  • Less comprehensive coverage of overall developer skills
  • May not be as useful for long-term career planning
  • Primarily text-based content, lacking visual roadmaps

Code Comparison

While both repositories are primarily documentation-based, tech-interview-handbook includes code snippets for algorithm solutions:

tech-interview-handbook:

def binary_search(arr, target):
    left, right = 0, len(arr) - 1
    while left <= right:
        mid = (left + right) // 2
        if arr[mid] == target:
            return mid
        elif arr[mid] < target:
            left = mid + 1
        else:
            right = mid - 1
    return -1

developer-roadmap: No direct code examples are provided, as it focuses on visual roadmaps and skill descriptions.

Both repositories serve different purposes: tech-interview-handbook is tailored for interview preparation with specific coding examples and problem-solving strategies, while developer-roadmap offers a broader overview of skills and technologies for career development in various tech roles.

Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.

Pros of System Design Primer

  • More focused on system design and scalability concepts
  • Includes detailed explanations and visual aids for complex topics
  • Provides practice interview questions and solutions

Cons of System Design Primer

  • Less comprehensive coverage of general development topics
  • May be overwhelming for beginners due to its depth and complexity
  • Lacks interactive elements or community-driven content

Code Comparison

While both repositories primarily focus on conceptual knowledge rather than code examples, System Design Primer does include some code snippets for illustrative purposes:

# System Design Primer example (Python)
class LRUCache:
    def __init__(self, capacity):
        self.capacity = capacity
        self.cache = OrderedDict()

    def get(self, key):
        if key not in self.cache:
            return -1
        self.cache.move_to_end(key)
        return self.cache[key]

Developer Roadmap, on the other hand, doesn't typically include code examples as it focuses on providing visual roadmaps and learning paths for various technologies and roles in software development.

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

Pros of javascript-algorithms

  • Focused on algorithms and data structures, providing in-depth explanations and implementations
  • Includes a wide range of algorithms, from basic to advanced, with code examples in JavaScript
  • Offers practical coding exercises and solutions for algorithm practice

Cons of javascript-algorithms

  • Limited scope compared to developer-roadmap, focusing solely on algorithms rather than overall development paths
  • May be overwhelming for beginners due to its technical depth and complexity
  • Lacks visual representations or roadmaps for learning progression

Code Comparison

javascript-algorithms:

function bubbleSort(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
    }
  }
  return arr;
}

developer-roadmap:

# Frontend Developer

- HTML
  - Learn the basics
  - Forms and validations
  - Conventions and best practices
- CSS
  - Learn the basics
  - Making layouts
  - Responsive design

The code comparison highlights the different focus areas of each repository. javascript-algorithms provides actual code implementations, while developer-roadmap offers a structured outline of topics to learn.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

roadmap.sh

Community driven roadmaps, articles and resources for developers

roadmaps best practices videos roadmaps


Roadmaps are now interactive, you can click the nodes to read more about the topics.

View all Roadmaps  ·  Best Practices  ·  Questions

Here is the list of available roadmaps with more being actively worked upon.

Have a look at the get started page that might help you pick up a path.

There are also interactive best practices:

..and questions to help you test, rate and improve your knowledge

Share with the community

Please consider sharing a post about roadmap.sh and the value it provides. It really does help!

GitHub Repo stars GitHub Repo stars GitHub Repo stars GitHub Repo stars GitHub Repo stars

Development

Clone the repository, install the dependencies and start the application

git clone git@github.com:kamranahmedse/developer-roadmap.git
cd developer-roadmap
npm install
npm run dev

Note: use the depth parameter to reduce the clone size and speed up the clone.

git clone --depth=1 https://github.com/kamranahmedse/developer-roadmap.git

Contribution

Have a look at contribution docs for how to update any of the roadmaps

  • Add content to roadmaps
  • Add new roadmaps
  • Suggest changes to existing roadmaps
  • Discuss ideas in issues
  • Spread the word

Thanks to all contributors ❤

License

Have a look at the license file for details