---
import GridItem from '../components/GridItem.astro';
import SimplePageHeader from '../components/SimplePageHeader.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
import { RoadmapCard } from '../components/GetStarted/RoadmapCard';
import { getRoadmapsByTag } from '../lib/roadmap';
import { RoadmapMultiCard } from '../components/GetStarted/RoadmapMultiCard';
import { RoleRoadmaps } from '../components/GetStarted/RoleRoadmaps';
import {
Blocks,
Code,
ExternalLink,
Globe2,
GraduationCap,
MousePointerSquare,
ServerCog,
ServerCogIcon,
ArrowRight,
Server,
Cloud,
Smartphone,
Bot,
MessageCircleCode,
Shield,
ShieldHalf,
Workflow,
Gamepad2,
PenSquare,
Component,
Waypoints,
CheckSquare,
Braces,
FolderKanban,
Coins,
Megaphone,
GitBranch,
UsersRoundIcon,
UsersRound,
SquareKanban,
} from 'lucide-react';
import { SectionBadge } from '../components/GetStarted/SectionBadge';
import { TipItem } from '../components/GetStarted/TipItem';
import ChangelogBanner from '../components/ChangelogBanner.astro';
---
<BaseLayout
title='Developer Roadmaps'
description={'Step by step guides and paths to learn different tools or technologies'}
permalink={'/get-started'}
>
<div class='bg-linear-to-b from-gray-200 to-white py-4 sm:py-8 md:py-12'>
<div class='container'>
<div class='text-left'>
<SectionBadge title='Beginner Roadmaps' />
</div>
<div class='my-3 text-left md:my-5'>
<h2 class='mb-0 text-xl font-semibold sm:mb-1 sm:text-3xl'>
Are you an Absolute beginner?
</h2>
<p class='text-sm text-gray-500 sm:text-base'>
Here are some beginner friendly roadmaps you should start with.
</p>
</div>
<div class='grid gap-3 sm:grid-cols-2 md:grid-cols-3'>
<RoadmapCard
icon={Globe2}
title='Frontend Developer'
link='/frontend?r=frontend-beginner'
description='Develop the part of web apps that users interact with i.e. things rendered in the browser.'
/>
<RoadmapCard
icon={ServerCog}
title='Backend Developer'
link='/backend?r=backend-beginner'
description='Develop the part hidden from the user e.g. things like APIs, databases, search engines etc.'
/>
<RoadmapCard
icon={Globe2}
icon2={ServerCog}
title='Full Stack Developer'
link='/full-stack'
description='Develop both the frontend and backend side of the web apps i.e. the whole development stack.'
/>
</div>
<p class='my-4 text-sm sm:my-7 sm:text-base'>
There is also a <a
target='_blank'
class='font-medium underline underline-offset-2'
href='/devops?r=devops-beginner'>beginner DevOps roadmap</a
> which requires you to have some backend knowledge and entails a lot of
operations work i.e. deploying, scaling, monitoring, and maintaining applications.
</p>
<div class='rounded-xl border bg-white p-3 sm:p-4'>
<h2 class='mb-0 text-lg font-semibold sm:mb-1 sm:text-xl'>
Tips for Beginners
</h2>
<p class='text-sm sm:text-base'>
Learning to code can be overwhelming, here are some tips to help you
get started:
</p>
<div class='mt-3 flex flex-col gap-1'>
<TipItem
title='Avoid Tutorial Hell'
description="Don't get stuck in tutorial hell. It's easy to get caught up in tutorials and never actually build anything. Tutorials are great for learning, but the best way to learn is by doing. An example of this is to watch a project-based tutorial, code along with the instructor. After finishing the tutorial, try to build the same project from scratch without the tutorial (if you can't, it's okay to go back to the tutorial). Repeat this process until you can build the project without the tutorial. After that, try to add new features to the project or build something similar from scratch."
client:load
/>
<TipItem
title='Consistent study habits'
description="Commit to regular, consistent study sessions. It's better to study for 30 minutes every day than to cram for 10 hours once a week."
client:load
/>
<TipItem
title='Set a clear goal'
description='Establish a clear, significant goal that motivates you. It could be building a company, an app, a website, or anything that personally resonates with you.'
client:load
/>
<TipItem
title='Embrace the marathon mindset'
description="You will feel lost in the beginning. Avoid comparing yourself to others; everyone progresses at their own pace. Understand that challenges are part of the journey, and it's okay to take your time."
client:load
/>
<TipItem
title='Build projects'
description="The best way to learn is by doing. Start building projects as soon as possible. It's okay if they're simple at first; the goal is to learn and improve. Build upon code-alongs and tutorials to create your projects and learn through hands-on experience"
client:load
/>
<TipItem
title='Learn to get unstuck'
description="Once you start learning to code, you're going to run into problems that you don't know how to solve. This is normal and part of the process. You don't really learn unless you struggle through it. That said, you won't always be able to move forward without some help. So how do you find that help? First off, forget books. They aren't a great place to start here, because the number and types of errors they can cover is so small. Online is the easiest place to find help. Most devs look for solutions on StackOverflow or just google the error message (if they have one). Other solutions are to find newsgroups or forums dedicated to the language you're using."
client:load
/>
<TipItem
title='Join a community'
description="Join a community of learners, such as a local coding group, a Discord server, or a subreddit. It's a great way to get help, share your progress, and learn from others."
client:load
/>
</div>
</div>
</div>
</div>
<RoleRoadmaps
badge='Self-taught Developer'
title='Are you a self-taught developer?'
description='How about taking a peek at the Computer Science roadmap aimed at self-taught developers?'
>
<RoadmapCard
icon={GraduationCap}
title='Computer Science'
link='/computer-science'
description='Learn the fundamental concepts of computer science and programming.'
/>
<RoadmapCard
icon={Blocks}
title='Data Structures'
link='/datastructures-and-algorithms'
description='Learn all about data structures and algorithms.'
/>
<RoadmapMultiCard
roadmaps={[{ title: 'System Design', link: '/system-design' }]}
description='Learn how to design large scale systems and prepare for system design interviews.'
secondaryRoadmaps={[
{
title: 'Design and Architecture',
link: '/software-design-architecture',
},
]}
secondaryDescription='Or learn how to design and architect software systems.'
/>
</RoleRoadmaps>
<RoleRoadmaps
badge='Frontend Developer'
title='Are you a Frontend Developer?'
description='How about skimming through the frontend or JavaScript roadmaps to see if there is anything you missed? TypeScript is all the rage these days, maybe it is time to learn it?'
>
<RoadmapCard
icon={Globe2}
title='Frontend'
link='/frontend'
description='Learn all you need to know to become a frontend developer.'
/>
<RoadmapMultiCard
roadmaps={[
{ title: 'JavaScript', link: '/javascript' },
{ title: 'TypeScript', link: '/typescript' },
]}
description='How about mastering the language of the web: JavaScript? or maybe TypeScript?'
secondaryRoadmaps={[
{
title: 'Frontend Performance',
link: '/best-practices/frontend-performance',
},
]}
secondaryDescription='Or learn how to improve the performance of your web apps?'
/>
<RoadmapMultiCard
roadmaps={[
{ title: 'React', link: '/react' },
{ title: 'Vue', link: '/vue' },
{ title: 'Angular', link: '/angular' },
]}
description='Or learn a framework?'
secondaryRoadmaps={[{ title: 'Design Systems', link: '/design-system' }]}
secondaryDescription='or learn about design systems?'
/>
</RoleRoadmaps>
<RoleRoadmaps
badge='Backend Developer'
title='Are you a Backend Developer?'
description='Explore the general backend roadmap or dive into a specific technology like Node.js, Python, Java etc'
>
<div class='flex flex-col gap-3'>
<RoadmapCard
icon={ServerCog}
title='Backend'
link='/backend'
description='Learn all you need to know to become a backend developer.'
/>
<RoadmapCard
icon={Braces}
title='API Design'
link='/api-design'
description='Learn all you need to know to design robust APIs.'
/>
</div>
<RoadmapMultiCard
roadmaps={[
{ title: 'Node.js', link: '/nodejs' },
{ title: 'PHP', link: '/php' },
{ title: 'Rust', link: '/rust' },
{ title: 'Go', link: '/golang' },
{ title: 'Python', link: '/python' },
{ title: 'Java', link: '/java' },
{ title: 'ASP.NET Core', link: '/aspnet-core' },
{ title: 'C++', link: '/cpp' },
]}
description='Or learn a specific technology?'
/>
<RoadmapMultiCard
roadmaps={[
{ title: 'System Design', link: '/system-design' },
{
title: 'Design and Architecture',
link: '/software-design-architecture',
},
]}
description='How about improving your System Design skills?'
secondaryRoadmaps={[
{ title: 'SQL', link: '/sql' },
{ title: 'PostgreSQL', link: '/postgresql-dba' },
{ title: 'MongoDB', link: '/mongodb' },
{ title: 'Redis', link: '/redis' },
]}
secondaryDescription='Or perhaps improve your database skills?'
/>
</RoleRoadmaps>
<RoleRoadmaps
badge='DevOps Engineer'
title='DevOps or a Wanna-be DevOps Engineer?'
description='Explore the general DevOps roadmap or dive into a specific technology like Docker, Kubernetes etc'
>
<RoadmapCard
icon={Server}
title='DevOps'
link='/devops'
description='Learn all you need to know to become a DevOps Engineer.'
/>
<RoadmapMultiCard
roadmaps={[
{ title: 'AWS', link: '/aws' },
{ title: 'Cloudflare', link: '/cloudflare' },
]}
description='or perhaps you want to learn AWS or Cloudflare?'
secondaryRoadmaps={[{ title: 'Terraform', link: '/terraform' }]}
secondaryDescription='Or learn to automate your infrastructure using Terraform?'
/>
<RoadmapMultiCard
roadmaps={[
{ title: 'Docker', link: '/docker' },
{ title: 'Kubernetes', link: '/kubernetes' },
{ title: 'Linux', link: '/linux' },
]}
description='or perhaps you want to learn Docker, Kubernetes or Linux?'
secondaryRoadmaps={[
{ title: 'Python', link: '/python' },
{ title: 'Go', link: '/golang' },
{ title: 'Rust', link: '/rust' },
]}
secondaryDescription='Or maybe improve your automation skills?'
/>
</RoleRoadmaps>
<RoleRoadmaps
badge='Mobile Developer'
title='Are you a Mobile Developer?'
description='How about beefing up your mobile development skills?'
>
<RoadmapCard
icon={Smartphone}
title='Android'
link='/android'
description='Learn all you need to know to become an Android Developer.'
/>
<RoadmapCard
icon={Smartphone}
title='iOS'
link='/ios'
description='Learn all you need to know to become an iOS Developer.'
/>
<RoadmapMultiCard
roadmaps={[
{ title: 'React Native', link: '/react-native' },
{ title: 'Flutter', link: '/flutter' },
]}
description='Or learn a cross-platform framework?'
/>
</RoleRoadmaps>
<RoleRoadmaps
badge='AI and Machine Learning'
title='Are you an AI or Machine Learning enthusiast?'
description='How about diving into the AI or Machine Learning roadmaps?'
>
<RoadmapCard
icon={Bot}
title='AI and Data Science'
link='/ai-data-scientist'
description='Learn all you need to know to become an AI or Data Scientist.'
/>
<RoadmapCard
icon={Bot}
title='AI Engineer'
link='/ai-engineer'
description='Learn all you need to become an AI Engineer.'
/>
<RoadmapCard
icon={ServerCog}
title='AI Agents'
link='/ai-agents'
description='Learn how to design, build and ship AI agents in 2025.'
/>
<RoadmapCard
icon={Bot}
title='Data Analyst'
link='/data-analyst'
description='Learn all you need to know to become a Data Analyst.'
/>
<RoadmapCard
icon={MessageCircleCode}
title='Prompt Engineering'
link='/prompt-engineering'
description='Learn how to write better prompts for GPT-* and other language models.'
/>
<RoadmapCard
icon={Shield}
title='AI Red Teaming'
link='/ai-red-teaming'
description='Learn how to red team your AI applications with this interactive step by step guide.'
/>
<RoadmapCard
icon={Bot}
icon2={ServerCog}
title='MLOps'
link='/mlops'
description='Learn how to deploy and manage machine learning models.'
/>
</RoleRoadmaps>
<RoleRoadmaps
badge='Product or Engineering Management'
title='Thinking about a career in management?'
description='How about diving into our product or engineering management roadmaps?'
>
<RoadmapCard
icon={SquareKanban}
title='Product Manager'
link='/product-manager'
description='Learn all you need to know to become a Product Manager.'
/>
<RoadmapCard
icon={UsersRound}
title='Engineering Manager'
link='/engineering-manager'
description='Learn all you need to become an Engineering Manager.'
/>
</RoleRoadmaps>
<RoleRoadmaps
badge='More Roles'
title='Fancy something else?'
description='Explore the following roadmaps about UX, Game Development, Software Architect and more'
>
<div class='flex flex-col justify-start gap-3'>
<RoadmapCard
icon={ShieldHalf}
title='Cyber Security'
link='/cyber-security'
description='Learn to become a Cyber Security Expert.'
/>
<RoadmapCard
icon={Workflow}
title='UX Designer'
link='/ux-design'
description='Learn all you need to know to become a UX Designer.'
/>
<RoadmapCard
icon={Coins}
title='Blockchain'
link='/blockchain'
description='Learn all you need to know to become a Blockchain Developer.'
/>
</div>
<div class='flex flex-col justify-start gap-3'>
<RoadmapCard
icon={Gamepad2}
title='Game Development'
link='/game-developer'
description='Learn all you need to know to become a Game Developer.'
/>
<RoadmapCard
icon={PenSquare}
title='Technical Writer'
link='/technical-writer'
description='Learn all you need to know to become a Technical Writer.'
/>
<RoadmapCard
icon={Megaphone}
title='DevRel Engineer'
link='/devrel'
description='Learn all you need to know to become a DevRel Engineer.'
/>
</div>
<div class='flex flex-col justify-start gap-3'>
<RoadmapCard
icon={FolderKanban}
title='Product Manager'
link='/product-manager'
description='Learn all you need to know to become a Project Manager.'
/>
<RoadmapCard
icon={Component}
title='Software Architect'
link='/software-architect'
description='Learn all you need to know to become a Software Architect.'
/>
<RoadmapCard
icon={GitBranch}
title='Git and GitHub'
link='/git-github'
description='Learn all you need to know to become a Git and GitHub expert.'
/>
</div>
</RoleRoadmaps>
<div class='container'>
<div class='-mt-5 mb-12 rounded-3xl bg-black p-5'>
<h2 class='mb-0.5 text-xl font-semibold text-white sm:mb-1 sm:text-2xl'>
There is more!
</h2>
<p class='text-sm text-gray-400 sm:text-base'>
We have a lot more content for you to explore.
</p>
<div
class='my-4 grid grid-cols-1 gap-2 sm:my-5 sm:grid-cols-2 sm:gap-3 md:grid-cols-3'
>
<a
href='/roadmaps'
class='grow rounded-lg bg-linear-to-br from-gray-800 to-gray-700 p-4 text-sm text-white transition-all hover:from-gray-700 hover:to-gray-700 sm:text-base'
>
<Waypoints className='mb-3 h-5 w-5 text-gray-500 sm:mb-2' />
Explore all Roadmaps
</a>
<a
href='/best-practices'
class='grow rounded-lg bg-linear-to-br from-gray-800 to-gray-700 p-4 text-sm text-white transition-all hover:from-gray-700 hover:to-gray-700 sm:text-base'
>
<CheckSquare className='mb-3 h-5 w-5 text-gray-500 sm:mb-2' />
Explore Best Practices
</a>
<a
href='/questions'
class='grow rounded-lg bg-linear-to-br from-gray-800 to-gray-700 p-4 text-sm text-white transition-all hover:from-gray-700 hover:to-gray-700 sm:text-base'
>
<CheckSquare className='mb-3 h-5 w-5 text-gray-500 sm:mb-2' />
Explore Questions
</a>
</div>
<p class='text-sm text-gray-400 sm:text-base'>
Or visit our <a
href='/guides'
class='rounded-lg bg-gray-700 px-2 py-1 text-gray-300 transition-colors hover:bg-gray-600 hover:text-white'
>guides</a
> and <a
href='/videos'
class='rounded-lg bg-gray-700 px-2 py-1 text-gray-300 transition-colors hover:bg-gray-600 hover:text-white'
>videos</a
> for long-form content.
</p>
</div>
</div>
<ChangelogBanner slot='changelog-banner' />
</BaseLayout>