opensource/developer-roadmap
3
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2026-09-24 15:00:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add courses tab

Browse Source
This commit is contained in:
Kamran Ahmed
2025-04-07 19:27:00 +01:00
parent 2cee3a8859
commit c4af3c57f0
16 changed files with 194 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/RoadmapHeader.astro
+1
View File
@@ -159,6 +159,7 @@ const hasProjects = projectCount > 0;
isExternal={true}
hideTextOnMobile={true}
isActive={false}
className='hidden sm:flex'
/>
</div>
)
src/components/TabLink.tsx
+7 -2
View File
@@ -9,6 +9,7 @@ type TabLinkProps = {
badgeText?: string;
hideTextOnMobile?: boolean;
url: string;
className?: string;
};
export function TabLink(props: TabLinkProps) {
@@ -20,6 +21,7 @@ export function TabLink(props: TabLinkProps) {
text,
isActive,
hideTextOnMobile = false,
className: additionalClassName = '',
} = props;
const className = cn(
@@ -30,6 +32,7 @@ export function TabLink(props: TabLinkProps) {
!isActive,
'font-medium hover:text-black text-gray-500 px-0': isExternal,
},
additionalClassName,
);
const textClass = cn({
@@ -41,8 +44,10 @@ export function TabLink(props: TabLinkProps) {
className={cn(
'ml-0.5 hidden items-center gap-0.5 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-black transition-colors sm:flex',
{
'bg-gray-200 text-black group-hover:bg-gray-300 ': badgeText?.toLowerCase() == 'soon',
'bg-yellow-200 text-black group-hover:bg-yellow-300 ': badgeText?.toLowerCase() == 'new',
'bg-gray-200 text-black group-hover:bg-gray-300':
badgeText?.toLowerCase() == 'soon',
'bg-yellow-200 text-black group-hover:bg-yellow-300':
badgeText?.toLowerCase() == 'new',
},
)}
>
src/data/roadmaps/api-design/api-design.md
+14
View File
@@ -12,6 +12,20 @@ hasTopics: true
dimensions:
width: 968
height: 2317.91
courses:
- title: 'Complete Course to Master SQL'
description: 'Learn SQL from scratch with this comprehensive course'
link: 'https://roadmap.sh/courses/sql'
features:
- '55+ Lessons'
- 'AI Tutor'
- 'Coding Environment'
- 'Quizzes'
- 'Certification'
instructor:
name: 'Kamran Ahmed'
image: 'https://github.com/kamranahmedse.png'
title: 'Founder roadmap.sh'
schema:
headline: 'API Design'
description: 'Step by step guide to learn how to design and build robust APIs.'
src/data/roadmaps/aspnet-core/aspnet-core.md
+14
View File
@@ -12,6 +12,20 @@ hasTopics: true
dimensions:
width: 968
height: 2920
courses:
- title: 'Complete Course to Master SQL'
description: 'Learn SQL from scratch with this comprehensive course'
link: 'https://roadmap.sh/courses/sql'
features:
- '55+ Lessons'
- 'AI Tutor'
- 'Coding Environment'
- 'Quizzes'
- 'Certification'
instructor:
name: 'Kamran Ahmed'
image: 'https://github.com/kamranahmedse.png'
title: 'Founder roadmap.sh'
schema:
headline: 'ASP.NET Core Developer Roadmap'
description: 'Learn how to become a ASP.NET Core Developer with this interactive step by step guide in 2025. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
src/data/roadmaps/backend/backend.md
+14
View File
@@ -9,6 +9,20 @@ title: 'Backend Developer'
description: 'Step by step guide to becoming a modern backend developer in 2025'
hasTopics: true
isForkable: false
courses:
- title: 'Complete Course to Master SQL'
description: 'Learn SQL from scratch with this comprehensive course'
link: 'https://roadmap.sh/courses/sql'
features:
- '55+ Lessons'
- 'AI Tutor'
- 'Coding Environment'
- 'Quizzes'
- 'Certification'
instructor:
name: 'Kamran Ahmed'
image: 'https://github.com/kamranahmedse.png'
title: 'Founder roadmap.sh'
partner:
description: "Get the latest Backend news from our sister site"
link: "https://thenewstack.io/?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert"
src/data/roadmaps/data-analyst/data-analyst.md
+14
View File
@@ -12,6 +12,20 @@ isNew: false
dimensions:
width: 968
height: 2650
courses:
- title: 'Complete Course to Master SQL'
description: 'Learn SQL from scratch with this comprehensive course'
link: 'https://roadmap.sh/courses/sql'
features:
- '55+ Lessons'
- 'AI Tutor'
- 'Coding Environment'
- 'Quizzes'
- 'Certification'
instructor:
name: 'Kamran Ahmed'
image: 'https://github.com/kamranahmedse.png'
title: 'Founder roadmap.sh'
schema:
headline: 'Data Analyst Roadmap'
description: 'Learn how to become an Data Analyst with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
src/data/roadmaps/full-stack/full-stack.md
+14
View File
@@ -12,6 +12,20 @@ hasTopics: true
dimensions:
width: 968
height: 2075
courses:
- title: 'Complete Course to Master SQL'
description: 'Learn SQL from scratch with this comprehensive course'
link: 'https://roadmap.sh/courses/sql'
features:
- '55+ Lessons'
- 'AI Tutor'
- 'Coding Environment'
- 'Quizzes'
- 'Certification'
instructor:
name: 'Kamran Ahmed'
image: 'https://github.com/kamranahmedse.png'
title: 'Founder roadmap.sh'
question:
title: 'What is a Full Stack Developer?'
description: |
src/data/roadmaps/java/java.md
+14
View File
@@ -8,6 +8,20 @@ briefDescription: 'Step by step guide to becoming a Java Developer in 2025'
title: 'Java Developer'
description: 'Step by step guide to becoming a Java developer in 2025'
hasTopics: true
courses:
- title: 'Complete Course to Master SQL'
description: 'Learn SQL from scratch with this comprehensive course'
link: 'https://roadmap.sh/courses/sql'
features:
- '55+ Lessons'
- 'AI Tutor'
- 'Coding Environment'
- 'Quizzes'
- 'Certification'
instructor:
name: 'Kamran Ahmed'
image: 'https://github.com/kamranahmedse.png'
title: 'Founder roadmap.sh'
question:
title: 'What is a Java Developer?'
description: |
src/data/roadmaps/nodejs/nodejs.md
+14
View File
@@ -12,6 +12,20 @@ hasTopics: true
dimensions:
width: 968
height: 2380
courses:
- title: 'Complete Course to Master SQL'
description: 'Learn SQL from scratch with this comprehensive course'
link: 'https://roadmap.sh/courses/sql'
features:
- '55+ Lessons'
- 'AI Tutor'
- 'Coding Environment'
- 'Quizzes'
- 'Certification'
instructor:
name: 'Kamran Ahmed'
image: 'https://github.com/kamranahmedse.png'
title: 'Founder roadmap.sh'
schema:
headline: 'Node.js Roadmap'
description: 'Learn Node.js with this interactive step by step guide in 2025. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
src/data/roadmaps/php/php.md
+14
View File
@@ -12,6 +12,20 @@ hasTopics: true
dimensions:
width: 968
height: 3260
courses:
- title: 'Complete Course to Master SQL'
description: 'Learn SQL from scratch with this comprehensive course'
link: 'https://roadmap.sh/courses/sql'
features:
- '55+ Lessons'
- 'AI Tutor'
- 'Coding Environment'
- 'Quizzes'
- 'Certification'
instructor:
name: 'Kamran Ahmed'
image: 'https://github.com/kamranahmedse.png'
title: 'Founder roadmap.sh'
schema:
headline: 'PHP Roadmap'
description: 'Learn how to use PHP with this interactive step by step guide in 2025. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
src/data/roadmaps/postgresql-dba/postgresql-dba.md
+14
View File
@@ -11,6 +11,20 @@ hasTopics: true
dimensions:
width: 969
height: 3675
courses:
- title: 'Complete Course to Master SQL'
description: 'Learn SQL from scratch with this comprehensive course'
link: 'https://roadmap.sh/courses/sql'
features:
- '55+ Lessons'
- 'AI Tutor'
- 'Coding Environment'
- 'Quizzes'
- 'Certification'
instructor:
name: 'Kamran Ahmed'
image: 'https://github.com/kamranahmedse.png'
title: 'Founder roadmap.sh'
seo:
title: 'DBA Roadmap: Learn to become a database administrator with PostgreSQL'
description: 'Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap.'
src/data/roadmaps/python/python.md
+14
View File
@@ -11,6 +11,20 @@ hasTopics: true
dimensions:
width: 992
height: 1630
courses:
- title: 'Complete Course to Master SQL'
description: 'Learn SQL from scratch with this comprehensive course'
link: 'https://roadmap.sh/courses/sql'
features:
- '55+ Lessons'
- 'AI Tutor'
- 'Coding Environment'
- 'Quizzes'
- 'Certification'
instructor:
name: 'Kamran Ahmed'
image: 'https://github.com/kamranahmedse.png'
title: 'Founder roadmap.sh'
schema:
headline: 'Python Roadmap'
description: 'Learn Python with this interactive step by step guide in 2025. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
src/data/roadmaps/software-architect/software-architect.md
+14
View File
@@ -13,6 +13,20 @@ partner:
description: "Ready-to use free on/offboarding templates for new employees"
link: "https://www.silo.team/book-a-demo-silo-team?utm_source=affiliate1&utm_medium=referral&utm_campaign=free_onboarding_checklist"
linkText: "silo.team"
courses:
- title: 'Complete Course to Master SQL'
description: 'Learn SQL from scratch with this comprehensive course'
link: 'https://roadmap.sh/courses/sql'
features:
- '55+ Lessons'
- 'AI Tutor'
- 'Coding Environment'
- 'Quizzes'
- 'Certification'
instructor:
name: 'Kamran Ahmed'
image: 'https://github.com/kamranahmedse.png'
title: 'Founder roadmap.sh'
dimensions:
width: 968
height: 2525
src/data/roadmaps/spring-boot/spring-boot.md
+14
View File
@@ -11,6 +11,20 @@ isNew: false
dimensions:
width: 968
height: 1245.52
courses:
- title: 'Complete Course to Master SQL'
description: 'Learn SQL from scratch with this comprehensive course'
link: 'https://roadmap.sh/courses/sql'
features:
- '55+ Lessons'
- 'AI Tutor'
- 'Coding Environment'
- 'Quizzes'
- 'Certification'
instructor:
name: 'Kamran Ahmed'
image: 'https://github.com/kamranahmedse.png'
title: 'Founder roadmap.sh'
schema:
headline: 'Spring Boot Roadmap'
description: 'Learn Spring Boot with this interactive step by step guide in 2025. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
src/data/roadmaps/system-design/system-design.md
+14 -1
View File
@@ -16,7 +16,20 @@ question:
## What are the components of System Design?
Some of the the major components that play a crucial role in designing a system include Programming language choice, Databases, CDNs, Load Balancers, Caches, Proxies, Queues, Web Servers, Application Servers, Search Engines, Logging and Monitoring Systems, Scaling, and more. Key considerations include scalability, architectural patterns, and security measures to safeguard the system. These elements collectively contribute to building a robust, efficient, and secure system, though this list represents just a subset of the comprehensive factors involved in system design.
courses:
- title: 'Complete Course to Master SQL'
description: 'Learn SQL from scratch with this comprehensive course'
link: 'https://roadmap.sh/courses/sql'
features:
- '55+ Lessons'
- 'AI Tutor'
- 'Coding Environment'
- 'Quizzes'
- 'Certification'
instructor:
name: 'Kamran Ahmed'
image: 'https://github.com/kamranahmedse.png'
title: 'Founder roadmap.sh'
dimensions:
width: 968
height: 3200
src/pages/[roadmapId]/courses.astro
+4 -1
View File
@@ -5,6 +5,7 @@ import { getOpenGraphImageUrl } from '../../lib/open-graph';
import { type RoadmapFrontmatter, getRoadmapIds } from '../../lib/roadmap';
import CourseStep from '../../components/courses/CourseStep.astro';
import Milestone from '../../components/courses/Milestone.astro';
import { getProjectsByRoadmapId } from '../../lib/project';
export const prerender = true;
@@ -50,6 +51,7 @@ const nounTitle =
descriptionNoun[roadmapData.briefTitle] || roadmapData.briefTitle;
const seoDescription = `Seeking ${nounTitle.toLowerCase()} courses to enhance your skills? Explore our top free and paid courses to help you become a ${nounTitle} expert!`;
const projects = await getProjectsByRoadmapId(roadmapId);
const courses = roadmapData.courses || [];
---
@@ -76,6 +78,7 @@ const courses = roadmapData.courses || [];
isForkable={roadmapData.isForkable}
question={roadmapData.question}
coursesCount={courses.length}
projectCount={projects.length}
activeTab='courses'
/>
@@ -131,7 +134,7 @@ const courses = roadmapData.courses || [];
</div>
</div>
<span class='group w-full sm:py-1.5 sm:w-auto mt-3 rounded-lg border border-gray-900 bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors duration-300 hover:opacity-80 sm:mt-0'>
<span class='group mt-3 w-full rounded-lg border border-gray-900 bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors duration-300 hover:opacity-80 sm:mt-0 sm:w-auto sm:py-1.5'>
View Course <span class='ml-1'>&rarr;</span>
</span>
</div>