728 lines
28 KiB
HTML
728 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>JavaScript History & Evolution</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.slide {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 40px;
|
|
margin: 20px auto;
|
|
box-shadow: 0 15px 35px rgba(0,0,0,0.3);
|
|
display: none;
|
|
min-height: 80vh;
|
|
position: relative;
|
|
}
|
|
|
|
.active {
|
|
display: block;
|
|
}
|
|
|
|
h1 {
|
|
color: #2c3e50;
|
|
border-bottom: 4px solid #3498db;
|
|
padding-bottom: 15px;
|
|
margin-bottom: 25px;
|
|
font-size: 2.8rem;
|
|
text-align: center;
|
|
}
|
|
|
|
h2 {
|
|
color: #34495e;
|
|
margin: 25px 0 20px;
|
|
font-size: 2rem;
|
|
border-left: 5px solid #e74c3c;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
h3 {
|
|
color: #2980b9;
|
|
margin: 20px 0 15px;
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.content-section {
|
|
background: #f8f9fa;
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
margin: 20px 0;
|
|
border-left: 4px solid #3498db;
|
|
}
|
|
|
|
.history-section {
|
|
border-left-color: #e74c3c;
|
|
}
|
|
|
|
.quote-section {
|
|
background: #fff9e6;
|
|
border-left: 4px solid #f39c12;
|
|
font-style: italic;
|
|
padding: 25px;
|
|
margin: 25px 0;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.timeline {
|
|
position: relative;
|
|
max-width: 800px;
|
|
margin: 30px auto;
|
|
}
|
|
|
|
.timeline::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 6px;
|
|
background: #3498db;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 50%;
|
|
margin-left: -3px;
|
|
}
|
|
|
|
.timeline-item {
|
|
padding: 10px 40px;
|
|
position: relative;
|
|
width: 50%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.timeline-item:nth-child(odd) {
|
|
left: 0;
|
|
}
|
|
|
|
.timeline-item:nth-child(even) {
|
|
left: 50%;
|
|
}
|
|
|
|
.timeline-content {
|
|
padding: 20px;
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
border-left: 4px solid #3498db;
|
|
}
|
|
|
|
.timeline-item:nth-child(even) .timeline-content {
|
|
border-left: 4px solid #e74c3c;
|
|
}
|
|
|
|
.timeline-item::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: #3498db;
|
|
border: 4px solid white;
|
|
border-radius: 50%;
|
|
top: 20px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.timeline-item:nth-child(odd)::after {
|
|
right: -10px;
|
|
}
|
|
|
|
.timeline-item:nth-child(even)::after {
|
|
left: -10px;
|
|
}
|
|
|
|
.reasons-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20px;
|
|
margin: 25px 0;
|
|
}
|
|
|
|
.reason-card {
|
|
background: white;
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
border-top: 4px solid #3498db;
|
|
}
|
|
|
|
.reason-card h4 {
|
|
color: #2c3e50;
|
|
margin-bottom: 15px;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.comparison {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin: 25px 0;
|
|
}
|
|
|
|
.javascript-card, .java-card {
|
|
flex: 1;
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
color: white;
|
|
}
|
|
|
|
.javascript-card {
|
|
background: #3498db;
|
|
}
|
|
|
|
.java-card {
|
|
background: #e74c3c;
|
|
}
|
|
|
|
.full-stack-container {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin: 25px 0;
|
|
}
|
|
|
|
.frontend-stack, .backend-stack {
|
|
flex: 1;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
background: white;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.frontend-stack {
|
|
border-top: 4px solid #3498db;
|
|
}
|
|
|
|
.backend-stack {
|
|
border-top: 4px solid #e74c3c;
|
|
}
|
|
|
|
.tech-list {
|
|
columns: 2;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.tech-list li {
|
|
margin-bottom: 8px;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.btn {
|
|
background: #3498db;
|
|
color: white;
|
|
padding: 12px 25px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
margin: 10px 5px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: #2980b9;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.nav {
|
|
text-align: center;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 8px;
|
|
background: #ecf0f1;
|
|
border-radius: 4px;
|
|
margin: 20px 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress {
|
|
height: 100%;
|
|
background: #3498db;
|
|
width: 14.28%;
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
.slide-counter {
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
color: #7f8c8d;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.highlight {
|
|
background: #fff9e6;
|
|
padding: 3px 6px;
|
|
border-radius: 3px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.slide {
|
|
padding: 20px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.reasons-grid, .comparison, .full-stack-container {
|
|
grid-template-columns: 1fr;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.timeline::after {
|
|
left: 31px;
|
|
}
|
|
|
|
.timeline-item {
|
|
width: 100%;
|
|
padding-left: 70px;
|
|
padding-right: 25px;
|
|
}
|
|
|
|
.timeline-item:nth-child(even) {
|
|
left: 0;
|
|
}
|
|
|
|
.timeline-item::after {
|
|
left: 21px;
|
|
}
|
|
|
|
.timeline-item:nth-child(odd)::after,
|
|
.timeline-item:nth-child(even)::after {
|
|
left: 21px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="slide active" id="slide1">
|
|
<h1>📜 The History of JavaScript</h1>
|
|
<h2>From 10-Day Prototype to World's Most Popular Language</h2>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 14.28%"></div>
|
|
</div>
|
|
|
|
<div class="content-section history-section">
|
|
<h3>The Birth of JavaScript</h3>
|
|
<p>JavaScript was created around <span class="highlight">April 1995 by Brendan Eich</span>, who was working at Netscape Communications Corporation.</p>
|
|
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<div class="timeline-content">
|
|
<h4>1995 - The 10-Day Challenge</h4>
|
|
<p>Brendan Eich was given only <span class="highlight">10 days</span> to design and code a working prototype of a programming language that could run in the browser.</p>
|
|
<p>Netscape was in fierce competition with Microsoft and needed to release their browser quickly.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-content">
|
|
<h4>Original Goal</h4>
|
|
<p>Create a language that appealed to <span class="highlight">non-professional programmers</span>, similar to Microsoft Visual Basic's accessibility.</p>
|
|
<p>Initially called <span class="highlight">LiveScript</span>, it was renamed to JavaScript to capitalize on Java's popularity.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="quote-section">
|
|
<p>"Learning JavaScript used to mean you weren't a serious developer. Today, not learning JavaScript means the same thing."</p>
|
|
<p style="text-align: right; margin-top: 10px;">- Tim O'Reilly, Founder of O'Reilly Media</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav">
|
|
<button class="btn" onclick="showSlide(2)">Next →</button>
|
|
</div>
|
|
|
|
<div class="slide-counter">Slide 1 of 7</div>
|
|
</div>
|
|
|
|
<div class="slide" id="slide2">
|
|
<h1>🚀 JavaScript's Evolution</h1>
|
|
<h2>From Simple Scripts to Full Applications</h2>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 28.56%"></div>
|
|
</div>
|
|
|
|
<div class="content-section">
|
|
<h3>The Early Years (1995-2005)</h3>
|
|
<p>In the beginning, JavaScript was designed primarily for:</p>
|
|
<ul>
|
|
<li>Adding simple interactions to web pages</li>
|
|
<li>Basic form validation</li>
|
|
<li>Image rollovers and simple animations</li>
|
|
</ul>
|
|
<p>It wasn't considered a "serious" programming language by many developers.</p>
|
|
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<div class="timeline-content">
|
|
<h4>2005 - The jQuery Revolution</h4>
|
|
<p>jQuery and AJAX were released, making JavaScript much more powerful and easier to use.</p>
|
|
<p>Developers could now easily:</p>
|
|
<ul>
|
|
<li>Manipulate the DOM</li>
|
|
<li>Make asynchronous requests</li>
|
|
<li>Create rich interactive experiences</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-content">
|
|
<h4>2008 - Modern Browsers Emerge</h4>
|
|
<p>Google launched Chrome with its powerful V8 JavaScript engine.</p>
|
|
<p>Facebook began driving massive web adoption, requiring more sophisticated front-end capabilities.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav">
|
|
<button class="btn" onclick="showSlide(1)">← Previous</button>
|
|
<button class="btn" onclick="showSlide(3)">Next →</button>
|
|
</div>
|
|
|
|
<div class="slide-counter">Slide 2 of 7</div>
|
|
</div>
|
|
|
|
<div class="slide" id="slide3">
|
|
<h1>💪 The Modern JavaScript Era</h1>
|
|
<h2>Breaking Browser Boundaries</h2>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 42.84%"></div>
|
|
</div>
|
|
|
|
<div class="content-section">
|
|
<h3>Browser APIs & Server-Side JavaScript</h3>
|
|
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<div class="timeline-content">
|
|
<h4>Browser APIs</h4>
|
|
<p>Browsers began exposing powerful APIs to JavaScript:</p>
|
|
<ul>
|
|
<li>Geolocation API</li>
|
|
<li>Canvas for graphics</li>
|
|
<li>Local Storage</li>
|
|
<li>Device APIs</li>
|
|
</ul>
|
|
<p>This allowed web applications to behave more like native desktop applications.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-content">
|
|
<h4>2009 - Node.js Changes Everything</h4>
|
|
<p>Ryan Dahl created Node.js, allowing JavaScript to run on the server.</p>
|
|
<p>This was a revolutionary development because:</p>
|
|
<ul>
|
|
<li>Developers could use one language for both frontend and backend</li>
|
|
<li>JavaScript could now compete with PHP, Python, Java, Ruby</li>
|
|
<li>Full-stack JavaScript development became possible</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section" style="margin-top: 25px;">
|
|
<h3>Today's JavaScript Ecosystem</h3>
|
|
<p>JavaScript now powers:</p>
|
|
<ul>
|
|
<li><span class="highlight">Web Applications</span> - Frontend frameworks like React, Angular, Vue</li>
|
|
<li><span class="highlight">Server Applications</span> - Node.js, Express.js</li>
|
|
<li><span class="highlight">Mobile Apps</span> - React Native, Ionic, NativeScript</li>
|
|
<li><span class="highlight">Desktop Apps</span> - Electron</li>
|
|
<li><span class="highlight">Internet of Things</span> - JavaScript on microcontrollers</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav">
|
|
<button class="btn" onclick="showSlide(2)">← Previous</button>
|
|
<button class="btn" onclick="showSlide(4)">Next →</button>
|
|
</div>
|
|
|
|
<div class="slide-counter">Slide 3 of 7</div>
|
|
</div>
|
|
|
|
<div class="slide" id="slide4">
|
|
<h1>🎯 Why Learn JavaScript?</h1>
|
|
<h2>4 Compelling Reasons</h2>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 57.12%"></div>
|
|
</div>
|
|
|
|
<div class="reasons-grid">
|
|
<div class="reason-card">
|
|
<h4>🌐 Browser Dominance</h4>
|
|
<p>JavaScript is the <span class="highlight">only programming language</span> that runs natively in all web browsers. If you want to create interactive web experiences, you must learn JavaScript.</p>
|
|
</div>
|
|
|
|
<div class="reason-card">
|
|
<h4>📚 Learning Curve</h4>
|
|
<p>JavaScript is <span class="highlight">relatively easy to start</span> with basic concepts, though it has depth and complexity for advanced development. This makes it accessible for beginners.</p>
|
|
</div>
|
|
|
|
<div class="reason-card">
|
|
<h4>💼 Essential for Web Apps</h4>
|
|
<p>Modern web applications <span class="highlight">require JavaScript</span>. From simple websites to complex SPAs (Single Page Applications), JavaScript is fundamental.</p>
|
|
</div>
|
|
|
|
<div class="reason-card">
|
|
<h4>🚀 Career Opportunities</h4>
|
|
<p>There's <span class="highlight">high demand</span> for JavaScript developers across frontend, backend, and full-stack roles. Learning JavaScript opens doors to numerous career paths.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section" style="margin-top: 25px;">
|
|
<h3>Career Paths with JavaScript</h3>
|
|
<p>Mastering JavaScript can lead to various roles:</p>
|
|
<ul>
|
|
<li><span class="highlight">Frontend Developer</span> - Building user interfaces with React, Angular, or Vue</li>
|
|
<li><span class="highlight">Backend Developer</span> - Creating servers and APIs with Node.js</li>
|
|
<li><span class="highlight">Full-Stack Developer</span> - Handling both frontend and backend</li>
|
|
<li><span class="highlight">Mobile Developer</span> - Building apps with React Native</li>
|
|
<li><span class="highlight">DevOps Engineer</span> - Working with JavaScript-based tools</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav">
|
|
<button class="btn" onclick="showSlide(3)">← Previous</button>
|
|
<button class="btn" onclick="showSlide(5)">Next →</button>
|
|
</div>
|
|
|
|
<div class="slide-counter">Slide 4 of 7</div>
|
|
</div>
|
|
|
|
<div class="slide" id="slide5">
|
|
<h1>⚔️ JavaScript vs Java</h1>
|
|
<h2>Understanding the Difference</h2>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 71.4%"></div>
|
|
</div>
|
|
|
|
<div class="content-section">
|
|
<h3>The Name Confusion</h3>
|
|
<p>JavaScript was originally named <span class="highlight">LiveScript</span>, but was renamed to JavaScript for marketing reasons.</p>
|
|
<p>Java was extremely popular at the time, and Netscape hoped the similar name would attract developers.</p>
|
|
<p><strong>Important:</strong> JavaScript and Java are completely different languages with different purposes, syntax, and use cases.</p>
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<div class="javascript-card">
|
|
<h3>JavaScript</h3>
|
|
<ul>
|
|
<li>Dynamic, interpreted scripting language</li>
|
|
<li>Runs in browsers and on servers (Node.js)</li>
|
|
<li>Prototype-based object orientation</li>
|
|
<li>Dynamic typing (variables can change types)</li>
|
|
<li>Event-driven and functional programming features</li>
|
|
<li>Primarily used for web development</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="java-card">
|
|
<h3>Java</h3>
|
|
<ul>
|
|
<li>Static, compiled programming language</li>
|
|
<li>Runs on Java Virtual Machine (JVM)</li>
|
|
<li>Class-based object orientation</li>
|
|
<li>Static typing (variables have fixed types)</li>
|
|
<li>Traditional object-oriented programming</li>
|
|
<li>Used for enterprise applications, Android apps, etc.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section" style="margin-top: 25px;">
|
|
<h3>Key Takeaway</h3>
|
|
<p>You <span class="highlight">don't need to know Java to learn JavaScript</span> (or vice versa). They are separate languages with different learning paths and applications.</p>
|
|
</div>
|
|
|
|
<div class="nav">
|
|
<button class="btn" onclick="showSlide(4)">← Previous</button>
|
|
<button class="btn" onclick="showSlide(6)">Next →</button>
|
|
</div>
|
|
|
|
<div class="slide-counter">Slide 5 of 7</div>
|
|
</div>
|
|
|
|
<div class="slide" id="slide6">
|
|
<h1>🔧 Full-Stack JavaScript Development</h1>
|
|
<h2>One Language, Entire Application</h2>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 85.68%"></div>
|
|
</div>
|
|
|
|
<div class="content-section">
|
|
<h3>What is a Full-Stack JavaScript Developer?</h3>
|
|
<p>A full-stack JavaScript developer can build both <span class="highlight">client-side (frontend)</span> and <span class="highlight">server-side (backend)</span> software using JavaScript.</p>
|
|
<p>In addition to HTML and CSS, they work with:</p>
|
|
</div>
|
|
|
|
<div class="full-stack-container">
|
|
<div class="frontend-stack">
|
|
<h3>Client Software (Front End)</h3>
|
|
<ul class="tech-list">
|
|
<li>HTML & CSS</li>
|
|
<li>JavaScript (ES5/ES6+)</li>
|
|
<li>React / Angular / Vue</li>
|
|
<li>jQuery</li>
|
|
<li>HTML DOM</li>
|
|
<li>JSON & XML</li>
|
|
<li>Bootstrap / W3.CSS</li>
|
|
<li>Redux / GraphQL</li>
|
|
<li>Webpack / Grunt / Gulp</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="backend-stack">
|
|
<h3>Server Software (Back End)</h3>
|
|
<ul class="tech-list">
|
|
<li>Node.js</li>
|
|
<li>Express.js</li>
|
|
<li>Databases (MongoDB, SQL)</li>
|
|
<li>REST APIs</li>
|
|
<li>Authentication</li>
|
|
<li>Web Sockets</li>
|
|
<li>Server Deployment</li>
|
|
<li>Cloud Platforms (AWS, Azure)</li>
|
|
<li>Testing (Jest, Mocha)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section" style="margin-top: 25px;">
|
|
<h3>The Full-Stack Advantage</h3>
|
|
<p>With JavaScript across the entire stack, developers can:</p>
|
|
<ul>
|
|
<li>Use the same language for frontend and backend</li>
|
|
<li>Share code between client and server</li>
|
|
<li>Context-switch less between different syntax</li>
|
|
<li>Build applications more efficiently</li>
|
|
<li>Participate in both frontend and backend discussions</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav">
|
|
<button class="btn" onclick="showSlide(5)">← Previous</button>
|
|
<button class="btn" onclick="showSlide(7)">Next →</button>
|
|
</div>
|
|
|
|
<div class="slide-counter">Slide 6 of 7</div>
|
|
</div>
|
|
|
|
<div class="slide" id="slide7">
|
|
<h1>🚀 Your JavaScript Journey</h1>
|
|
<h2>From Beginner to Professional Developer</h2>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 100%"></div>
|
|
</div>
|
|
|
|
<div class="content-section">
|
|
<h3>JavaScript's Incredible Journey</h3>
|
|
<p>From a <span class="highlight">10-day prototype</span> to the <span class="highlight">world's most popular programming language</span>, JavaScript has come a long way.</p>
|
|
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<div class="timeline-content">
|
|
<h4>1995 - The Beginning</h4>
|
|
<p>Created in 10 days by Brendan Eich at Netscape</p>
|
|
<p>Simple scripting for web pages</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-content">
|
|
<h4>2005 - jQuery Era</h4>
|
|
<p>Made JavaScript powerful and accessible</p>
|
|
<p>DOM manipulation became easy</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-content">
|
|
<h4>2009 - Node.js Revolution</h4>
|
|
<p>JavaScript broke out of the browser</p>
|
|
<p>Full-stack development became possible</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-content">
|
|
<h4>Today - Universal Language</h4>
|
|
<p>Web, mobile, desktop, servers, IoT</p>
|
|
<p>Massive ecosystem and community</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section" style="margin-top: 25px; background: #e8f6f3; border-left-color: #1abc9c;">
|
|
<h3>Your Path Forward</h3>
|
|
<p>By learning JavaScript, you're not just learning a programming language - you're gaining access to:</p>
|
|
<ul>
|
|
<li><span class="highlight">Web Development</span> - Create interactive websites and web applications</li>
|
|
<li><span class="highlight">Mobile Development</span> - Build cross-platform mobile apps</li>
|
|
<li><span class="highlight">Backend Development</span> - Create servers and APIs</li>
|
|
<li><span class="highlight">Career Opportunities</span> - Join one of the largest developer communities</li>
|
|
</ul>
|
|
<p style="margin-top: 15px; font-weight: 600; text-align: center;">JavaScript is your gateway to modern software development!</p>
|
|
</div>
|
|
|
|
<div class="nav">
|
|
<button class="btn" onclick="showSlide(6)">← Previous</button>
|
|
<button class="btn" onclick="showSlide(1)">Restart</button>
|
|
</div>
|
|
|
|
<div class="slide-counter">Slide 7 of 7</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showSlide(slideNumber) {
|
|
// Hide all slides
|
|
document.querySelectorAll('.slide').forEach(slide => {
|
|
slide.classList.remove('active');
|
|
});
|
|
|
|
// Show the selected slide
|
|
document.getElementById('slide' + slideNumber).classList.add('active');
|
|
|
|
// Update progress bar
|
|
const progress = document.querySelector('.progress');
|
|
const percentage = (slideNumber / 7) * 100;
|
|
progress.style.width = percentage + '%';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |