🎓 SkillUp Academy – Build Your Own Online Courses Platform with HTML, CSS & JS (Free Project)
Are you looking to create your own online learning platform or want to understand how course-based web apps are structured? Introducing SkillUp Academy – a fully functional front-end project built using HTML, CSS (Tailwind), and JavaScript. This open-source template allows you to create an interactive, responsive, and modern website for hosting and managing online courses.
Whether you're a student learning web development, a teacher wanting to build your personal LMS, or a freelancer creating templates for clients — this project is a perfect starting point.
💡 What is SkillUp Academy?
SkillUp Academy is a web-based platform that mimics real-life e-learning websites like Udemy, Coursera, and Skillshare. It includes a dynamic navigation system, structured course sections, user and instructor dashboards, modals for login/sign-up, payment options, a shopping cart system, and more — all built without any backend, making it lightweight and easy to deploy or customize.
It’s designed for learning, demoing, and showcasing front-end skills — and is 100% free to download or reuse.
✨ Key Features
🏫 Multi-Page Navigation (SPA-Like Experience)
Easily switch between Home, Courses, My Dashboard, Instructor Panel, About Us, and Contact using JavaScript-powered navigation without page reloads.
📚 Course Cards Section
Display your online courses in a professional layout with responsive design and hover effects for user engagement.
👨🏫 User & Instructor Dashboards
Separate sections designed to simulate a logged-in user's dashboard or instructor panel — great for UX prototyping.
🛒 Shopping Cart with Item Count
A working cart icon that tracks selected courses and shows real-time item count. Perfect for simulating a course purchasing system.
🔐 Modal-Based Login & Signup
Clean and user-friendly authentication modals that pop up without redirecting users — ideal for capturing user interest.
💳 Payment & Info Modals
Simulate payment interactions and confirmation messages for a real-world learning flow.
💻 Fully Responsive & Mobile-Friendly
Built with Tailwind CSS, the layout adapts beautifully across desktop, tablet, and mobile devices.
🎯 Who Is This Project For?
This project is ideal for:
-
💻 Web development students learning JavaScript UI/UX
-
🧑🏫 Teachers or instructors building personal LMS systems
-
🔧 Freelancers & front-end developers creating UI templates
-
🚀 Beginners who want to build a complete project from scratch
-
🧪 Portfolio builders looking for a practical, modern example
📁 Download & Customize – 100% Free
You can freely copy the source code, download the full ZIP, and customize it for your own course site, college project, or demo.
Please log in to download the file!
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkillUp Academy - Online Courses</title>
<!-- SEO Meta Tags -->
<meta name="description" content="SkillUp Academy offers a wide range of online courses including web development, data science, digital marketing, and more. Learn Python online, online coding courses, and advance your career.">
<meta name="keywords" content="online courses, web development, data science, digital marketing, learn Python online, online coding courses, UI/UX design, mobile app development, cybersecurity, AWS cloud, game development, artificial intelligence, blockchain, project management, financial modeling, content writing, public speaking">
<meta name="author" content="SkillUp Academy">
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Google Analytics (replace with your actual GA_MEASUREMENT_ID) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>
<!-- Facebook Pixel (replace with your actual FACEBOOK_PIXEL_ID) -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'FACEBOOK_PIXEL_ID');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=FACEBOOK_PIXEL_ID&ev=PageView&noscript=1"
/></noscript>
</head>
<body class="flex flex-col min-h-screen">
<!-- Header -->
<header class="bg-gradient-to-r from-blue-600 to-purple-700 text-white p-6 shadow-lg rounded-b-lg">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-3xl font-bold rounded-md p-2">SkillUp Academy</h1>
<nav class="flex items-center space-x-6">
<ul class="flex space-x-6">
<li><a href="#" onclick="showSection('homeSection')" class="hover:text-blue-200 transition duration-300">Home</a></li>
<li><a href="#" onclick="showSection('coursesSection')" class="hover:text-blue-200 transition duration-300">Courses</a></li>
<li><a href="#" onclick="showSection('userDashboard')" class="hover:text-blue-200 transition duration-300">My Dashboard</a></li>
<li><a href="#" onclick="showSection('instructorDashboard')" class="hover:text-blue-200 transition duration-300">Instructor</a></li>
<li><a href="#" onclick="showSection('aboutUsSection')" class="hover:text-blue-200 transition duration-300">About Us</a></li>
<li><a href="#" onclick="showSection('contactSection')" class="hover:text-blue-200 transition duration-300">Contact</a></li>
</ul>
<button onclick="openCartModal()" class="relative p-2 rounded-full hover:bg-blue-700 transition duration-300">
<i class="fas fa-shopping-cart text-xl"></i>
<span id="cartItemCount" class="absolute top-0 right-0 bg-red-500 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center -mt-1 -mr-1">0</span>
</button>
</nav>
</div>
</header>
<!-- Main Content Container -->
<div class="flex-grow">
<!-- Home Section -->
<section id="homeSection" class="container mx-auto p-8">
<!-- Hero Section -->
<div class="bg-gradient-to-br from-blue-500 to-purple-600 text-white rounded-xl shadow-xl p-12 text-center mb-12" style="background-image: url('https://placehold.co/1200x600/6A5ACD/FFFFFF?text=Learning+Online'); background-size: cover; background-position: center;">
<div class="bg-black bg-opacity-50 rounded-lg p-8">
<h1 class="text-5xl font-extrabold mb-4 leading-tight">Master In-Demand Skills. Learn Anytime, Anywhere.</h1>
<p class="text-xl mb-8 opacity-90">Join thousands of learners upgrading their careers with our expert-led online courses.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button onclick="showSection('coursesSection')" class="bg-white text-blue-600 py-3 px-8 rounded-full text-lg font-semibold hover:bg-blue-100 transition duration-300 transform hover:scale-105 shadow-lg">
Browse Courses <i class="fas fa-arrow-right ml-2"></i>
</button>
<button onclick="showInfoModal('Free Trial', 'Start your 7-day free trial now! (Demo feature)')" class="bg-transparent border-2 border-white text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-white hover:text-blue-600 transition duration-300 transform hover:scale-105 shadow-lg">
Start Free Trial <i class="fas fa-play-circle ml-2"></i>
</button>
<button onclick="openAuthModal('signup')" class="bg-purple-700 text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-purple-800 transition duration-300 transform hover:scale-105 shadow-lg">
Join Now <i class="fas fa-user-plus ml-2"></i>
</button>
</div>
</div>
</div>
<!-- Search Bar or Browse Categories -->
<div class="flex flex-col md:flex-row justify-center items-center gap-4 mb-8">
<div class="relative w-full md:w-1/2 lg:w-1/3">
<input type="text" id="homeCourseSearch" onkeyup="filterCourses('home')" placeholder="Search courses..."
class="w-full p-3 pl-10 rounded-lg border-2 border-gray-300 focus:outline-none focus:border-blue-500 shadow-sm">
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
<div class="relative w-full md:w-auto">
<select id="homePriceFilter" onchange="filterCourses('home')"
class="w-full p-3 pr-10 rounded-lg border-2 border-gray-300 focus:outline-none focus:border-blue-500 shadow-sm appearance-none bg-white">
<option value="all">All Prices</option>
<option value="0-5000">₹0 - ₹5,000</option>
<option value="5001-10000">₹5,001 - ₹10,000</option>
<option value="10001-15000">₹10,001 - ₹15,000</option>
<option value="15001-above">₹15,001+</option>
</select>
<i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
</div>
</div>
<!-- Featured or Popular Courses -->
<h2 class="text-4xl font-bold text-gray-800 mb-10 text-center">Featured Courses</h2>
<div id="homeCoursesContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Featured Course cards will be dynamically loaded here -->
</div>
<p id="homeNoCoursesMessage" class="text-center text-gray-600 text-lg mt-8 hidden">No courses found matching your criteria.</p>
<!-- Why Learn with Us (Value Proposition Section) -->
<div class="bg-blue-100 rounded-xl shadow-lg p-8 mt-12">
<h3 class="text-3xl font-bold text-gray-800 mb-8 text-center">Why Learn with SkillUp Academy?</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 text-center">
<div class="p-4 bg-white rounded-lg shadow-md">
<i class="fas fa-user-tie text-5xl text-blue-600 mb-4"></i>
<h4 class="font-semibold text-xl text-gray-900 mb-2">Expert Instructors</h4>
<p class="text-gray-700 text-sm">Learn from industry leaders and seasoned professionals.</p>
</div>
<div class="p-4 bg-white rounded-lg shadow-md">
<i class="fas fa-infinity text-5xl text-purple-600 mb-4"></i>
<h4 class="font-semibold text-xl text-gray-900 mb-2">Lifetime Access</h4>
<p class="text-gray-700 text-sm">Access your courses anytime, forever, on any device.</p>
</div>
<div class="p-4 bg-white rounded-lg shadow-md">
<i class="fas fa-certificate text-5xl text-green-600 mb-4"></i>
<h4 class="font-semibold text-xl text-gray-900 mb-2">Earn Certificates</h4>
<p class="text-gray-700 text-sm">Receive verifiable certificates upon course completion.</p>
</div>
<div class="p-4 bg-white rounded-lg shadow-md">
<i class="fas fa-rupee-sign text-5xl text-yellow-600 mb-4"></i>
<h4 class="font-semibold text-xl text-gray-900 mb-2">Affordable Pricing</h4>
<p class="text-gray-700 text-sm">High-quality education that fits your budget.</p>
</div>
</div>
</div>
<!-- Student Testimonials / Reviews -->
<div class="bg-white rounded-xl shadow-lg p-8 mt-12">
<h3 class="text-3xl font-bold text-gray-800 mb-8 text-center">What Our Students Say</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-gray-50 p-6 rounded-lg shadow-md border border-gray-200">
<p class="text-gray-700 italic mb-4">"SkillUp Academy transformed my career! The Web Development Bootcamp was comprehensive and the instructors were incredibly supportive."</p>
<p class="font-semibold text-gray-900">- Priya Sharma, Web Developer</p>
<div class="text-yellow-400 mt-2">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
</div>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-md border border-gray-200">
<p class="text-gray-700 italic mb-4">"The Data Science Masterclass was exactly what I needed. Practical, engaging, and highly relevant to today's job market."</p>
<p class="font-semibold text-gray-900">- Rahul Singh, Data Analyst</p>
<div class="text-yellow-400 mt-2">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
</div>
<!-- How It Works (3-Step Guide) -->
<div class="bg-purple-100 rounded-xl shadow-lg p-8 mt-12">
<h3 class="text-3xl font-bold text-gray-800 mb-8 text-center">Your Learning Journey in 3 Steps</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
<div class="p-6 bg-white rounded-lg shadow-md">
<i class="fas fa-user-plus text-5xl text-blue-600 mb-4"></i>
<h4 class="font-semibold text-xl text-gray-900 mb-2">1. Sign Up</h4>
<p class="text-gray-700 text-sm">Create your free account in minutes.</p>
</div>
<div class="p-6 bg-white rounded-lg shadow-md">
<i class="fas fa-book-reader text-5xl text-purple-600 mb-4"></i>
<h4 class="font-semibold text-xl text-gray-900 mb-2">2. Choose a Course</h4>
<p class="text-gray-700 text-sm">Explore our vast library and pick your passion.</p>
</div>
<div class="p-6 bg-white rounded-lg shadow-md">
<i class="fas fa-laptop-code text-5xl text-green-600 mb-4"></i>
<h4 class="font-semibold text-xl text-gray-900 mb-2">3. Start Learning</h4>
<p class="text-gray-700 text-sm">Begin your journey to new skills and opportunities.</p>
</div>
</div>
</div>
<!-- Mobile App Promotion -->
<div class="bg-gradient-to-r from-green-500 to-teal-600 text-white rounded-xl shadow-xl p-12 text-center mt-12">
<h3 class="text-4xl font-extrabold mb-4">Learn On The Go with Our Mobile App!</h3>
<p class="text-xl mb-8 opacity-90">Access your courses anytime, anywhere. Download now for seamless learning.</p>
<div class="flex flex-col sm:flex-row justify-center gap-6">
<a href="#" class="bg-black text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-gray-800 transition duration-300 transform hover:scale-105 shadow-lg">
<i class="fab fa-apple mr-2"></i> App Store
</a>
<a href="#" class="bg-black text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-gray-800 transition duration-300 transform hover:scale-105 shadow-lg">
<i class="fab fa-google-play mr-2"></i> Google Play
</a>
</div>
</div>
<!-- Instructor Invitation -->
<div class="bg-white rounded-xl shadow-lg p-8 mt-12 text-center border border-gray-200">
<h3 class="text-3xl font-bold text-gray-800 mb-6">Become an Instructor</h3>
<p class="text-lg text-gray-700 mb-8">Share your expertise with thousands of eager learners. Join our community of passionate educators and make an impact.</p>
<button onclick="showSection('instructorDashboard')" class="bg-purple-600 text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-purple-700 transition duration-300 transform hover:scale-105 shadow-lg">
Start Teaching Today <i class="fas fa-chalkboard-teacher ml-2"></i>
</button>
</div>
<!-- Newsletter Sign-Up -->
<div class="bg-blue-50 rounded-xl shadow-lg p-8 mt-12 text-center border border-blue-200">
<h3 class="text-3xl font-bold text-gray-800 mb-6">Stay Updated with Our Newsletter!</h3>
<p class="text-lg text-gray-700 mb-6">Get the latest course updates, exclusive discounts, and free learning resources delivered straight to your inbox.</p>
<form class="flex flex-col sm:flex-row justify-center gap-4 max-w-lg mx-auto">
<input type="email" placeholder="Enter your email address" class="flex-grow p-3 rounded-lg border-2 border-blue-300 focus:outline-none focus:border-blue-500 shadow-sm" required>
<button type="submit" class="bg-blue-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-blue-700 transition duration-300 transform hover:scale-105 shadow-lg">
Subscribe <i class="fas fa-paper-plane ml-2"></i>
</button>
</form>
</div>
</section>
<!-- Courses Listing Section -->
<section id="coursesSection" class="container mx-auto p-8 hidden">
<h2 class="text-4xl font-bold text-gray-800 mb-10 text-center">All Courses</h2>
<!-- Search and Filter Section -->
<div class="flex flex-col md:flex-row justify-center items-center gap-4 mb-8">
<div class="relative w-full md:w-1/2 lg:w-1/3">
<input type="text" id="allCourseSearch" onkeyup="filterCourses('all')" placeholder="Search courses..."
class="w-full p-3 pl-10 rounded-lg border-2 border-gray-300 focus:outline-none focus:border-blue-500 shadow-sm">
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
<div class="relative w-full md:w-auto">
<select id="allPriceFilter" onchange="filterCourses('all')"
class="w-full p-3 pr-10 rounded-lg border-2 border-gray-300 focus:outline-none focus:border-blue-500 shadow-sm appearance-none bg-white">
<option value="all">All Prices</option>
<option value="0-5000">₹0 - ₹5,000</option>
<option value="5001-10000">₹5,001 - ₹10,000</option>
<option value="10001-15000">₹10,001 - ₹15,000</option>
<option value="15001-above">₹15,001+</option>
</select>
<i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
</div>
</div>
<div id="allCoursesContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Course cards will be dynamically loaded here -->
</div>
<p id="allNoCoursesMessage" class="text-center text-gray-600 text-lg mt-8 hidden">No courses found matching your criteria.</p>
</section>
<!-- Course Detail Page Section -->
<section id="courseDetailPage" class="container mx-auto p-8 hidden">
<button onclick="showSection('coursesSection')" class="mb-6 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition duration-300">
<i class="fas fa-arrow-left mr-2"></i> Back to Courses
</button>
<div class="bg-white rounded-xl shadow-lg p-8">
<div class="md:flex md:space-x-8">
<div class="md:w-2/3">
<img id="detailCourseImage" src="" alt="Course Image" class="w-full h-64 object-cover rounded-lg mb-6">
<h2 id="detailCourseTitle" class="text-4xl font-bold text-gray-900 mb-4"></h2>
<div class="flex items-center text-yellow-500 mb-4">
<span id="detailCourseRating"></span>
<span class="text-gray-600 ml-2" id="detailCourseReviews"></span>
</div>
<p id="detailCourseDescription" class="text-gray-700 text-lg mb-6"></p>
<h3 class="text-2xl font-semibold text-gray-800 mb-4">Course Syllabus</h3>
<div id="courseSyllabus" class="bg-gray-50 p-6 rounded-lg max-h-96 overflow-y-auto border border-gray-200">
<!-- Syllabus items will be dynamically loaded here -->
</div>
</div>
<div class="md:w-1/3 mt-8 md:mt-0">
<div class="bg-blue-50 p-6 rounded-lg shadow-md">
<div class="flex justify-between items-center mb-4">
<span class="text-4xl font-bold text-green-700" id="detailCoursePrice"></span>
<span class="text-lg text-gray-500 line-through" id="detailCourseOriginalPrice"></span>
</div>
<button id="enrollNowButton" onclick=""
class="w-full bg-blue-600 text-white py-4 px-6 rounded-lg text-xl font-semibold hover:bg-blue-700 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
Enroll Now
</button>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-md mt-8">
<h4 class="text-xl font-semibold text-gray-800 mb-4">About the Instructor</h4>
<img id="instructorImage" src="https://placehold.co/100x100/E0E0E0/000000?text=Instructor" alt="Instructor" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover">
<p class="font-bold text-gray-900 text-center" id="instructorName"></p>
<p class="text-gray-600 text-sm text-center mb-4" id="instructorTitle"></p>
<p class="text-gray-700 text-sm" id="instructorBio"></p>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-md mt-8">
<h4 class="text-xl font-semibold text-gray-800 mb-4">Student Reviews</h4>
<div id="detailCourseReviewsList">
<!-- Reviews will be dynamically loaded here -->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- User Dashboard Section -->
<section id="userDashboard" class="container mx-auto p-8 hidden">
<h2 class="text-4xl font-bold text-gray-800 mb-10 text-center">My Learning Dashboard</h2>
<div class="bg-white rounded-xl shadow-lg p-8">
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Enrolled Courses</h3>
<div id="enrolledCoursesContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Enrolled courses will be dynamically loaded here -->
</div>
<p id="noEnrolledCoursesMessage" class="text-center text-gray-600 text-lg mt-8 hidden">You are not enrolled in any courses yet.</p>
<h3 class="text-2xl font-semibold text-gray-800 mt-12 mb-6">Upcoming Lessons</h3>
<div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
<ul class="list-disc list-inside text-gray-700">
<li class="mb-2"><strong>Web Dev:</strong> Module 3 - React Hooks (July 15, 2025)</li>
<li class="mb-2"><strong>Data Science:</strong> Live Q&A Session (July 18, 2025)</li>
<li><strong>Digital Marketing:</strong> SEO Audit Workshop (July 20, 2025)</li>
</ul>
</div>
</div>
</section>
<!-- Instructor Dashboard Section -->
<section id="instructorDashboard" class="container mx-auto p-8 hidden">
<h2 class="text-4xl font-bold text-gray-800 mb-10 text-center">Instructor Dashboard</h2>
<div class="bg-white rounded-xl shadow-lg p-8">
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Upload New Course</h3>
<form id="newCourseForm" class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="newCourseTitle" class="block text-gray-700 text-sm font-bold mb-2">Course Title</label>
<input type="text" id="newCourseTitle" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="e.g., Advanced JavaScript">
</div>
<div>
<label for="newCourseDescription" class="block text-gray-700 text-sm font-bold mb-2">Description</label>
<textarea id="newCourseDescription" rows="3" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Brief overview of the course"></textarea>
</div>
<div>
<label for="newCoursePrice" class="block text-gray-700 text-sm font-bold mb-2">Price (₹)</label>
<input type="number" id="newCoursePrice" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="e.g., 7500">
</div>
<div>
<label for="newCourseOriginalPrice" class="block text-gray-700 text-sm font-bold mb-2">Original Price (₹ - optional)</label>
<input type="number" id="newCourseOriginalPrice" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="e.g., 10000">
</div>
<div class="md:col-span-2">
<label for="newCourseImage" class="block text-gray-700 text-sm font-bold mb-2">Course Image URL</label>
<input type="text" id="newCourseImage" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="https://placehold.co/600x400/...">
</div>
<div class="md:col-span-2">
<label for="newCourseSyllabus" class="block text-gray-700 text-sm font-bold mb-2">Syllabus (one item per line)</label>
<textarea id="newCourseSyllabus" rows="5" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Module 1: Introduction to HTML Module 2: CSS Styling"></textarea>
</div>
<div class="md:col-span-2">
<button type="button" onclick="uploadNewCourse()" class="bg-blue-600 text-white py-2 px-6 rounded-lg font-semibold hover:bg-blue-700 transition duration-300">Upload Course</button>
</div>
</form>
<h3 class="text-2xl font-semibold text-gray-800 mt-12 mb-6">My Uploaded Courses</h3>
<div id="uploadedCoursesContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Uploaded courses will be dynamically loaded here -->
</div>
<p id="noUploadedCoursesMessage" class="text-center text-gray-600 text-lg mt-8 hidden">You haven't uploaded any courses yet.</p>
</div>
</section>
<!-- About Us Section -->
<section id="aboutUsSection" class="container mx-auto p-8 hidden">
<div class="bg-white rounded-xl shadow-lg p-8">
<h2 class="text-4xl font-bold text-gray-800 mb-8 text-center">About SkillUp Academy</h2>
<div class="mb-10 text-center">
<p class="text-lg text-gray-700 leading-relaxed mb-4">
SkillUp Academy is a dedicated team of educators and industry professionals committed to providing high-quality, accessible online education.
Our platform offers a diverse range of courses, from cutting-edge technology like AI and Blockchain to essential professional skills like Project Management and Public Speaking.
We cater to a global audience, including students, aspiring professionals, and seasoned experts looking to upskill or reskill.
</p>
<p class="text-xl font-semibold text-blue-700">
Our Mission: To empower individuals worldwide with the knowledge and skills needed to thrive in the digital age.
</p>
</div>
<div class="mb-10">
<h3 class="text-3xl font-bold text-gray-800 mb-6 text-center">Why We Started</h3>
<p class="text-lg text-gray-700 leading-relaxed mb-4">
We believe that quality education should not be limited by geographical boundaries or financial constraints.
SkillUp Academy was founded with the vision of democratizing learning, making expert-led courses available to anyone, anywhere.
Our long-term goal is to continuously expand our course offerings, integrate innovative learning methodologies, and foster a vibrant global community of lifelong learners.
</p>
</div>
<div class="mb-10">
<h3 class="text-3xl font-bold text-gray-800 mb-6 text-center">Our Achievements</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
<div class="bg-blue-50 p-6 rounded-lg shadow-md">
<i class="fas fa-users text-4xl text-blue-600 mb-3"></i>
<p class="text-3xl font-bold text-gray-900">50,000+</p>
<p class="text-gray-600">Students Enrolled</p>
</div>
<div class="bg-blue-50 p-6 rounded-lg shadow-md">
<i class="fas fa-book-open text-4xl text-blue-600 mb-3"></i>
<p class="text-3xl font-bold text-gray-900">200+</p>
<p class="text-gray-600">Courses Available</p>
</div>
<div class="bg-blue-50 p-6 rounded-lg shadow-md">
<i class="fas fa-globe text-4xl text-blue-600 mb-3"></i>
<p class="text-3xl font-bold text-gray-900">100+</p>
<p class="text-gray-600">Countries Served</p>
</div>
</div>
</div>
<div class="text-center mt-12">
<h3 class="text-3xl font-bold text-gray-800 mb-6">Ready to Start Your Learning Journey?</h3>
<button onclick="showSection('coursesSection')" class="bg-blue-600 text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-blue-700 transition duration-300 transform hover:scale-105 shadow-lg">
Browse All Courses <i class="fas fa-graduation-cap ml-2"></i>
</button>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contactSection" class="container mx-auto p-8 hidden">
<div class="bg-white rounded-xl shadow-lg p-8">
<h2 class="text-4xl font-bold text-gray-800 mb-8 text-center">Get in Touch with Us</h2>
<p class="text-lg text-gray-700 leading-relaxed mb-8 text-center">
We'd love to hear from you! Whether you have questions about our courses, need technical support,
or want to explore partnership opportunities, our team is here to help.
Feel free to reach out with any inquiries you may have.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="text-2xl font-semibold text-gray-800 mb-4">Send Us a Message</h3>
<form class="space-y-4">
<div>
<label for="contactName" class="block text-gray-700 text-sm font-bold mb-2">Name</label>
<input type="text" id="contactName" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your Name">
</div>
<div>
<label for="contactEmail" class="block text-gray-700 text-sm font-bold mb-2">Email</label>
<input type="email" id="contactEmail" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="your.email@example.com">
</div>
<div>
<label for="contactSubject" class="block text-gray-700 text-sm font-bold mb-2">Subject</label>
<input type="text" id="contactSubject" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Regarding a course, support, etc.">
</div>
<div>
<label for="contactMessage" class="block text-gray-700 text-sm font-bold mb-2">Message</label>
<textarea id="contactMessage" rows="5" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your message..."></textarea>
</div>
<button type="submit" class="bg-blue-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-blue-700 transition duration-300 transform hover:scale-105">
Send Message <i class="fas fa-paper-plane ml-2"></i>
</button>
</form>
</div>
<div>
<h3 class="text-2xl font-semibold text-gray-800 mb-4">Direct Contact</h3>
<p class="text-gray-700 mb-2"><i class="fas fa-envelope mr-2 text-blue-600"></i> Email: <a href="mailto:support@skillupacademy.com" class="text-blue-600 hover:underline">support@skillupacademy.com</a></p>
<p class="text-700 mb-4"><i class="fab fa-whatsapp mr-2 text-green-500"></i> WhatsApp/Helpline: <a href="tel:+919876543210" class="text-blue-600 hover:underline">+91 98765 43210</a> (Mon-Fri, 9 AM - 5 PM IST)</p>
<h3 class="text-2xl font-semibold text-gray-800 mb-4">Connect with Us</h3>
<div class="flex space-x-4">
<a href="https://www.instagram.com/skillupacademy" target="_blank" class="text-gray-600 hover:text-pink-600 transition duration-300 text-3xl"><i class="fab fa-instagram"></i></a>
<a href="https://www.linkedin.com/company/skillupacademy" target="_blank" class="text-gray-600 hover:text-blue-700 transition duration-300 text-3xl"><i class="fab fa-linkedin"></i></a>
<a href="https://twitter.com/skillupacademy" target="_blank" class="text-gray-600 hover:text-blue-400 transition duration-300 text-3xl"><i class="fab fa-twitter"></i></a>
<a href="https://www.facebook.com/skillupacademy" target="_blank" class="text-gray-600 hover:text-blue-800 transition duration-300 text-3xl"><i class="fab fa-facebook"></i></a>
</div>
<h3 class="text-2xl font-semibold text-gray-800 mt-8 mb-4">Our Office</h3>
<p class="text-gray-700">
SkillUp Academy Headquarters<br>
123, Knowledge Lane,<br>
Tech City, Delhi - 110001,<br>
India
</p>
</div>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white p-6 mt-8 rounded-t-lg shadow-inner">
<div class="container mx-auto text-center">
<p>© 2025 SkillUp Academy. All rights reserved.</p>
<div class="flex justify-center space-x-4 mt-2">
<a href="#" class="hover:text-gray-400 transition duration-300">Privacy Policy</a>
<a href="#" class="hover:text-gray-400 transition duration-300">Terms of Service</a>
</div>
</div>
</footer>
<!-- Shopping Cart Modal -->
<div id="cartModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50">
<div class="bg-white p-8 rounded-xl shadow-xl max-w-lg w-full relative">
<button onclick="closeCartModal()" class="absolute top-4 right-4 text-gray-500 hover:text-gray-800 text-2xl">
×
</button>
<h3 class="text-3xl font-bold text-gray-800 mb-6 text-center">Your Shopping Cart</h3>
<div id="cartItemsContainer" class="max-h-80 overflow-y-auto mb-6 border-b border-gray-200 pb-4">
<!-- Cart items will be loaded here -->
</div>
<div class="flex justify-between items-center text-2xl font-bold text-gray-900 mb-6">
<span>Total:</span>
<span id="cartTotal">₹ 0</span>
</div>
<button onclick="checkout()"
class="w-full bg-green-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-green-700 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
Proceed to Checkout
</button>
</div>
</div>
<!-- Payment Options Modal -->
<div id="paymentModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50">
<div class="bg-white p-8 rounded-xl shadow-xl max-w-sm w-full relative">
<button onclick="closePaymentModal()" class="absolute top-4 right-4 text-gray-500 hover:text-gray-800 text-2xl">
×
</button>
<h3 class="text-2xl font-bold text-gray-800 mb-6 text-center">Select Payment Method</h3>
<div class="space-y-4">
<button onclick="simulatePayment('UPI')" class="w-full bg-indigo-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-indigo-700 transition duration-300 transform hover:scale-105">
<i class="fas fa-qrcode mr-2"></i> Pay with UPI
</button>
<button onclick="simulatePayment('Card')" class="w-full bg-red-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-red-700 transition duration-300 transform hover:scale-105">
<i class="fas fa-credit-card mr-2"></i> Pay with Card
</button>
</div>
</div>
</div>
<!-- Authentication Modal (Login/Signup) -->
<div id="authModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50">
<div class="bg-white p-8 rounded-xl shadow-xl max-w-md w-full relative">
<button onclick="closeAuthModal()" class="absolute top-4 right-4 text-gray-500 hover:text-gray-800 text-2xl">
×
</button>
<div class="flex justify-center mb-6">
<button id="loginTab" onclick="showAuthForm('login')" class="px-6 py-2 rounded-l-lg font-semibold text-lg transition duration-300 bg-blue-600 text-white">Login</button>
<button id="signupTab" onclick="showAuthForm('signup')" class="px-6 py-2 rounded-r-lg font-semibold text-lg transition duration-300 text-gray-700 bg-gray-200 hover:bg-gray-300">Sign Up</button>
</div>
<!-- Login Form -->
<form id="loginForm" class="space-y-6">
<h3 class="text-2xl font-bold text-gray-800 text-center">Welcome Back!</h3>
<div>
<label for="loginEmail" class="block text-gray-700 text-sm font-bold mb-2">Email or Phone Number</label>
<input type="text" id="loginEmail" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="your.email@example.com or +91-XXXXXXXXXX">
</div>
<div class="relative">
<label for="loginPassword" class="block text-gray-700 text-sm font-bold mb-2">Password</label>
<input type="password" id="loginPassword" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline pr-10" placeholder="********">
<button type="button" onclick="togglePasswordVisibility('loginPassword')" class="absolute inset-y-0 right-0 pr-3 flex items-center pt-8 text-gray-500">
<i id="loginPasswordToggle" class="fas fa-eye"></i>
</button>
</div>
<button type="button" onclick="handleLogin()" class="w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-blue-700 transition duration-300 transform hover:scale-105">
Login
</button>
<p class="text-center text-sm text-gray-600">Don't have an account? <a href="#" onclick="showAuthForm('signup')" class="text-blue-600 hover:underline">Sign Up</a></p>
</form>
<!-- Sign Up Form -->
<form id="signupForm" class="space-y-6 hidden">
<h3 class="text-2xl font-bold text-gray-800 text-center">Create Your Account</h3>
<div>
<label for="signupEmail" class="block text-gray-700 text-sm font-bold mb-2">Email or Phone Number</label>
<input type="text" id="signupEmail" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="your.email@example.com or +91-XXXXXXXXXX">
</div>
<div class="relative">
<label for="signupPassword" class="block text-gray-700 text-sm font-bold mb-2">Password</label>
<input type="password" id="signupPassword" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline pr-10" placeholder="********">
<button type="button" onclick="togglePasswordVisibility('signupPassword')" class="absolute inset-y-0 right-0 pr-3 flex items-center pt-8 text-gray-500">
<i id="signupPasswordToggle" class="fas fa-eye"></i>
</button>
</div>
<button type="button" onclick="handleSignup()" class="w-full bg-purple-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-purple-700 transition duration-300 transform hover:scale-105">
Sign Up
</button>
<p class="text-center text-sm text-gray-600">Already have an account? <a href="#" onclick="showAuthForm('login')" class="text-blue-600 hover:underline">Login</a></p>
</form>
</div>
</div>
<!-- Confirmation/Info Modal -->
<div id="infoModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50">
<div class="bg-white p-8 rounded-xl shadow-xl max-w-sm w-full text-center">
<h3 class="text-2xl font-bold text-gray-800 mb-4" id="infoModalTitle"></h3>
<p class="text-gray-700 mb-6" id="infoModalMessage"></p>
<button onclick="closeInfoModal()" class="bg-blue-600 text-white py-2 px-6 rounded-lg font-semibold hover:bg-blue-700 transition duration-300">
OK
</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
CSS Code
body {
font-family: 'Inter', sans-serif;
background-color: #f0f2f5; /* Light gray background */
}
/* Custom scrollbar for cart modal */
#cartItemsContainer::-webkit-scrollbar,
#courseSyllabus::-webkit-scrollbar {
width: 8px;
}
#cartItemsContainer::-webkit-scrollbar-track,
#courseSyllabus::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
#cartItemsContainer::-webkit-scrollbar-thumb,
#courseSyllabus::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
#cartItemsContainer::-webkit-scrollbar-thumb:hover,
#courseSyllabus::-webkit-scrollbar-thumb:hover {
background: #555;
}
JavaScript Code
<script>
// Array to store course data
const courses = [
{
id: 1,
title: "Complete Web Development Bootcamp",
description: "Master HTML, CSS, JavaScript, React, Node.js, and MongoDB to build full-stack web applications. This comprehensive bootcamp covers front-end and back-end development, database management, and deployment strategies. You'll work on real-world projects and build a strong portfolio.",
price: 9999,
originalPrice: 14999,
image: "https://placehold.co/600x400/ADD8E6/000000?text=Web+Dev",
rating: 4.8,
reviewsCount: 1250,
instructor: {
name: "Dr. Anya Sharma",
title: "Lead Software Engineer, Google",
bio: "Dr. Anya Sharma is a seasoned software engineer with over 15 years of experience in full-stack development. She holds a Ph.D. in Computer Science and is passionate about teaching the next generation of developers. Her expertise includes scalable web architectures and cloud-native applications.",
image: "https://placehold.co/100x100/A0D9D9/000000?text=Anya"
},
syllabus: [
"Module 1: HTML5 & CSS3 Essentials",
"Module 2: Advanced CSS (Flexbox, Grid, Responsiveness)",
"Module 3: JavaScript Fundamentals",
"Module 4: DOM Manipulation & Events",
"Module 5: Asynchronous JavaScript (Promises, Async/Await)",
"Module 6: React.js Basics & Components",
"Module 7: React Hooks & Context API",
"Module 8: Node.js & Express.js",
"Module 9: MongoDB & Mongoose",
"Module 10: RESTful APIs & Authentication",
"Module 11: Deployment (Heroku, Netlify)",
"Module 12: Capstone Project"
],
studentReviews: [
{ name: "Rahul K.", rating: 5, comment: "Amazing course! Covered everything I needed to know to start my web development journey." },
{ name: "Sneha P.", rating: 4, comment: "Great content, but some parts felt a bit rushed. Overall, highly recommended." },
{ name: "Amit S.", rating: 5, comment: "The instructor's explanations were crystal clear. Best investment I've made!" }
]
},
{
id: 2,
title: "Data Science Masterclass with Python",
description: "Learn data analysis, machine learning, and data visualization using Python and popular libraries like Pandas, NumPy, Scikit-learn, and Matplotlib. This course is designed for aspiring data scientists and analysts.",
price: 12499,
originalPrice: 18999,
image: "https://placehold.co/600x400/90EE90/000000?text=Data+Science",
rating: 4.7,
reviewsCount: 980,
instructor: {
name: "Prof. Vikram Rao",
title: "Lead Data Scientist, Tech Solutions",
bio: "Prof. Vikram Rao is a distinguished data scientist with a passion for teaching. He has over 10 years of experience in building predictive models and analyzing large datasets across various industries. His research focuses on AI ethics and explainable AI.",
image: "https://placehold.co/100x100/D9A0A0/000000?text=Vikram"
},
syllabus: [
"Module 1: Python for Data Science",
"Module 2: NumPy & Pandas for Data Manipulation",
"Module 3: Data Cleaning & Preprocessing",
"Module 4: Exploratory Data Analysis (EDA)",
"Module 5: Data Visualization with Matplotlib & Seaborn",
"Module 6: Introduction to Machine Learning",
"Module 7: Supervised Learning (Regression, Classification)",
"Module 8: Unsupervised Learning (Clustering)",
"Module 9: Model Evaluation & Hyperparameter Tuning",
"Module 10: Introduction to Deep Learning",
"Module 11: Case Studies & Projects"
],
studentReviews: [
{ name: "Divya M.", rating: 5, comment: "Excellent course for anyone serious about Data Science. The practical exercises were very helpful." },
{ name: "Arjun L.", rating: 4, comment: "Good content, but I wish there were more advanced topics covered." }
]
},
{
id: 3,
title: "Advanced Digital Marketing Strategy",
description: "Unlock the secrets of online success! This course teaches you cutting-edge SEO, SEM, social media marketing, content marketing, and email marketing strategies to drive traffic, generate leads, and boost sales. Learn to craft compelling campaigns that convert.",
price: 7500,
originalPrice: 10000,
image: "https://placehold.co/600x400/FFD700/000000?text=Digital+Marketing",
rating: 4.9,
reviewsCount: 1500,
instructor: {
name: "Ms. Zara Khan",
title: "Chief Marketing Officer, Global Brands",
bio: "Ms. Zara Khan is a renowned digital marketing strategist with over 12 years of experience leading successful campaigns for Fortune 500 companies. She specializes in performance marketing, brand building, and leveraging data for strategic decisions.",
image: "https://placehold.co/100x100/D9D9A0/000000?text=Zara"
},
syllabus: [
"Module 1: Digital Marketing Landscape & Strategy",
"Module 2: Advanced Search Engine Optimization (SEO)",
"Module 3: Search Engine Marketing (SEM) & PPC",
"Module 4: Social Media Marketing (Organic & Paid)",
"Module 5: Content Marketing & Storytelling",
"Module 6: Email Marketing Automation",
"Module 7: Analytics & ROI Measurement",
"Module 8: Influencer Marketing & Partnerships",
"Module 9: Conversion Rate Optimization (CRO)",
"Module 10: Building a Digital Marketing Plan"
],
studentReviews: [
{ name: "Priya R.", rating: 5, comment: "Absolutely fantastic! My marketing skills have improved dramatically after taking this course." },
{ name: "Sameer G.", rating: 5, comment: "Zara's insights are invaluable. Highly practical and actionable advice." }
]
},
{
id: 4,
title: "UI/UX Design Fundamentals",
description: "Learn user research, wireframing, prototyping, and usability testing for intuitive and engaging user experiences. This course covers the entire design process from concept to high-fidelity mockups.",
price: 8250,
originalPrice: 11500,
image: "https://placehold.co/600x400/FFB6C1/000000?text=UI/UX+Design",
rating: 4.6,
reviewsCount: 700,
instructor: {
name: "Mr. Rohan Gupta",
title: "Senior Product Designer, InnovateX",
bio: "Mr. Rohan Gupta is a passionate UI/UX designer with 8 years of experience creating user-centered digital products. He believes in the power of design to solve complex problems and improve lives.",
image: "https://placehold.co/100x100/A0A0D9/000000?text=Rohan"
},
syllabus: [
"Module 1: Introduction to UI/UX",
"Module 2: User Research & Persona Creation",
"Module 3: Information Architecture & User Flows",
"Module 4: Wireframing & Low-Fidelity Prototyping",
"Module 5: Visual Design Principles",
"Module 6: High-Fidelity Prototyping (Figma/Sketch)",
"Module 7: Usability Testing & Iteration",
"Module 8: Design Systems",
"Module 9: Accessibility in Design",
"Module 10: Portfolio Building"
],
studentReviews: [
{ name: "Ishita D.", rating: 5, comment: "Comprehensive and well-structured. Rohan is an excellent teacher." },
{ name: "Kabir M.", rating: 4, comment: "Learned a lot! The practical assignments were very helpful." }
]
},
{
id: 5,
title: "React Native Mobile App Development",
description: "Build cross-platform mobile applications for iOS and Android using React Native. This course covers everything from setting up your development environment to deploying your app to app stores.",
price: 11000,
originalPrice: 16000,
image: "https://placehold.co/600x400/B0E0E6/000000?text=Mobile+Dev",
rating: 4.7,
reviewsCount: 850,
instructor: {
name: "Ms. Lena Das",
title: "Mobile Lead, AppGenius",
bio: "Ms. Lena Das is a mobile development expert with over a decade of experience in building robust and performant mobile applications. She has a deep understanding of both native and cross-platform frameworks.",
image: "https://placehold.co/100x100/D9A0D9/000000?text=Lena"
},
syllabus: [
"Module 1: Introduction to React Native & Expo",
"Module 2: React Native Components & Styling",
"Module 3: Navigation in React Native",
"Module 4: State Management (Context API, Redux)",
"Module 5: Working with APIs & Data Fetching",
"Module 6: User Authentication",
"Module 7: Device Features (Camera, Geolocation)",
"Module 8: Push Notifications",
"Module 9: Testing & Debugging",
"Module 10: App Deployment (iOS & Android)"
],
studentReviews: [
{ name: "Vijay C.", rating: 5, comment: "Fantastic course! I built my first app by the end of it." },
{ name: "Nisha S.", rating: 4, comment: "Lena explains complex topics very clearly. Highly recommend for mobile dev." }
]
},
{
id: 6,
title: "Introduction to Cybersecurity",
description: "Understand network security, cryptography, ethical hacking, and common cyber threats. This course provides a foundational understanding of cybersecurity principles and practices.",
price: 6000,
originalPrice: 8500,
image: "https://placehold.co/600x400/DDA0DD/000000?text=Cybersecurity",
rating: 4.5,
reviewsCount: 600,
instructor: {
name: "Mr. Rajeev Kumar",
title: "Cybersecurity Consultant, SecureNet",
bio: "Mr. Rajeev Kumar is a certified cybersecurity professional with extensive experience in penetration testing, incident response, and security auditing. He is dedicated to educating individuals on protecting digital assets.",
image: "https://placehold.co/100x100/A0D9D9/000000?text=Rajeev"
},
syllabus: [
"Module 1: Fundamentals of Cybersecurity",
"Module 2: Network Security Principles",
"Module 3: Cryptography Basics",
"Module 4: Common Cyber Attacks & Defenses",
"Module 5: Web Application Security",
"Module 6: Ethical Hacking & Penetration Testing",
"Module 7: Incident Response & Disaster Recovery",
"Module 8: Data Privacy & Compliance",
"Module 9: Cloud Security Fundamentals",
"Module 10: Career Paths in Cybersecurity"
],
studentReviews: [
{ name: "Deepak V.", rating: 5, comment: "A great starting point for cybersecurity. Very informative!" },
{ name: "Anjali K.", rating: 4, comment: "Learned a lot of practical tips. Rajeev is very knowledgeable." }
]
},
{
id: 7,
title: "Cloud Computing with AWS",
description: "Learn to deploy, manage, and scale applications on Amazon Web Services (AWS). This course covers core AWS services like EC2, S3, RDS, Lambda, and VPC.",
price: 13500,
originalPrice: 19000,
image: "https://placehold.co/600x400/C0C0C0/000000?text=AWS+Cloud",
rating: 4.8,
reviewsCount: 1100,
instructor: {
name: "Dr. Sanjay Verma",
title: "Cloud Architect, Global Tech",
bio: "Dr. Sanjay Verma is a certified AWS Solutions Architect with over 15 years of experience in designing and implementing scalable cloud solutions. He is a frequent speaker at cloud conferences.",
image: "https://placehold.co/100x100/D9D9D9/000000?text=Sanjay"
},
syllabus: [
"Module 1: Introduction to Cloud Computing & AWS",
"Module 2: AWS Global Infrastructure",
"Module 3: Compute Services (EC2, Lambda)",
"Module 4: Storage Services (S3, EBS, EFS)",
"Module 5: Networking (VPC, Route 53)",
"Module 6: Databases (RDS, DynamoDB)",
"Module 7: Security & Identity (IAM)",
"Module 8: Monitoring (CloudWatch)",
"Module 9: Serverless Architectures",
"Module 10: AWS Cost Management & Best Practices"
],
studentReviews: [
{ name: "Prakash T.", rating: 5, comment: "Very detailed and practical. Helped me pass my AWS certification." },
{ name: "Meena B.", rating: 4, comment: "Sanjay's explanations are clear and concise. A must for cloud enthusiasts." }
]
},
{
id: 8,
title: "Game Development with Unity 3D",
description: "Create immersive 2D and 3D games using the Unity engine and C# scripting. Learn game mechanics, physics, animation, and user interface design.",
price: 10500,
originalPrice: 15000,
image: "https://placehold.co/600x400/FFC0CB/000000?text=Unity+Game",
rating: 4.6,
reviewsCount: 750,
instructor: {
name: "Ms. Kiara Reddy",
title: "Game Designer, PixelPlay Studios",
bio: "Ms. Kiara Reddy is an award-winning game designer and developer with a passion for creating engaging and innovative gaming experiences. She has worked on several successful indie and AAA titles.",
image: "https://placehold.co/100x100/A0D9D9/000000?text=Kiara"
},
syllabus: [
"Module 1: Introduction to Unity & C#",
"Module 2: Game Objects & Components",
"Module 3: Scripting in C#",
"Module 4: Physics & Collisions",
"Module 5: Input & Player Control",
"Module 6: UI Design & HUD",
"Module 7: Animation & Mecanim",
"Module 8: Audio Integration",
"Module 9: Level Design & Scene Management",
"Module 10: Game Deployment & Optimization"
],
studentReviews: [
{ name: "Ravi N.", rating: 5, comment: "Fantastic course for budding game developers. Kiara makes it fun and easy to understand." },
{ name: "Simran J.", rating: 4, comment: "Good introduction to Unity, but could use more advanced project examples." }
]
},
{
id: 9,
title: "Artificial Intelligence & Machine Learning",
description: "Dive deep into AI and ML concepts, algorithms, and applications. Cover supervised, unsupervised learning, deep learning, and natural language processing.",
price: 18000,
originalPrice: 25000,
image: "https://placehold.co/600x400/FFDAB9/000000?text=AI+ML",
rating: 4.9,
reviewsCount: 1800,
instructor: {
name: "Dr. Alok Nath",
title: "AI Research Scientist, Innovate AI",
bio: "Dr. Alok Nath holds a Ph.D. in AI and has published numerous papers in leading journals. His expertise lies in developing cutting-edge AI solutions for real-world problems.",
image: "https://placehold.co/100x100/D3D3D3/000000?text=Alok"
},
syllabus: [
"Module 1: Introduction to AI & ML",
"Module 2: Supervised Learning Algorithms",
"Module 3: Unsupervised Learning & Clustering",
"Module 4: Deep Learning with TensorFlow/PyTorch",
"Module 5: Convolutional Neural Networks (CNNs)",
"Module 6: Recurrent Neural Networks (RNNs) & NLP",
"Module 7: Reinforcement Learning",
"Module 8: Model Deployment & MLOps"
],
studentReviews: [
{ name: "Meera K.", rating: 5, comment: "The AI course is truly exceptional. Dr. Nath's knowledge is profound." },
{ name: "Siddharth V.", rating: 5, comment: "Challenging but incredibly rewarding. Highly recommend for serious learners." }
]
},
{
id: 10,
title: "Blockchain Development & Cryptocurrencies",
description: "Understand the fundamentals of blockchain technology, smart contracts, and decentralized applications (DApps) using Ethereum and Solidity.",
price: 16000,
originalPrice: 22000,
image: "https://placehold.co/600x400/ADD8E6/000000?text=Blockchain",
rating: 4.7,
reviewsCount: 900,
instructor: {
name: "Mr. Arjun Singh",
title: "Blockchain Architect, CryptoSolutions",
bio: "Mr. Arjun Singh is a leading expert in blockchain technology with a focus on enterprise solutions and decentralized finance (DeFi).",
image: "https://placehold.co/100x100/C0C0C0/000000?text=Arjun"
},
syllabus: [
"Module 1: Introduction to Blockchain",
"Module 2: Cryptography & Hashing",
"Module 3: Ethereum & Smart Contracts",
"Module 4: Solidity Programming",
"Module 5: Building DApps with Web3.js",
"Module 6: Token Standards (ERC-20, ERC-721)",
"Module 7: Decentralized Finance (DeFi) Basics",
"Module 8: Blockchain Security"
],
studentReviews: [
{ name: "Pooja D.", rating: 5, comment: "Fascinating course! Demystified blockchain for me." },
{ name: "Karan S.", rating: 4, comment: "Good overview, but more advanced coding examples would be beneficial." }
]
},
{
id: 11,
title: "Project Management Professional (PMP) Prep",
description: "Prepare for the PMP certification exam with this comprehensive course covering all knowledge areas and process groups of the PMBOK Guide.",
price: 14000,
originalPrice: 20000,
image: "https://placehold.co/600x400/90EE90/000000?text=PMP+Prep",
rating: 4.8,
reviewsCount: 1100,
instructor: {
name: "Ms. Smita Rao",
title: "Certified PMP Trainer",
bio: "Ms. Smita Rao is a highly experienced project manager and certified PMP trainer with a proven track record of helping students ace their exams.",
image: "https://placehold.co/100x100/D9A0A0/000000?text=Smita"
},
syllabus: [
"Module 1: Introduction to Project Management",
"Module 2: Project Environment & Role of Project Manager",
"Module 3: Integration Management",
"Module 4: Scope Management",
"Module 5: Schedule Management",
"Module 6: Cost Management",
"Module 7: Quality Management",
"Module 8: Resource Management",
"Module 9: Communications Management",
"Module 10: Risk Management",
"Module 11: Procurement Management",
"Module 12: Stakeholder Management"
],
studentReviews: [
{ name: "Gaurav B.", rating: 5, comment: "Smita's teaching style is excellent. I feel much more confident for the PMP exam." },
{ name: "Ritika P.", rating: 5, comment: "Very well-structured and covers all the necessary topics in depth." }
]
},
{
id: 12,
title: "Financial Modeling & Valuation Analyst",
description: "Master financial modeling techniques, valuation methods, and financial analysis for corporate finance and investment banking roles.",
price: 15500,
originalPrice: 21000,
image: "https://placehold.co/600x400/FFD700/000000?text=Financial+Mod",
rating: 4.7,
reviewsCount: 780,
instructor: {
name: "Mr. Vivek Sharma",
title: "Investment Banker, Global Finance",
bio: "Mr. Vivek Sharma is an experienced investment banker with a strong background in financial analysis, valuation, and corporate strategy.",
image: "https://placehold.co/100x100/A0A0D9/000000?text=Vivek"
},
syllabus: [
"Module 1: Excel Crash Course for Finance",
"Module 2: Accounting Fundamentals",
"Module 3: Financial Statement Analysis",
"Module 4: Forecasting & Budgeting",
"Module 5: Discounted Cash Flow (DCF) Valuation",
"Module 6: Comparable Company Analysis (Comps)",
"Module 7: Precedent Transaction Analysis",
"Module 8: Merger & Acquisition (M&A) Modeling"
],
studentReviews: [
{ name: "Ankit R.", rating: 5, comment: "Incredibly practical and detailed. Vivek's real-world examples were invaluable." },
{ name: "Shruti G.", rating: 4, comment: "A bit challenging, but the content is top-notch for finance professionals." }
]
},
{
id: 13,
title: "Professional Content Writing & SEO",
description: "Learn to write compelling, SEO-friendly content for websites, blogs, and marketing materials. Master content strategy and audience engagement.",
price: 6500,
originalPrice: 9000,
image: "https://placehold.co/600x400/FFB6C1/000000?text=Content+Writing",
rating: 4.6,
reviewsCount: 950,
instructor: {
name: "Ms. Tanya Kapoor",
title: "Content Strategist, Digital Hub",
bio: "Ms. Tanya Kapoor is a seasoned content strategist and writer with over a decade of experience crafting engaging narratives for various industries.",
image: "https://placehold.co/100x100/D9A0D9/000000?text=Tanya"
},
syllabus: [
"Module 1: Basics of Content Writing",
"Module 2: Understanding Your Audience",
"Module 3: SEO for Content Writers",
"Module 4: Blog Post Writing",
"Module 5: Website Content & Copywriting",
"Module 6: Social Media Content",
"Module 7: Email Marketing Content",
"Module 8: Content Strategy & Planning"
],
studentReviews: [
{ name: "Varun D.", rating: 5, comment: "Transformed my writing skills! Highly practical and easy to follow." },
{ name: "Priyanka S.", rating: 4, comment: "Great tips for SEO writing. Tanya is very clear." }
]
},
{
id: 14,
title: "Public Speaking & Presentation Skills",
description: "Develop confidence and master the art of public speaking, effective presentations, and persuasive communication for any audience.",
price: 5000,
originalPrice: 7500,
image: "https://placehold.co/600x400/B0E0E6/000000?text=Public+Speaking",
rating: 4.9,
reviewsCount: 1300,
instructor: {
name: "Mr. Sameer Malik",
title: "Communication Coach, SpeakUp",
bio: "Mr. Sameer Malik is a renowned communication coach who has trained executives and professionals across various sectors to become impactful speakers.",
image: "https://placehold.co/100x100/A0D9D9/000000?text=Sameer"
},
syllabus: [
"Module 1: Overcoming Stage Fright",
"Module 2: Structuring Your Speech",
"Module 3: Voice Modulation & Body Language",
"Module 4: Engaging Your Audience",
"Module 5: Crafting Compelling Stories",
"Module 6: Designing Effective Visual Aids",
"Module 7: Handling Q&A Sessions",
"Module 8: Impromptu Speaking"
],
studentReviews: [
{ name: "Ishaan G.", rating: 5, comment: "Sameer's coaching is transformative! I feel so much more confident now." },
{ name: "Nandini R.", rating: 5, comment: "Practical exercises and excellent feedback. Highly recommended for anyone." }
]
},
{
id: 15,
title: "Advanced Excel for Business Analytics",
description: "Go beyond basics. Master advanced Excel functions, pivot tables, data visualization, and analytical techniques for business insights.",
price: 7000,
originalPrice: 9500,
image: "https://placehold.co/600x400/DDA0DD/000000?text=Advanced+Excel",
rating: 4.7,
reviewsCount: 1000,
instructor: {
name: "Ms. Divya Patel",
title: "Data Analyst, Corporate Solutions",
bio: "Ms. Divya Patel is an expert data analyst with a deep understanding of Excel's capabilities for complex data manipulation and reporting.",
image: "https://placehold.co/100x100/D9D9D9/000000?text=Divya"
},
syllabus: [
"Module 1: Advanced Formulas & Functions",
"Module 2: Data Validation & Conditional Formatting",
"Module 3: Pivot Tables & Pivot Charts",
"Module 4: What-If Analysis (Goal Seek, Scenario Manager)",
"Module 5: Data Tools (Text to Columns, Remove Duplicates)",
"Module 6: Introduction to Macros & VBA",
"Module 7: Dashboard Design Principles",
"Module 8: Power Query & Power Pivot Basics"
],
studentReviews: [
{ name: "Rohit S.", rating: 5, comment: "This course took my Excel skills to the next level. Highly practical." },
{ name: "Preeti L.", rating: 4, comment: "Very comprehensive. Divya explains complex concepts clearly." }
]
}
];
let cart = []; // Array to store items in the shopping cart
let enrolledCourses = []; // Array to simulate enrolled courses
// Function to show a specific section and hide others
function showSection(sectionId) {
const sections = ['homeSection', 'coursesSection', 'courseDetailPage', 'userDashboard', 'instructorDashboard', 'aboutUsSection', 'contactSection'];
sections.forEach(id => {
document.getElementById(id).classList.add('hidden');
});
document.getElementById(sectionId).classList.remove('hidden');
// Re-render courses if navigating to home or all courses section
if (sectionId === 'homeSection') {
filterCourses('home');
} else if (sectionId === 'coursesSection') {
filterCourses('all');
} else if (sectionId === 'userDashboard') {
renderEnrolledCourses();
} else if (sectionId === 'instructorDashboard') {
renderUploadedCourses();
}
// No specific rendering needed for About Us or Contact as they are static HTML for now
}
// Function to render courses based on search and filter criteria for a specific container
function renderCourses(filteredCourses, containerId, noMessageId) {
const coursesContainer = document.getElementById(containerId);
const noCoursesMessage = document.getElementById(noMessageId);
coursesContainer.innerHTML = ''; // Clear existing courses
if (filteredCourses.length === 0) {
noCoursesMessage.classList.remove('hidden');
return;
} else {
noCoursesMessage.classList.add('hidden');
}
filteredCourses.forEach(course => {
const courseCard = `
<div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden cursor-pointer" onclick="showCourseDetail(${course.id})">
<img src="${course.image}" alt="${course.title}" class="w-full h-48 object-cover rounded-t-xl">
<div class="p-6">
<h3 class="text-2xl font-semibold text-gray-900 mb-2">${course.title}</h3>
<p class="text-gray-600 text-sm mb-4">${course.description.substring(0, 100)}...</p>
<div class="flex justify-between items-center mb-4">
<span class="text-3xl font-bold text-green-700">₹ ${course.price.toLocaleString('en-IN')}</span>
${course.originalPrice ? `<span class="text-sm text-gray-500 line-through">₹ ${course.originalPrice.toLocaleString('en-IN')}</span>` : ''}
</div>
<button onclick="event.stopPropagation(); addToCart(${course.id})"
class="w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-blue-700 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
Add to Cart
</button>
</div>
</div>
`;
coursesContainer.innerHTML += courseCard;
});
}
// Function to filter courses based on search input and price filter
function filterCourses(section) {
const searchTerm = document.getElementById(`${section}CourseSearch`).value.toLowerCase();
const priceRange = document.getElementById(`${section}PriceFilter`).value;
const containerId = `${section}CoursesContainer`;
const noMessageId = `${section}NoCoursesMessage`;
let filtered = courses.filter(course => {
const matchesSearch = course.title.toLowerCase().includes(searchTerm) ||
course.description.toLowerCase().includes(searchTerm);
let matchesPrice = true;
if (priceRange !== 'all') {
const [min, max] = priceRange.split('-').map(val => parseInt(val));
if (priceRange === '15001-above') {
matchesPrice = course.price >= 15001;
} else {
matchesPrice = course.price >= min && course.price <= max;
}
}
return matchesSearch && matchesPrice;
});
renderCourses(filtered, containerId, noMessageId);
}
// Function to display course detail page
function showCourseDetail(courseId) {
const course = courses.find(c => c.id === courseId);
if (!course) {
showInfoModal('Error', 'Course not found.');
return;
}
document.getElementById('detailCourseImage').src = course.image;
document.getElementById('detailCourseTitle').textContent = course.title;
document.getElementById('detailCourseRating').innerHTML = generateStarRating(course.rating);
document.getElementById('detailCourseReviews').textContent = `(${course.reviewsCount} reviews)`;
document.getElementById('detailCourseDescription').textContent = course.description;
document.getElementById('detailCoursePrice').textContent = `₹ ${course.price.toLocaleString('en-IN')}`;
document.getElementById('detailCourseOriginalPrice').textContent = course.originalPrice ? `₹ ${course.originalPrice.toLocaleString('en-IN')}` : '';
document.getElementById('enrollNowButton').onclick = () => addToCart(course.id);
// Instructor Bio
document.getElementById('instructorImage').src = course.instructor.image;
document.getElementById('instructorName').textContent = course.instructor.name;
document.getElementById('instructorTitle').textContent = course.instructor.title;
document.getElementById('instructorBio').textContent = course.instructor.bio;
// Syllabus
const syllabusContainer = document.getElementById('courseSyllabus');
syllabusContainer.innerHTML = '';
course.syllabus.forEach((item, index) => {
syllabusContainer.innerHTML += `<p class="mb-2"><strong class="text-blue-700">Module ${index + 1}:</strong> ${item}</p>`;
});
// Reviews
const reviewsList = document.getElementById('detailCourseReviewsList');
reviewsList.innerHTML = '';
if (course.studentReviews && course.studentReviews.length > 0) {
course.studentReviews.forEach(review => {
reviewsList.innerHTML += `
<div class="mb-4 pb-4 border-b border-gray-100 last:border-b-0">
<p class="font-semibold text-gray-800">${review.name}</p>
<div class="text-yellow-400 text-sm mb-1">${generateStarRating(review.rating)}</div>
<p class="text-gray-700 text-sm">${review.comment}</p>
</div>
`;
});
} else {
reviewsList.innerHTML = '<p class="text-gray-500 text-sm">No reviews yet.</p>';
}
showSection('courseDetailPage');
}
// Helper to generate star rating HTML
function generateStarRating(rating) {
let stars = '';
for (let i = 1; i <= 5; i++) {
if (i <= rating) {
stars += '<i class="fas fa-star"></i>';
} else if (i - 0.5 === rating) {
stars += '<i class="fas fa-star-half-alt"></i>';
} else {
stars += '<i class="far fa-star"></i>';
}
}
return stars;
}
// Function to add a course to the cart
function addToCart(courseId) {
const courseToAdd = courses.find(course => course.id === courseId);
if (courseToAdd) {
const existingItem = cart.find(item => item.id === courseId);
if (existingItem) {
existingItem.quantity++;
} else {
cart.push({ ...courseToAdd, quantity: 1 });
}
updateCartDisplay();
showInfoModal('Item Added', `${courseToAdd.title} has been added to your cart.`);
}
}
// Function to remove an item from the cart
function removeFromCart(courseId) {
cart = cart.filter(item => item.id !== courseId);
updateCartDisplay();
showInfoModal('Item Removed', 'Course removed from cart.');
}
// Function to update the cart display in the modal and header count
function updateCartDisplay() {
const cartItemsContainer = document.getElementById('cartItemsContainer');
const cartTotalSpan = document.getElementById('cartTotal');
const cartItemCountSpan = document.getElementById('cartItemCount');
cartItemsContainer.innerHTML = ''; // Clear existing cart items
let total = 0;
if (cart.length === 0) {
cartItemsContainer.innerHTML = '<p class="text-center text-gray-500">Your cart is empty.</p>';
} else {
cart.forEach(item => {
const cartItemDiv = `
<div class="flex items-center justify-between p-3 border-b border-gray-100 last:border-b-0">
<div class="flex items-center">
<img src="${item.image}" alt="${item.title}" class="w-16 h-16 object-cover rounded-md mr-4">
<div>
<h4 class="font-semibold text-gray-800">${item.title}</h4>
<p class="text-gray-600 text-sm">₹ ${item.price.toLocaleString('en-IN')} x ${item.quantity}</p>
</div>
</div>
<button onclick="removeFromCart(${item.id})" class="text-red-500 hover:text-red-700 transition duration-300">
<i class="fas fa-trash-alt"></i>
</button>
</div>
`;
cartItemsContainer.innerHTML += cartItemDiv;
total += item.price * item.quantity;
});
}
cartTotalSpan.textContent = `₹ ${total.toLocaleString('en-IN')}`;
cartItemCountSpan.textContent = cart.length; // Display number of unique items in cart
}
// Function to open the cart modal
function openCartModal() {
document.getElementById('cartModal').classList.remove('hidden');
}
// Function to close the cart modal
function closeCartModal() {
document.getElementById('cartModal').classList.add('hidden');
}
// Function for checkout (opens payment modal)
function checkout() {
if (cart.length === 0) {
showInfoModal('Cart Empty', 'Your cart is empty. Please add courses before checking out.');
return;
}
closeCartModal(); // Close cart modal
document.getElementById('paymentModal').classList.remove('hidden'); // Open payment modal
}
// Function to close payment modal
function closePaymentModal() {
document.getElementById('paymentModal').classList.add('hidden');
}
// Function to simulate payment
function simulatePayment(method) {
closePaymentModal();
const purchasedCourses = cart.map(item => item.title).join(', ');
showInfoModal('Payment Successful!', `You have successfully purchased ${purchasedCourses} via ${method}. Thank you for your order! (This is a demo.)`);
// Simulate enrollment
cart.forEach(item => {
if (!enrolledCourses.find(c => c.id === item.id)) {
enrolledCourses.push({ ...item, progress: 0 }); // Initialize progress
}
});
cart = []; // Clear cart after "checkout"
updateCartDisplay();
renderEnrolledCourses(); // Update dashboard
}
// Function to show the general info modal
function showInfoModal(title, message) {
const modal = document.getElementById('infoModal');
document.getElementById('infoModalTitle').textContent = title;
document.getElementById('infoModalMessage').textContent = message;
modal.classList.remove('hidden');
}
// Function to close the general info modal
function closeInfoModal() {
document.getElementById('infoModal').classList.add('hidden');
}
// User Dashboard Functions
function renderEnrolledCourses() {
const container = document.getElementById('enrolledCoursesContainer');
const noMessage = document.getElementById('noEnrolledCoursesMessage');
container.innerHTML = '';
if (enrolledCourses.length === 0) {
noMessage.classList.remove('hidden');
return;
} else {
noMessage.classList.add('hidden');
}
enrolledCourses.forEach(course => {
const dashboardCard = `
<div class="bg-white rounded-xl shadow-md p-6 border border-blue-100">
<img src="${course.image}" alt="${course.title}" class="w-full h-32 object-cover rounded-md mb-4">
<h4 class="text-xl font-semibold text-gray-900 mb-2">${course.title}</h4>
<p class="text-gray-600 text-sm mb-3">Progress:</p>
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-2">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: ${course.progress}%"></div>
</div>
<p class="text-right text-sm text-gray-600">${course.progress}% Complete</p>
<button onclick="simulateProgress(${course.id})" class="mt-4 bg-blue-500 text-white text-sm py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-300">
Continue Learning
</button>
${course.progress === 100 ? `<button class="ml-2 mt-4 bg-green-500 text-white text-sm py-2 px-4 rounded-lg"><i class="fas fa-certificate mr-1"></i> Get Certificate</button>` : ''}
</div>
`;
container.innerHTML += dashboardCard;
});
}
function simulateProgress(courseId) {
const course = enrolledCourses.find(c => c.id === courseId);
if (course) {
course.progress = Math.min(100, course.progress + 20); // Increase by 20%, max 100%
renderEnrolledCourses();
showInfoModal('Progress Updated', `Your progress in "${course.title}" is now ${course.progress}%.`);
}
}
// Instructor Dashboard Functions
let uploadedCourses = []; // Simulate courses uploaded by this instructor
function uploadNewCourse() {
const title = document.getElementById('newCourseTitle').value;
const description = document.getElementById('newCourseDescription').value;
const price = parseInt(document.getElementById('newCoursePrice').value);
const originalPrice = parseInt(document.getElementById('newCourseOriginalPrice').value) || null;
const image = document.getElementById('newCourseImage').value || "https://placehold.co/600x400/E0E0E0/000000?text=New+Course";
const syllabusText = document.getElementById('newCourseSyllabus').value;
const syllabus = syllabusText.split('\n').filter(line => line.trim() !== '');
if (!title || !description || isNaN(price)) {
showInfoModal('Error', 'Please fill in all required fields (Title, Description, Price).');
return;
}
const newCourse = {
id: courses.length + uploadedCourses.length + 1, // Simple unique ID
title,
description,
price,
originalPrice,
image,
rating: 0, // New courses start with no rating
reviewsCount: 0,
instructor: {
name: "Current Instructor (You)", // Placeholder for current user
title: "Online Educator",
bio: "A passionate educator dedicated to sharing knowledge.",
image: "https://placehold.co/100x100/E0E0E0/000000?text=Instructor"
},
syllabus,
studentReviews: []
};
courses.push(newCourse); // Add to main course list
uploadedCourses.push(newCourse); // Add to instructor's uploaded list
renderCourses(courses, 'homeCoursesContainer', 'homeNoCoursesMessage'); // Re-render home courses
renderCourses(courses, 'allCoursesContainer', 'allNoCoursesMessage'); // Re-render all courses
renderUploadedCourses(); // Re-render instructor's courses
document.getElementById('newCourseForm').reset(); // Clear form
showInfoModal('Success', `Course "${newCourse.title}" uploaded successfully!`);
}
function renderUploadedCourses() {
const container = document.getElementById('uploadedCoursesContainer');
const noMessage = document.getElementById('noUploadedCoursesMessage');
container.innerHTML = '';
if (uploadedCourses.length === 0) {
noMessage.classList.remove('hidden');
return;
} else {
noMessage.classList.add('hidden');
}
uploadedCourses.forEach(course => {
const uploadedCard = `
<div class="bg-white rounded-xl shadow-md p-6 border border-purple-100">
<img src="${course.image}" alt="${course.title}" class="w-full h-32 object-cover rounded-md mb-4">
<h4 class="text-xl font-semibold text-gray-900 mb-2">${course.title}</h4>
<p class="text-gray-600 text-sm mb-3">Price: ₹ ${course.price.toLocaleString('en-IN')}</p>
<p class="text-gray-600 text-sm mb-3">Students Enrolled: ${Math.floor(Math.random() * 50) + 10}</p> <!-- Simulated -->
<button onclick="showInfoModal('View Details', 'Viewing details for ${course.title}. (More features here in a real app!)')" class="bg-purple-500 text-white text-sm py-2 px-4 rounded-lg hover:bg-purple-600 transition duration-300">
Manage Course
</button>
</div>
`;
container.innerHTML += uploadedCard;
});
}
// Authentication Modal Functions
function openAuthModal(formType) {
document.getElementById('authModal').classList.remove('hidden');
showAuthForm(formType); // Show either login or signup form initially
}
function closeAuthModal() {
document.getElementById('authModal').classList.add('hidden');
}
function showAuthForm(formType) {
const loginForm = document.getElementById('loginForm');
const signupForm = document.getElementById('signupForm');
const loginTab = document.getElementById('loginTab');
const signupTab = document.getElementById('signupTab');
if (formType === 'login') {
loginForm.classList.remove('hidden');
signupForm.classList.add('hidden');
loginTab.classList.add('bg-blue-600', 'text-white');
loginTab.classList.remove('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
signupTab.classList.remove('bg-purple-600', 'text-white');
signupTab.classList.add('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
} else { // signup
signupForm.classList.remove('hidden');
loginForm.classList.add('hidden');
signupTab.classList.add('bg-purple-600', 'text-white');
signupTab.classList.remove('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
loginTab.classList.remove('bg-blue-600', 'text-white');
loginTab.classList.add('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
}
}
function togglePasswordVisibility(passwordFieldId) {
const passwordField = document.getElementById(passwordFieldId);
const toggleIcon = document.getElementById(`${passwordFieldId}Toggle`);
if (passwordField.type === 'password') {
passwordField.type = 'text';
toggleIcon.classList.remove('fa-eye');
toggleIcon.classList.add('fa-eye-slash');
} else {
passwordField.type = 'password';
toggleIcon.classList.remove('fa-eye-slash');
toggleIcon.classList.add('fa-eye');
}
}
function handleLogin() {
const email = document.getElementById('loginEmail').value;
const password = document.getElementById('loginPassword').value;
if (email && password) {
showInfoModal('Login Attempt', `Attempting to log in with ${email}. (Demo: No actual login occurs)`);
closeAuthModal();
} else {
showInfoModal('Error', 'Please enter both email/phone and password to log in.');
}
}
function handleSignup() {
const email = document.getElementById('signupEmail').value;
const password = document.getElementById('signupPassword').value;
if (email && password) {
showInfoModal('Signup Attempt', `Attempting to sign up with ${email}. (Demo: No actual signup occurs)`);
closeAuthModal();
} else {
showInfoModal('Error', 'Please enter both email/phone and password to sign up.');
}
}
// Initial render of courses when the page loads
document.addEventListener('DOMContentLoaded', () => {
showSection('homeSection'); // Show home section by default
updateCartDisplay(); // Initialize cart display
});
</script>
PHP Code
NO Need
🛠 Technologies Used
-
HTML5 – Clean semantic structure
-
Tailwind CSS – Utility-first, responsive styling
-
Vanilla JavaScript – Dynamic UI logic and modals
-
Font Awesome – Cart icons and visual elements
-
Responsive Layout – Mobile-first design principles
📚 Learning Outcomes
By working on this project, you will gain hands-on experience with:
-
Building single-page-like applications (SPA behavior with JS)
-
Responsive web design using Tailwind CSS
-
Managing modals and UI states with JavaScript
-
Creating dashboards, navigation, and dynamic sections
-
Structuring HTML for scalability and reuse
🚀 Final Thoughts
SkillUp Academy is more than just a course listing site — it's a complete front-end learning solution that showcases what’s possible using only HTML, CSS, and JavaScript. Whether you're practicing web design, demonstrating client work, or simply experimenting with new layouts, this project is a perfect tool in your learning journey.
📥 Download now, customize it, and create your own version of an e-learning platform!
💬 "Learning never exhausts the mind, it only ignites it. Skill up with SkillUp Academy!"