improve ux

CourseKrimson · Sep 21, 2024 · ee237d2 · ee237d2
1 parent 1e05e09
commit ee237d2
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 0 deletions.
diff --git 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() {
       <img src={course.image} alt={course.title} className="img-fluid" />
       <p>{course.description}</p>
       <h4>Course Content:</h4>
+      <YouTubeEmbed videoId='8lEsbcUSoU8' />
       <p>{formatContent(course.content)}</p>
     </div>
   );

diff --git a/src/components/YouTubeEmbed.jsx 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 (
+    <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
+      <iframe
+        title="YouTube Video"
+        src={videoUrl}
+        style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
+        frameBorder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+      />
+    </div>
+  );
+};
+
+export default YouTubeEmbed;
diff --git 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