mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-08-29 20:21:50 +02:00
Add courses tag
This commit is contained in:
Kamran Ahmed
@@ -1,6 +1,7 @@
|
||||
---
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
BookOpenIcon,
|
||||
FolderKanbanIcon,
|
||||
MapIcon,
|
||||
MessageCircle,
|
||||
@@ -136,6 +137,17 @@ const roadmapTitle =
|
||||
isActive={activeTab === 'projects'}
|
||||
badgeText={projectCount > 0 ? '' : 'soon'}
|
||||
/>
|
||||
{
|
||||
roadmapId === 'sql' && (
|
||||
<TabLink
|
||||
url={`/${roadmapId}/courses`}
|
||||
icon={BookOpenIcon}
|
||||
text='Courses'
|
||||
isActive={activeTab === 'courses'}
|
||||
badgeText='New'
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
<TabLink
|
||||
|
||||
@@ -9,6 +9,20 @@ title: 'SQL Roadmap'
|
||||
description: 'Step by step guide to learning SQL in 2025'
|
||||
isNew: false
|
||||
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'
|
||||
dimensions:
|
||||
width: 968
|
||||
height: 2270
|
||||
|
||||
@@ -33,6 +33,17 @@ export interface RoadmapFrontmatter {
|
||||
link: string;
|
||||
linkText: string;
|
||||
};
|
||||
courses?: {
|
||||
title: string;
|
||||
description: string;
|
||||
link: string;
|
||||
instructor: {
|
||||
name: string;
|
||||
image: string;
|
||||
title: string;
|
||||
};
|
||||
features: string[];
|
||||
}[];
|
||||
note?: string;
|
||||
question?: {
|
||||
title: string;
|
||||
|
||||
@@ -33,7 +33,7 @@ const ogImageUrl =
|
||||
resourceId: roadmapId,
|
||||
});
|
||||
|
||||
const descriptionNoun = {
|
||||
const descriptionNoun: Record<string, string> = {
|
||||
'AI and Data Scientist': 'AI and Data Science',
|
||||
'Game Developer': 'Game Development',
|
||||
'Technical Writer': 'Technical Writing',
|
||||
@@ -41,12 +41,32 @@ const descriptionNoun = {
|
||||
};
|
||||
|
||||
const title = `${roadmapData.briefTitle} Courses`;
|
||||
const description = `Courses and project driven path to help you master ${descriptionNoun[roadmapData.briefTitle] || roadmapData.briefTitle}`;
|
||||
const description = `Premium courses to help you master ${descriptionNoun[roadmapData.briefTitle] || roadmapData.briefTitle}`;
|
||||
|
||||
const seoTitle = `${roadmapData.briefTitle} Courses`;
|
||||
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 courses = [
|
||||
{
|
||||
title: 'Complete Course to Master SQL',
|
||||
description: 'Learn SQL from scratch with this comprehensive course',
|
||||
link: 'https://roadmap.sh/courses/sql',
|
||||
instructor: {
|
||||
name: 'Kamran Ahmed',
|
||||
image: 'https://github.com/kamranahmedse.png',
|
||||
title: 'Founder roadmap.sh',
|
||||
},
|
||||
features: [
|
||||
'55+ Lessons',
|
||||
'AI Tutor',
|
||||
'Coding Environment',
|
||||
'Quizzes',
|
||||
'Certification',
|
||||
],
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
@@ -75,56 +95,81 @@ const seoDescription = `Seeking ${nounTitle.toLowerCase()} courses to enhance yo
|
||||
/>
|
||||
|
||||
<div class='container'>
|
||||
<div class='relative my-3 rounded-lg border bg-white px-12 py-8'>
|
||||
<span class='absolute inset-y-0 left-[26.3px] w-[1px] bg-black'></span>
|
||||
|
||||
<div
|
||||
class='mb-8 flex flex-col gap-4 text-sm leading-normal text-gray-500'
|
||||
>
|
||||
<p>
|
||||
Frontend development is a vast field with a lot of tools and
|
||||
technologies. We have the <a
|
||||
class='font-medium text-black underline underline-offset-2'
|
||||
href='/frontend'>frontend roadmap</a
|
||||
>
|
||||
which is filled with a lot of <span class='font-medium text-black'
|
||||
>free and good</span
|
||||
> resources to help you learn. But sometimes it helps to have a minimalistic
|
||||
list of courses and project recommendations to help you get started.
|
||||
</p>
|
||||
|
||||
<p class='rounded-md bg-yellow-100 p-2 text-yellow-900'>
|
||||
Below are some of the best courses (paid) and projects to help you
|
||||
learn frontend development. These are handpicked and are a great way
|
||||
to get started.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Please note that these are paid courses curated from external
|
||||
platforms. We earn a small commission if you purchase the course
|
||||
using the links below. This helps us maintain the website and keep
|
||||
it free for everyone.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
If you are looking for free resources, you can check out the <a
|
||||
class='font-medium text-black underline underline-offset-2'
|
||||
href='/frontend'>frontend roadmap</a
|
||||
>. Also, we have a <a
|
||||
class='font-medium text-black underline underline-offset-2'
|
||||
href='/frontend/projects'>list of projects</a
|
||||
> that you can work on to enhance your skills.
|
||||
<div class='relative mb-8 mt-2.5'>
|
||||
<div class='my-4 flex items-center justify-between'>
|
||||
<p class='border-l-4 border-black pl-2 text-sm text-black'>
|
||||
Official Courses by <span class='font-semibold'> roadmap.sh </span>
|
||||
team
|
||||
</p>
|
||||
<div class='text-sm text-gray-500'>More coming soon</div>
|
||||
</div>
|
||||
|
||||
<!--Step content curator-->
|
||||
<CourseStep />
|
||||
<div class='mt-8'></div>
|
||||
<CourseStep />
|
||||
<div class='mt-8'></div>
|
||||
<Milestone />
|
||||
<div class='mt-8'></div>
|
||||
<CourseStep />
|
||||
<div class='grid grid-cols-1 gap-5 md:grid-cols-1'>
|
||||
{
|
||||
courses.map((course) => (
|
||||
<a
|
||||
href={course.link}
|
||||
class='block rounded-lg border border-gray-200 bg-white p-6 duration-300 hover:border-gray-400/60'
|
||||
>
|
||||
<div class='flex justify-between'>
|
||||
<div class='flex-1'>
|
||||
<h3 class='mb-2 text-2xl font-bold text-black'>
|
||||
{course.title}
|
||||
</h3>
|
||||
<p class='text-base text-gray-600'>{course.description}</p>
|
||||
|
||||
{course.features.length > 0 && (
|
||||
<>
|
||||
<div class='my-6 flex flex-wrap gap-2'>
|
||||
{course.features.map((feature) => (
|
||||
<span class='rounded-full border border-gray-200 bg-gray-100 px-2 py-0.5 text-xs text-gray-700'>
|
||||
{feature}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div class='flex items-center justify-between'>
|
||||
<div class='flex items-center'>
|
||||
<img
|
||||
src={course.instructor.image}
|
||||
alt={course.instructor.name}
|
||||
class='mr-3 h-12 w-12 rounded-full border border-gray-200'
|
||||
/>
|
||||
<div>
|
||||
<p class='text-base font-medium text-gray-900'>
|
||||
{course.instructor.name}
|
||||
</p>
|
||||
<p class='text-sm text-gray-500'>
|
||||
{course.instructor.title}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class='group rounded-lg border border-gray-900 bg-gray-900 px-4 py-1.5 text-sm font-medium text-white transition-colors duration-300 hover:opacity-80'>
|
||||
View Course <span class='ml-1'>→</span>
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
{
|
||||
courses.length === 0 && (
|
||||
<div class='rounded-lg border border-gray-200 bg-white py-10 text-center'>
|
||||
<h3 class='mb-2 text-lg font-medium text-gray-700'>
|
||||
No courses available yet
|
||||
</h3>
|
||||
<p class='text-sm text-gray-500'>
|
||||
We're working on creating premium courses for this roadmap.
|
||||
Check back soon!
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user