computer-scienceangular-roadmapbackend-roadmapblockchain-roadmapdba-roadmapdeveloper-roadmapdevops-roadmapfrontend-roadmapgo-roadmaphactoberfestjava-roadmapjavascript-roadmapnodejs-roadmappython-roadmapqa-roadmapreact-roadmaproadmapstudy-planvue-roadmapweb3-roadmap
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
475 lines
17 KiB
475 lines
17 KiB
--- |
|
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, |
|
} from 'lucide-react'; |
|
import { SectionBadge } from '../components/GetStarted/SectionBadge'; |
|
import { TipItem } from '../components/GetStarted/TipItem'; |
|
--- |
|
|
|
<BaseLayout |
|
title='Developer Roadmaps' |
|
description={'Step by step guides and paths to learn different tools or technologies'} |
|
permalink={'/roadmaps'} |
|
> |
|
<div class='bg-gradient-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: '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' }, |
|
]} |
|
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.' |
|
/> |
|
|
|
<RoadmapCard |
|
icon={Cloud} |
|
title='AWS' |
|
link='/aws' |
|
description='Learn all you need to know to become an AWS Engineer.' |
|
/> |
|
|
|
<RoadmapMultiCard |
|
roadmaps={[ |
|
{ title: 'Docker', link: '/docker' }, |
|
{ title: 'Kubernetes', link: '/kubernetes' }, |
|
{ title: 'Linux', link: '/linux' }, |
|
{ title: 'Terraform', link: '/terraform' }, |
|
]} |
|
description='or perhaps you want to learn Docker, Kubernetes, Terraform 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='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={Bot} |
|
icon2={ServerCog} |
|
title='MLOps' |
|
link='/mlops' |
|
description='Learn how to deploy and manage machine learning models.' |
|
/> |
|
</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='flex-grow rounded-lg bg-gradient-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='flex-grow rounded-lg bg-gradient-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='flex-grow rounded-lg bg-gradient-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> |
|
</BaseLayout>
|
|
|