Spaces:
Running
Running
File size: 11,948 Bytes
ffed4ea c3ae8b9 ffed4ea c3ae8b9 ffed4ea c3ae8b9 ffed4ea c3ae8b9 ffed4ea c3ae8b9 ffed4ea c3ae8b9 ffed4ea c3ae8b9 ffed4ea c3ae8b9 ffed4ea c3ae8b9 ffed4ea c3ae8b9 ffed4ea 381bf2b ffed4ea 381bf2b ffed4ea 381bf2b ffed4ea c3ae8b9 ffed4ea c3ae8b9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorials - Replit Clone</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#0088CC',
secondary: '#1F2937'
}
}
}
}
</script>
</head>
<body class="bg-gray-50">
<custom-navbar></custom-navbar>
<div class="container mx-auto px-4 py-8">
<div class="text-center mb-12">
<h1 class="text-3xl font-bold text-gray-800 mb-4">Tutorials & Guides</h1>
<p class="text-gray-600 max-w-2xl mx-auto">Learn how to build amazing applications with step-by-step tutorials</p>
</div>
<div class="flex flex-wrap gap-4 mb-8">
<button class="bg-primary hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center gap-2" onclick="filterTutorials('all')">
<i data-feather="book"></i>
All Tutorials
</button>
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center gap-2" onclick="filterTutorials('beginner')">
<i data-feather="star"></i>
Beginner
</button>
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center gap-2" onclick="filterTutorials('intermediate')">
<i data-feather="trending-up"></i>
Intermediate
</button>
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center gap-2" onclick="filterTutorials('advanced')">
<i data-feather="award"></i>
Advanced
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Tutorial Cards -->
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow cursor-pointer" onclick="startTutorial('web-app')">
<div class="h-48 bg-gradient-to-r from-blue-400 to-blue-600"></div>
<div class="p-6">
<div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
<span>Beginner</span>
<span>•</span>
<span>30 min</span>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Building Your First Web App</h3>
<p class="text-gray-600 mb-4">Learn how to create a complete web application from scratch using HTML, CSS, and JavaScript.</p>
<a href="#" class="text-primary font-medium flex items-center gap-1">
Start Tutorial
<i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow cursor-pointer" onclick="startTutorial('python-data')">
<div class="h-48 bg-gradient-to-r from-green-400 to-green-600"></div>
<div class="p-6">
<div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
<span>Intermediate</span>
<span>•</span>
<span>45 min</span>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Python Data Analysis</h3>
<p class="text-gray-600 mb-4">Analyze datasets and create visualizations using Python libraries like Pandas and Matplotlib.</p>
<a href="#" class="text-primary font-medium flex items-center gap-1">
Start Tutorial
<i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow cursor-pointer" onclick="startTutorial('node-api')">
<div class="h-48 bg-gradient-to-r from-purple-400 to-purple-600"></div>
<div class="p-6">
<div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
<span>Advanced</span>
<span>•</span>
<span>60 min</span>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Building REST APIs with Node.js</h3>
<p class="text-gray-600 mb-4">Create scalable APIs using Express.js and connect them to a MongoDB database.</p>
<a href="#" class="text-primary font-medium flex items-center gap-1">
Start Tutorial
<i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow cursor-pointer" onclick="startTutorial('react')">
<div class="h-48 bg-gradient-to-r from-yellow-400 to-orange-500"></div>
<div class="p-6">
<div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
<span>Beginner</span>
<span>•</span>
<span>20 min</span>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Introduction to React</h3>
<p class="text-gray-600 mb-4">Learn the fundamentals of React and build your first component-based user interface.</p>
<a href="#" class="text-primary font-medium flex items-center gap-1">
Start Tutorial
<i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow cursor-pointer" onclick="startTutorial('deploy')">
<div class="h-48 bg-gradient-to-r from-red-400 to-pink-500"></div>
<div class="p-6">
<div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
<span>Intermediate</span>
<span>•</span>
<span>40 min</span>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Deploying Applications</h3>
<p class="text-gray-600 mb-4">Learn how to deploy your applications to the web and make them accessible to users.</p>
<a href="#" class="text-primary font-medium flex items-center gap-1">
Start Tutorial
<i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow cursor-pointer" onclick="startTutorial('css')">
<div class="h-48 bg-gradient-to-r from-teal-400 to-cyan-600"></div>
<div class="p-6">
<div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
<span>Beginner</span>
<span>•</span>
<span>25 min</span>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">CSS Styling Techniques</h3>
<p class="text-gray-600 mb-4">Master modern CSS techniques including Flexbox, Grid, and responsive design.</p>
<a href="#" class="text-primary font-medium flex items-center gap-1">
Start Tutorial
<i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
</div>
<div class="mt-12 bg-white rounded-xl shadow-md p-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4">Learning Paths</h2>
<p class="text-gray-600 mb-6">Structured learning journeys to guide you from beginner to expert</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="border border-gray-200 rounded-lg p-6 hover:border-primary transition-colors cursor-pointer" onclick="explorePath('frontend')">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
<i data-feather="code" class="text-primary w-6 h-6"></i>
</div>
<h3 class="font-bold text-lg mb-2">Frontend Developer</h3>
<p class="text-gray-600 text-sm mb-4">Learn HTML, CSS, JavaScript, and modern frameworks to build stunning user interfaces.</p>
<a href="#" class="text-primary font-medium text-sm">Explore Path</a>
</div>
<div class="border border-gray-200 rounded-lg p-6 hover:border-primary transition-colors cursor-pointer" onclick="explorePath('backend')">
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
<i data-feather="server" class="text-green-600 w-6 h-6"></i>
</div>
<h3 class="font-bold text-lg mb-2">Backend Developer</h3>
<p class="text-gray-600 text-sm mb-4">Master server-side programming, databases, and APIs to build powerful backend systems.</p>
<a href="#" class="text-primary font-medium text-sm">Explore Path</a>
</div>
<div class="border border-gray-200 rounded-lg p-6 hover:border-primary transition-colors cursor-pointer" onclick="explorePath('fullstack')">
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
<i data-feather="smartphone" class="text-purple-600 w-6 h-6"></i>
</div>
<h3 class="font-bold text-lg mb-2">Full Stack Developer</h3>
<p class="text-gray-600 text-sm mb-4">Combine frontend and backend skills to build complete web applications.</p>
<a href="#" class="text-primary font-medium text-sm">Explore Path</a>
</div>
</div>
</div>
</div>
<custom-footer></custom-footer>
<ai-agent></ai-agent>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="components/ai-agent.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
// Interactive tutorial functions
function filterTutorials(level) {
alert(`Filtering tutorials by: ${level}`);
// In a real app, this would filter the displayed tutorials
}
function startTutorial(tutorialId) {
alert(`Starting tutorial: ${tutorialId}`);
// In a real app, this would navigate to the tutorial page
}
function explorePath(path) {
alert(`Exploring learning path: ${path}`);
// In a real app, this would navigate to the learning path page
}
</script>
</body>
</html>
|