Skip to main content
DemonTech logo

DemonTech

Documentation

HomeGet StartedHow Roadmaps Work

How Roadmaps Work

Introduction

The DemonTech Roadmaps are the core feature of our platform. They are highly interactive, visually structured flowcharts that break down massive, intimidating fields of study into manageable, logical nodes. This guide explains how to read, interact with, and complete a roadmap.

Why It Matters

Traditional syllabi are often linear and rigid, while learning is actually branching and dynamic. Our visual roadmaps matter because they provide spatial awareness of your learning journey. You can instantly see where you are, what you've accomplished, and what prerequisites are blocking your future goals.

Core Concepts

  • Nodes: The individual boxes on a roadmap representing a specific technology or concept.
  • Edges: The lines connecting nodes, representing prerequisites and logical flow.
  • Status: The state of a node (Locked, Available, In Progress, Completed).
  • Curated Content: The specific articles and videos attached to the details panel of a node.

Step-by-Step Guide

  1. Read the Flow: Roadmaps flow top-to-bottom. Do not attempt a node unless all nodes directly above it (connected by a line) are marked "Completed".
  2. Click a Node: Clicking a node opens a side panel.
  3. Review the Goal: The side panel provides a brief description of why you need to learn this node.
  4. Consume Resources: Read/watch the attached resources.
  5. Update Status: Click the "Mark as Completed" button. The node will turn green, and the progress bar at the top of the roadmap will update.

Examples

Interacting with a Node: Imagine you are on the Frontend roadmap and click the CSS Grid node.

  • The side panel opens.
  • It explains that CSS Grid is used for 2D layouts.
  • It provides links to CSS-Tricks and a YouTube video.
  • After practicing building a grid layout locally, you click "Mark Completed".
  • The UI immediately unlocks the next node: Responsive Design.

Common Mistakes

  • Marking Without Building: Clicking "Completed" immediately after watching a video without actually writing code to test your knowledge.
  • Ignoring Alternative Branches: Some roadmaps have parallel branches (e.g., learning CSS Flexbox and CSS Grid). Skipping a parallel branch will hurt you later.

Best Practices

  • Periodic Review: Every few weeks, look back at the green "Completed" nodes. Ask yourself if you can still explain them. If not, change the status back to "In Progress".
  • Exporting Progress: Occasionally screenshot or note your progress, as it is currently saved locally in your browser.
  • Quick Start: Jump straight into your first roadmap.
  • Project Ideas: Apply the concepts you've learned from roadmap nodes.
PreviousQuick StartNextLearning Paths