From ee237d29723a5ef7fb2fbd90d4c6bb261be74ed2 Mon Sep 17 00:00:00 2001
From: "Dev. Gautam Kumar" <111997815+devsdenepal@users.noreply.github.com>
Date: Sat, 21 Sep 2024 16:01:51 +0000
Subject: [PATCH] improve ux
---
src/components/CourseDetail.jsx | 2 ++
src/components/YouTubeEmbed.jsx | 20 ++++++++++++++++++++
src/components/courseData.js | 32 ++++++++++++++++++++++++++++++++
3 files changed, 54 insertions(+)
create mode 100644 src/components/YouTubeEmbed.jsx
diff --git a/src/components/CourseDetail.jsx b/src/components/CourseDetail.jsx
index d5d5d01..e7a2a4a 100644
--- a/src/components/CourseDetail.jsx
+++ b/src/components/CourseDetail.jsx
@@ -1,6 +1,7 @@
import React from 'react';
import { useParams } from 'react-router-dom';
import courses from './courseData'; // Ensure the path is correct
+import YouTubeEmbed from './YouTubeEmbed';
function CourseDetail() {
const { courseName } = useParams();
@@ -27,6 +28,7 @@ function CourseDetail() {
{course.description}
Course Content:
+
{formatContent(course.content)}
);
diff --git a/src/components/YouTubeEmbed.jsx b/src/components/YouTubeEmbed.jsx
new file mode 100644
index 0000000..8bf50cd
--- /dev/null
+++ b/src/components/YouTubeEmbed.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const YouTubeEmbed = ({ videoId }) => {
+ const videoUrl = `https://www.youtube.com/embed/${videoId}`;
+
+ return (
+
+
+
+ );
+};
+
+export default YouTubeEmbed;
diff --git a/src/components/courseData.js b/src/components/courseData.js
index f270d8c..4abcc78 100644
--- a/src/components/courseData.js
+++ b/src/components/courseData.js
@@ -3,6 +3,7 @@ const courses = {
title: 'Course 1: GitHub Action Setup',
image: 'https://dummyimage.com/600x400/000/fff&text=GitHub+Action',
description: 'Learn how to automate your development workflows with GitHub Actions.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course will cover:
\n- Setting up GitHub Actions
@@ -16,6 +17,7 @@ const courses = {
title: 'Course 2: GitHub Pages Guide',
image: 'https://dummyimage.com/600x400/000/fff&text=GitHub+Pages',
description: 'Deploy static websites using GitHub Pages.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
Learn how to:
\n- Host websites on GitHub Pages
@@ -28,6 +30,7 @@ const courses = {
title: 'Course 3: Introduction to Firebase',
image: 'https://dummyimage.com/600x400/000/fff&text=Firebase',
description: 'Get started with Firebase to build modern web and mobile apps.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course covers:
\n- Setting up Firebase projects
@@ -40,6 +43,7 @@ const courses = {
title: 'Course 4: Working with Cloudflare',
image: 'https://dummyimage.com/600x400/000/fff&text=Cloudflare',
description: 'Learn how to use Cloudflare to enhance website performance and security.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
In this course, you will learn:
\n- DNS management
@@ -52,6 +56,7 @@ const courses = {
title: 'Course 5: Everything You Need to Know About Domain Hosting',
image: 'https://dummyimage.com/600x400/000/fff&text=Domain+Hosting',
description: 'A comprehensive guide to understanding domain registration and hosting.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
Learn about:
\n- Domain registration
@@ -64,6 +69,7 @@ const courses = {
title: 'Course 6: How to Build a Discord Bot?',
image: 'https://dummyimage.com/600x400/000/fff&text=Discord+Bot',
description: 'Learn how to create and deploy a Discord bot using JavaScript.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course will cover:
\n- Setting up a Discord bot
@@ -76,6 +82,7 @@ const courses = {
title: 'Course 7: How to Build a Telegram Bot?',
image: 'https://dummyimage.com/600x400/000/fff&text=Telegram+Bot',
description: 'Create and manage a Telegram bot using the Telegram Bot API.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
Learn how to:
\n- Set up a Telegram bot
@@ -88,6 +95,7 @@ const courses = {
title: 'Course 8: Using Webhooks for Dev',
image: 'https://dummyimage.com/600x400/000/fff&text=Webhooks',
description: 'Master the art of integrating webhooks into your applications.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course will teach:
\n- What webhooks are and how they work
@@ -100,6 +108,7 @@ const courses = {
title: 'Course 9: OH MY ZSH Setup',
image: 'https://dummyimage.com/600x400/000/fff&text=ZSH+Setup',
description: 'Enhance your terminal experience with OH MY ZSH.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course covers:
\n- Installing and configuring OH MY ZSH
@@ -111,6 +120,7 @@ const courses = {
title: 'Course 10: Learn to Customize Terminal',
image: 'https://dummyimage.com/600x400/000/fff&text=Customize+Terminal',
description: 'Learn how to create a productive and visually appealing terminal environment.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course will teach you:
\n- Customizing terminal prompts and colors
@@ -122,6 +132,7 @@ const courses = {
title: 'Course 11: Windows Operational',
image: 'https://dummyimage.com/600x400/000/fff&text=Windows+Operational',
description: 'A complete guide to operating and optimizing your Windows system for development.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course covers:
\n- Essential Windows commands and shortcuts
@@ -133,6 +144,7 @@ const courses = {
title: 'Course 12: Linux for Devs',
image: 'https://dummyimage.com/600x400/000/fff&text=Linux+for+Devs',
description: 'Master Linux commands and workflows for software development.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
Learn how to:
\n- Navigate Linux file systems
@@ -144,6 +156,7 @@ const courses = {
title: 'Course 13: Portfolio Development',
image: 'https://dummyimage.com/600x400/000/fff&text=Portfolio+Development',
description: 'Build and showcase your skills with a professional online portfolio.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course will teach:
\n- Structuring and designing portfolios
@@ -155,6 +168,7 @@ const courses = {
title: 'Course 14: Guide to Page Indexing',
image: 'https://dummyimage.com/600x400/000/fff&text=Page+Indexing',
description: 'Understand the process and importance of search engine indexing.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
Learn about:
\n- SEO basics
@@ -166,6 +180,7 @@ const courses = {
title: 'Course 15: Why Use Codespace?',
image: 'https://dummyimage.com/600x400/000/fff&text=Codespace',
description: 'Learn why Codespace is essential for cloud-based development.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course covers:
\n- Setting up Codespace for remote development
@@ -177,6 +192,7 @@ const courses = {
title: 'Course 16: Website Prototype Designing',
image: 'https://dummyimage.com/600x400/000/fff&text=Prototype+Designing',
description: 'Learn the principles of website prototyping and user interface design.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course will teach:
\n- Creating wireframes
@@ -188,6 +204,7 @@ const courses = {
title: 'Course 17: How to Request a Pull Request?',
image: 'https://dummyimage.com/600x400/000/fff&text=Pull+Request',
description: 'Master the process of contributing to open-source projects via pull requests.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
Learn how to:
\n- Submit pull requests
@@ -199,6 +216,7 @@ const courses = {
title: 'Course 18: Working with README',
image: 'https://dummyimage.com/600x400/000/fff&text=README',
description: 'Learn to create clear and effective README files for your projects.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course will teach:
\n- Structuring a README file
@@ -210,6 +228,7 @@ const courses = {
title: 'Course 19: Code Websites in Snaps (Bootstrap)',
image: 'https://dummyimage.com/600x400/000/fff&text=Bootstrap',
description: 'Learn to build responsive websites quickly using Bootstrap.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course covers:
\n- Using Bootstrap for fast layout creation
@@ -221,6 +240,7 @@ const courses = {
title: 'Course 20: Code Websites in Snaps (Tailwind)',
image: 'https://dummyimage.com/600x400/000/fff&text=Tailwind',
description: 'Create modern websites quickly with Tailwind CSS.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
Learn how to:
\n- Set up Tailwind in your project
@@ -232,6 +252,7 @@ const courses = {
title: 'Course 21: Fix Browser Routing in GH Pages',
image: 'https://dummyimage.com/600x400/000/fff&text=Browser+Routing',
description: 'Learn how to fix common routing issues in GitHub Pages.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course covers:
\n- Issues with single-page applications (SPA) routing
@@ -242,6 +263,7 @@ const courses = {
title: 'Course 22: Centering an Element',
image: 'https://dummyimage.com/600x400/000/fff&text=Centering',
description: 'Learn how to center elements using CSS.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course will teach:
\n- Centering elements with Flexbox
@@ -253,6 +275,7 @@ const courses = {
title: 'Course 23: Convert Raw JSON Data to Web Interface',
image: 'https://dummyimage.com/600x400/000/fff&text=JSON+to+Web',
description: 'Learn to display and manipulate JSON data on your website.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course covers:
\n- Parsing and displaying JSON data
@@ -264,6 +287,7 @@ const courses = {
title: 'Course 24: Working with Linux in Windows WSL',
image: 'https://dummyimage.com/600x400/000/fff&text=WSL',
description: 'Learn to use the Windows Subsystem for Linux (WSL) for development.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
Learn how to:
\n- Set up WSL on Windows
@@ -275,6 +299,7 @@ const courses = {
title: 'Course 25: Designing CLI with ASCII Characters',
image: 'https://dummyimage.com/600x400/000/fff&text=CLI+Design',
description: 'Learn how to make your CLI programs visually appealing with ASCII.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course will cover:
\n- Using ASCII art for CLI branding
@@ -286,6 +311,7 @@ const courses = {
title: 'Course 26: Hosting a Free Site',
image: 'https://dummyimage.com/600x400/000/fff&text=Free+Hosting',
description: 'Learn how to host a website for free using popular platforms.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course covers:
\n- Free hosting platforms (GitHub Pages, Netlify, Vercel)
@@ -297,6 +323,7 @@ const courses = {
title: 'Course 27: Registering a Free Domain',
image: 'https://dummyimage.com/600x400/000/fff&text=Free+Domain',
description: 'Learn how to get a free domain for your website.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
Learn about:
\n- Free domain providers
@@ -308,6 +335,7 @@ const courses = {
title: 'Course 28: Using Modules in Several Languages',
image: 'https://dummyimage.com/600x400/000/fff&text=Modules',
description: 'Learn to use and create modules across different programming languages.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course will teach:
\n- Importing and exporting modules in JavaScript, Python, and more
@@ -319,6 +347,7 @@ const courses = {
title: 'Course 29: Getting Started in Cybersecurity: Kid Package',
image: 'https://dummyimage.com/600x400/000/fff&text=Cybersecurity+Basics',
description: 'An introductory guide to cybersecurity for beginners.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
Learn about:
\n- Basic cybersecurity principles
@@ -330,6 +359,7 @@ const courses = {
title: 'Course 30: Python for Web Scraping',
image: 'https://dummyimage.com/600x400/000/fff&text=Web+Scraping',
description: 'Learn to extract data from websites using Python.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course covers:
\n- Using libraries like BeautifulSoup and Scrapy
@@ -341,6 +371,7 @@ const courses = {
title: 'Course 31: Automate Arduino Speech Recognition Based Project',
image: 'https://dummyimage.com/600x400/000/fff&text=Arduino+Speech+Recognition',
description: 'Learn to create an Arduino project with speech recognition features.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
Learn how to:
\n- Integrate speech recognition modules with Arduino
@@ -352,6 +383,7 @@ const courses = {
title: 'Course 32: Android Debug Bridge (ADB) for Devs',
image: 'https://dummyimage.com/600x400/000/fff&text=Android+ADB',
description: 'Learn how to use Android Debug Bridge (ADB) for app development and debugging.',
+ ytb_vid:`https://www.youtube.com/watch?v=8lEsbcUSoU8`,
content: `
This course covers:
\n- Setting up ADB