Componente Timeline
Un componente della timeline complesso e reattivo progettato per le piattaforme didattiche, caratterizzato da un design pulito e minimalista incentrato sulla tipografia con toni della terra e supporto completo della modalità scura.
Codice HTML
<div class="font-sans antialiased text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-100 min-h-screen py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-4xl mx-auto">
<h1 class="text-4xl sm:text-5xl font-extrabold mb-12 text-center leading-tight dark:text-gray-50">
Learning Journey Timeline
</h1>
<div class="space-y-16">
<!-- Timeline Item 1 -->
<div class="relative flex flex-col md:flex-row items-center">
<div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
<div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>
<div class="md:flex-1 md:pr-8 md:text-right">
<p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 1</p>
<h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Foundations of Web Development</h2>
<p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
Dive into the essential building blocks of the web. Learn HTML for structuring content and CSS for styling beautiful web pages. Discover browser developer tools and basic responsive design principles.
</p>
<div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-end">
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">HTML5</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">CSS3</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Responsive Design</span>
</div>
</div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="md:flex-1 md:pl-8 mt-6 md:mt-0">
<img src="https://picsum.photos/400/250?random=1" alt="Foundations" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-start">
<svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Approx. 40 hours
</div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="relative flex flex-col md:flex-row-reverse items-center">
<div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
<div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>
<div class="md:flex-1 md:pl-8 md:text-left">
<p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 2</p>
<h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Interactive Frontend with JavaScript</h2>
<p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
Unlock dynamic behavior using JavaScript. Master DOM manipulation, event handling, and asynchronous programming. Build interactive user interfaces and enhance user experience.
</p>
<div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-start">
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">JavaScript ES6+</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">DOM Manipulation</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">APIs (Fetch)</span>
</div>
</div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="md:flex-1 md:pr-8 mt-6 md:mt-0">
<img src="https://picsum.photos/400/250?random=2" alt="Frontend Interactive" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-end">
<svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Approx. 50 hours
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="relative flex flex-col md:flex-row items-center">
<div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
<div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>
<div class="md:flex-1 md:pr-8 md:text-right">
<p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 3</p>
<h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Modern Frameworks: Building SPAs</h2>
<p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
Step into the world of Single Page Applications. Learn the fundamentals of popular JavaScript frameworks like React, Vue, or Angular. Understand component-based architecture and state management.
</p>
<div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-end">
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">React/Vue/Angular</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Component Architecture</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">State Management</span>
</div>
</div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="md:flex-1 md:pl-8 mt-6 md:mt-0">
<img src="https://picsum.photos/400/250?random=3" alt="Modern Frameworks" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-start">
<svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Approx. 60 hours
</div>
</div>
</div>
<!-- Timeline Item 4 -->
<div class="relative flex flex-col md:flex-row-reverse items-center">
<div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
<div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>
<div class="md:flex-1 md:pl-8 md:text-left">
<p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 4</p>
<h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Backend Fundamentals & Databases</h2>
<p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
Explore server-side development. Learn to build RESTful APIs with Node.js and Express. Understand database concepts with SQL (PostgreSQL) and NoSQL (MongoDB) and connect them to your frontend.
</p>
<div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-start">
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Node.js</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Express.js</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">SQL/NoSQL DBs</span>
</div>
</div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="md:flex-1 md:pr-8 mt-6 md:mt-0">
<img src="https://picsum.photos/400/250?random=4" alt="Backend & Databases" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-end">
<svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Approx. 70 hours
</div>
</div>
</div>
<!-- Timeline Item 5 -->
<div class="relative flex flex-col md:flex-row items-center">
<div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
<div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>
<div class="md:flex-1 md:pr-8 md:text-right">
<p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 5</p>
<h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Deployment & DevOps Basics</h2>
<p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
Take your applications live. Understand deployment strategies, CI/CD pipelines, and cloud platforms like Netlify/Vercel for frontend and Heroku/AWS for backend. Learn basic version control with Git.
</p>
<div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-end">
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Git & GitHub</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">CI/CD</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Cloud Deployment</span>
</div>
</div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="md:flex-1 md:pl-8 mt-6 md:mt-0">
<img src="https://picsum.photos/400/250?random=5" alt="Deployment & DevOps" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-start">
<svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Approx. 35 hours
</div>
</div>
</div>
<!-- Example of the final step, could be a certificate or portfolio link -->
<div class="relative flex flex-col items-center justify-center mt-12">
<div class="absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-green-700 dark:bg-green-600 border-2 border-white dark:border-gray-900 z-10"></div>
<h2 class="text-3xl font-bold text-center text-green-700 dark:text-green-500 mt-8 mb-6">
Your Journey Completed!
</h2>
<p class="text-lg text-gray-700 dark:text-gray-300 text-center max-w-2xl mx-auto">
Congratulations on completing your full-stack web development journey! You are now equipped with the skills to build and deploy modern web applications. Continue exploring and building!
</p>
<button class="mt-8 px-6 py-3 bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 text-white font-semibold rounded-lg shadow-md transition-colors duration-300">
Explore More Courses
</button>
</div>
</div>
</div>
</div>Componenti correlati
Componente Timeline retrò/vintage
Un componente della timeline reattivo con un design retrò/vintage, colori vivaci e supporto per la modalità scura. Adatto per la presentazione di un portfolio.
Componente della sequenza temporale Art Déco
Un componente della timeline reattivo per eventi/conferenze, ispirato all'estetica Art Déco con una combinazione di colori viola/viola, che supporta la modalità oscura.
Componente della linea temporale di Glassmorphism
Un componente Timeline reattivo con stile glassmorphism con una combinazione di colori triadica. Include elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, adatti per il consumo di blog e contenuti, con supporto per la modalità scura.