peeeep/javascript-without-javascript-wizardry
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>JavaScript Tutorials - Without JS</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <style>11 .tutorial-card {12 transition: all 0.3s ease;13 }14 .tutorial-card:hover {15 transform: translateY(-5px);16 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);17 border-left: 4px solid #3b82f6;18 }19 .nav-link.active {20 border-bottom: 2px solid #3b82f6;21 color: #3b82f6;22 }23 </style>24</head>25<body class="bg-gray-50 font-sans">26 <!-- Navigation -->27 <nav class="bg-white shadow-lg sticky top-0 z-10">28 <div class="container mx-auto px-6 py-4">29 <div class="flex justify-between items-center">30 <a href="/" class="text-2xl font-bold text-primary">JS<span class="text-secondary">NoJS</span></a>31 <div class="flex space-x-6">32 <a href="/" class="text-gray-600 hover:text-dark font-medium">Start</a>33 <a href="/examples.html" class="text-gray-600 hover:text-dark font-medium">Beispiele</a>34 <a href="/tutorials.html" class="nav-link active text-dark font-medium">Tutorials</a>35 <a href="https://developer.mozilla.org/de/docs/Web/JavaScript" target="_blank" class="text-gray-600 hover:text-dark font-medium">MDN Docs</a>36 <a href="mailto:info@jsnojs.de" class="text-gray-600 hover:text-dark font-medium">Kontakt</a>37 </div>38 </div>39 </div>40 </nav>41 42 <!-- Header -->43 <header class="bg-gradient-to-r from-primary to-secondary text-white py-20">44 <div class="container mx-auto px-6 text-center">45 <h1 class="text-4xl md:text-5xl font-bold mb-6">JavaScript Tutorials</h1>46 <p class="text-xl mb-8 max-w-2xl mx-auto">Step-by-step guides to learn JavaScript concepts visually</p>47 </div>48 </header>49 50 <!-- Tutorials Section -->51 <main class="container mx-auto px-6 py-12">52 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">53 <!-- Beginner Tutorial -->54 <a href="/tutorials/basics.html" class="tutorial-card bg-white rounded-lg shadow-md p-6">55 <div class="bg-blue-100 p-4 rounded-lg mb-4">56 <i data-feather="book" class="w-10 h-10 text-blue-500 mx-auto"></i>57 </div>58 <h3 class="text-xl font-bold mb-2 text-dark">JavaScript Basics</h3>59 <p class="text-gray-600 mb-4">Learn variables, data types, operators, and basic syntax.</p>60 <div class="flex items-center text-sm text-primary">61 <span>Beginner</span>62 <span class="mx-2">•</span>63 <span>30 min</span>64 </div>65 </a>66 67 <!-- Functions Tutorial -->68 <a href="/tutorials/functions.html" class="tutorial-card bg-white rounded-lg shadow-md p-6">69 <div class="bg-green-100 p-4 rounded-lg mb-4">70 <i data-feather="repeat" class="w-10 h-10 text-green-500 mx-auto"></i>71 </div>72 <h3 class="text-xl font-bold mb-2 text-dark">Functions & Scope</h3>73 <p class="text-gray-600 mb-4">Master function declarations, expressions, and scope concepts.</p>74 <div class="flex items-center text-sm text-primary">75 <span>Beginner</span>76 <span class="mx-2">•</span>77 <span>45 min</span>78 </div>79 </a>80 81 <!-- DOM Tutorial -->82 <a href="/tutorials/dom.html" class="tutorial-card bg-white rounded-lg shadow-md p-6">83 <div class="bg-purple-100 p-4 rounded-lg mb-4">84 <i data-feather="layout" class="w-10 h-10 text-purple-500 mx-auto"></i>85 </div>86 <h3 class="text-xl font-bold mb-2 text-dark">DOM Manipulation</h3>87 <p class="text-gray-600 mb-4">Learn how to select and modify page elements.</p>88 <div class="flex items-center text-sm text-primary">89 <span>Intermediate</span>90 <span class="mx-2">•</span>91 <span>1 hour</span>92 </div>93 </a>94 95 <!-- Events Tutorial -->96 <a href="/tutorials/events.html" class="tutorial-card bg-white rounded-lg shadow-md p-6">97 <div class="bg-pink-100 p-4 rounded-lg mb-4">98 <i data-feather="activity" class="w-10 h-10 text-pink-500 mx-auto"></i>99 </div>100 <h3 class="text-xl font-bold mb-2 text-dark">Event Handling</h3>101 <p class="text-gray-600 mb-4">Respond to user interactions like clicks and key presses.</p>102 <div class="flex items-center text-sm text-primary">103 <span>Intermediate</span>104 <span class="mx-2">•</span>105 <span>1 hour</span>106 </div>107 </a>108 109 <!-- Async Tutorial -->110 <a href="/tutorials/async.html" class="tutorial-card bg-white rounded-lg shadow-md p-6">111 <div class="bg-yellow-100 p-4 rounded-lg mb-4">112 <i data-feather="clock" class="w-10 h-10 text-yellow-500 mx-auto"></i>113 </div>114 <h3 class="text-xl font-bold mb-2 text-dark">Async Programming</h3>115 <p class="text-gray-600 mb-4">Understand callbacks, promises, and async/await.</p>116 <div class="flex items-center text-sm text-primary">117 <span>Advanced</span>118 <span class="mx-2">•</span>119 <span>2 hours</span>120 </div>121 </a>122 123 <!-- API Tutorial -->124 <a href="/tutorials/api.html" class="tutorial-card bg-white rounded-lg shadow-md p-6">125 <div class="bg-indigo-100 p-4 rounded-lg mb-4">126 <i data-feather="database" class="w-10 h-10 text-indigo-500 mx-auto"></i>127 </div>128 <h3 class="text-xl font-bold mb-2 text-dark">Working with APIs</h3>129 <p class="text-gray-600 mb-4">Learn how to fetch and display data from web APIs.</p>130 <div class="flex items-center text-sm text-primary">131 <span>Advanced</span>132 <span class="mx-2">•</span>133 <span>2 hours</span>134 </div>135 </a>136 </div>137 </main>138 139 <footer class="bg-dark text-white py-12">140 <div class="container mx-auto px-6">141 <div class="grid md:grid-cols-3 gap-8">142 <div>143 <h3 class="text-xl font-bold mb-4">JSNoJS</h3>144 <p class="text-gray-400">Learning JavaScript concepts without writing a single line of JavaScript code.</p>145 </div>146 <div>147 <h3 class="text-xl font-bold mb-4">Quick Links</h3>148 <ul class="space-y-2">149 <li><a href="/tutorials.html" class="text-gray-400 hover:text-white">Tutorials</a></li>150 <li><a href="/examples.html" class="text-gray-400 hover:text-white">Examples</a></li>151 <li><a href="/frameworks.html" class="text-gray-400 hover:text-white">Frameworks</a></li>152 </ul>153 </div>154 <div>155 <h3 class="text-xl font-bold mb-4">Connect</h3>156 <div class="flex space-x-4">157 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>158 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="github"></i></a>159 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>160 </div>161 </div>162 </div>163 <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">164 <p>© 2023 JSNoJS. All rights reserved. No JavaScript was harmed in the making of this website.</p>165 </div>166 </div>167 </footer>168 169 <script>170 feather.replace();171 </script>172</body>173</html>