forked from technolyceum/g9-m2
1035 lines
47 KiB
HTML
1035 lines
47 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Web Development Curriculum</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
:root {
|
|
--primary: #2c3e50;
|
|
--secondary: #3498db;
|
|
--accent: #e74c3c;
|
|
--light: #ecf0f1;
|
|
--dark: #2c3e50;
|
|
--success: #2ecc71;
|
|
--warning: #f39c12;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, var(--primary), var(--dark));
|
|
color: var(--light);
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
padding: 30px 0;
|
|
margin-bottom: 30px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 15px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.8rem;
|
|
margin-bottom: 10px;
|
|
background: linear-gradient(45deg, var(--secondary), var(--success));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.3rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2rem;
|
|
margin: 25px 0 15px;
|
|
color: var(--secondary);
|
|
border-left: 4px solid var(--accent);
|
|
padding-left: 15px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5rem;
|
|
margin: 20px 0 10px;
|
|
color: var(--success);
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 15px;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.curriculum-overview {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.lesson-card {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 10px;
|
|
padding: 25px;
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
cursor: pointer;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.lesson-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.lesson-card.active {
|
|
border: 2px solid var(--secondary);
|
|
background: rgba(52, 152, 219, 0.2);
|
|
}
|
|
|
|
.lesson-number {
|
|
display: inline-block;
|
|
background: var(--accent);
|
|
color: white;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.lesson-title {
|
|
font-size: 1.4rem;
|
|
margin-bottom: 10px;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.lesson-duration {
|
|
color: var(--warning);
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.slides-container {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.slide {
|
|
display: none;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.slide.active {
|
|
display: block;
|
|
animation: fadeIn 0.5s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.code-block {
|
|
background: #1e272e;
|
|
color: #f8f8f2;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
font-family: 'Consolas', 'Monaco', monospace;
|
|
overflow-x: auto;
|
|
margin: 20px 0;
|
|
border-left: 4px solid var(--secondary);
|
|
font-size: 0.95rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.code-comment { color: #6272a4; }
|
|
.code-keyword { color: #ff79c6; }
|
|
.code-string { color: #f1fa8c; }
|
|
.code-function { color: #50fa7b; }
|
|
.code-variable { color: #8be9fd; }
|
|
.code-tag { color: #ff79c6; }
|
|
.code-attr { color: #50fa7b; }
|
|
|
|
.nav-buttons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
button {
|
|
background: var(--secondary);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 25px;
|
|
border-radius: 50px;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
button:hover {
|
|
background: #2980b9;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
button:disabled {
|
|
background: #7f8c8d;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.slide-indicators {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.indicator {
|
|
padding: 8px 15px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
font-size: 0.9rem;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.indicator:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.indicator.active {
|
|
background: var(--secondary);
|
|
color: white;
|
|
}
|
|
|
|
.info-box {
|
|
background: rgba(52, 152, 219, 0.2);
|
|
border-left: 5px solid var(--secondary);
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border-radius: 0 10px 10px 0;
|
|
}
|
|
|
|
.tip-box {
|
|
background: rgba(46, 204, 113, 0.2);
|
|
border-left: 5px solid var(--success);
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border-radius: 0 10px 10px 0;
|
|
}
|
|
|
|
.warning-box {
|
|
background: rgba(243, 156, 18, 0.2);
|
|
border-left: 5px solid var(--warning);
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border-radius: 0 10px 10px 0;
|
|
}
|
|
|
|
.demo-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 25px 0;
|
|
padding: 20px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.demo-box {
|
|
width: 100%;
|
|
max-width: 600px;
|
|
background: white;
|
|
color: #333;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.two-column {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 30px;
|
|
margin: 25px 0;
|
|
}
|
|
|
|
.learning-objectives {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.learning-objectives ul {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.learning-objectives li {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.activity-box {
|
|
background: rgba(52, 152, 219, 0.1);
|
|
border: 2px dashed var(--secondary);
|
|
padding: 25px;
|
|
margin: 25px 0;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.activity-title {
|
|
color: var(--secondary);
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.two-column {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
.lesson-card {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 6px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 3px;
|
|
margin: 20px 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress {
|
|
height: 100%;
|
|
background: var(--success);
|
|
border-radius: 3px;
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
.lesson-header {
|
|
display: flex;
|
|
justify-content: between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.lesson-topic {
|
|
font-size: 1.2rem;
|
|
color: var(--warning);
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>Web Development Curriculum</h1>
|
|
<p class="subtitle">Advanced HTML, CSS & Web Accessibility</p>
|
|
<div class="progress-bar">
|
|
<div class="progress" id="progressBar" style="width: 20%;"></div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="curriculum-overview">
|
|
<div class="lesson-card active" data-lesson="1">
|
|
<div class="lesson-number">1</div>
|
|
<div class="lesson-title">Advanced HTML Structure</div>
|
|
<div class="lesson-duration">40 minutes</div>
|
|
<p>Master semantic HTML, forms, tables, and modern structural elements.</p>
|
|
</div>
|
|
|
|
<div class="lesson-card" data-lesson="2">
|
|
<div class="lesson-number">2</div>
|
|
<div class="lesson-title">Advanced CSS Layouts</div>
|
|
<div class="lesson-duration">45 minutes</div>
|
|
<p>Explore Flexbox, Grid, and responsive design techniques.</p>
|
|
</div>
|
|
|
|
<div class="lesson-card" data-lesson="3">
|
|
<div class="lesson-number">3</div>
|
|
<div class="lesson-title">Advanced CSS Effects</div>
|
|
<div class="lesson-duration">40 minutes</div>
|
|
<p>Learn animations, transforms, and modern visual effects.</p>
|
|
</div>
|
|
|
|
<div class="lesson-card" data-lesson="4">
|
|
<div class="lesson-number">4</div>
|
|
<div class="lesson-title">Web Accessibility Fundamentals</div>
|
|
<div class="lesson-duration">45 minutes</div>
|
|
<p>Make websites usable for everyone with accessibility best practices.</p>
|
|
</div>
|
|
|
|
<div class="lesson-card" data-lesson="5">
|
|
<div class="lesson-number">5</div>
|
|
<div class="lesson-title">Accessibility Implementation</div>
|
|
<div class="lesson-duration">40 minutes</div>
|
|
<p>Apply accessibility techniques to real projects and test for compliance.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slides-container">
|
|
<!-- Lesson 1: Advanced HTML Structure -->
|
|
<div class="slide active" id="lesson1">
|
|
<div class="lesson-header">
|
|
<h2>Lesson 1: Advanced HTML Structure</h2>
|
|
<div class="lesson-topic">Advanced HTML</div>
|
|
</div>
|
|
|
|
<div class="learning-objectives">
|
|
<h3>Learning Objectives</h3>
|
|
<ul>
|
|
<li>Understand and use semantic HTML5 elements</li>
|
|
<li>Create accessible forms with proper validation</li>
|
|
<li>Build complex table structures</li>
|
|
<li>Implement microdata for SEO</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<strong>Semantic HTML</strong> provides meaning to web content, making it more accessible and improving SEO.
|
|
</div>
|
|
|
|
<h3>Semantic HTML5 Elements</h3>
|
|
<p>Modern HTML5 introduces elements that describe their meaning to browsers and developers:</p>
|
|
|
|
<div class="code-block">
|
|
<span class="code-tag"><header></span><span class="code-comment"><!-- Site or section header --></span><br>
|
|
<span class="code-tag"><nav></span><span class="code-comment"><!-- Navigation menu --></span><br>
|
|
<span class="code-tag"><main></span><span class="code-comment"><!-- Primary content --></span><br>
|
|
<span class="code-tag"><article></span><span class="code-comment"><!-- Self-contained content --></span><br>
|
|
<span class="code-tag"><section></span><span class="code-comment"><!-- Thematic grouping --></span><br>
|
|
<span class="code-tag"><aside></span><span class="code-comment"><!-- Side content --></span><br>
|
|
<span class="code-tag"><footer></span><span class="code-comment"><!-- Site or section footer --></span>
|
|
</div>
|
|
|
|
<div class="demo-container">
|
|
<div class="demo-box">
|
|
<header style="background: #3498db; color: white; padding: 10px; text-align: center;">Header</header>
|
|
<nav style="background: #2c3e50; color: white; padding: 10px;">
|
|
<a href="#" style="color: white; margin-right: 15px;">Home</a>
|
|
<a href="#" style="color: white; margin-right: 15px;">About</a>
|
|
<a href="#" style="color: white;">Contact</a>
|
|
</nav>
|
|
<main style="display: flex; padding: 15px;">
|
|
<article style="flex: 3; padding: 15px; background: #ecf0f1; margin-right: 15px;">
|
|
<h4>Article Title</h4>
|
|
<p>This is the main content area.</p>
|
|
</article>
|
|
<aside style="flex: 1; padding: 15px; background: #bdc3c7;">
|
|
<h4>Sidebar</h4>
|
|
<p>Additional content here.</p>
|
|
</aside>
|
|
</main>
|
|
<footer style="background: #34495e; color: white; padding: 10px; text-align: center;">Footer</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Advanced Forms</h3>
|
|
<p>HTML5 introduced new input types and attributes for better user experience and validation:</p>
|
|
|
|
<div class="code-block">
|
|
<span class="code-tag"><form</span> <span class="code-attr">id=</span><span class="code-string">"user-form"</span><span class="code-tag">></span><br>
|
|
<span class="code-tag"><label</span> <span class="code-attr">for=</span><span class="code-string">"email"</span><span class="code-tag">></span>Email:<span class="code-tag"></label></span><br>
|
|
<span class="code-tag"><input</span> <span class="code-attr">type=</span><span class="code-string">"email"</span> <span class="code-attr">id=</span><span class="code-string">"email"</span> <span class="code-attr">required</span><span class="code-tag">></span><br><br>
|
|
<span class="code-tag"><label</span> <span class="code-attr">for=</span><span class="code-string">"birthdate"</span><span class="code-tag">></span>Birthdate:<span class="code-tag"></label></span><br>
|
|
<span class="code-tag"><input</span> <span class="code-attr">type=</span><span class="code-string">"date"</span> <span class="code-attr">id=</span><span class="code-string">"birthdate"</span><span class="code-tag">></span><br><br>
|
|
<span class="code-tag"><label</span> <span class="code-attr">for=</span><span class="code-string">"range"</span><span class="code-tag">></span>Volume:<span class="code-tag"></label></span><br>
|
|
<span class="code-tag"><input</span> <span class="code-attr">type=</span><span class="code-string">"range"</span> <span class="code-attr">id=</span><span class="code-string">"range"</span> <span class="code-attr">min=</span><span class="code-string">"0"</span> <span class="code-attr">max=</span><span class="code-string">"100"</span><span class="code-tag">></span><br><br>
|
|
<span class="code-tag"><button</span> <span class="code-attr">type=</span><span class="code-string">"submit"</span><span class="code-tag">></span>Submit<span class="code-tag"></button></span><br>
|
|
<span class="code-tag"></form></span>
|
|
</div>
|
|
|
|
<div class="activity-box">
|
|
<div class="activity-title">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
<polyline points="14,2 14,8 20,8"></polyline>
|
|
<line x1="16" y1="13" x2="8" y2="13"></line>
|
|
<line x1="16" y1="17" x2="8" y2="17"></line>
|
|
<polyline points="10,9 9,9 8,9"></polyline>
|
|
</svg>
|
|
Hands-On Activity
|
|
</div>
|
|
<p><strong>Create a Semantic Webpage</strong></p>
|
|
<p>Build a simple webpage using at least 5 different semantic HTML5 elements. Include a header, navigation, main content area with articles, and a footer.</p>
|
|
</div>
|
|
|
|
<div class="tip-box">
|
|
<strong>Pro Tip:</strong> Always use the most specific semantic element available. This improves accessibility and helps search engines understand your content.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lesson 2: Advanced CSS Layouts -->
|
|
<div class="slide" id="lesson2">
|
|
<div class="lesson-header">
|
|
<h2>Lesson 2: Advanced CSS Layouts</h2>
|
|
<div class="lesson-topic">Advanced CSS</div>
|
|
</div>
|
|
|
|
<div class="learning-objectives">
|
|
<h3>Learning Objectives</h3>
|
|
<ul>
|
|
<li>Master CSS Flexbox for 1D layouts</li>
|
|
<li>Implement CSS Grid for 2D layouts</li>
|
|
<li>Create responsive designs with media queries</li>
|
|
<li>Use modern layout techniques effectively</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<strong>CSS Flexbox</strong> is designed for one-dimensional layouts, while <strong>CSS Grid</strong> excels at two-dimensional layouts.
|
|
</div>
|
|
|
|
<div class="two-column">
|
|
<div>
|
|
<h3>Flexbox Fundamentals</h3>
|
|
<p>Flexbox makes it easy to design flexible responsive layout structures.</p>
|
|
|
|
<div class="code-block">
|
|
<span class="code-comment">/* Container properties */</span><br>
|
|
<span class="code-variable">.container</span> {<br>
|
|
<span class="code-keyword">display</span>: flex;<br>
|
|
<span class="code-keyword">flex-direction</span>: row;<br>
|
|
<span class="code-keyword">justify-content</span>: space-between;<br>
|
|
<span class="code-keyword">align-items</span>: center;<br>
|
|
}<br><br>
|
|
<span class="code-comment">/* Item properties */</span><br>
|
|
<span class="code-variable">.item</span> {<br>
|
|
<span class="code-keyword">flex</span>: 1;<br>
|
|
<span class="code-keyword">align-self</span>: flex-start;<br>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>CSS Grid Basics</h3>
|
|
<p>Grid is the most powerful layout system available in CSS.</p>
|
|
|
|
<div class="code-block">
|
|
<span class="code-comment">/* Container properties */</span><br>
|
|
<span class="code-variable">.container</span> {<br>
|
|
<span class="code-keyword">display</span>: grid;<br>
|
|
<span class="code-keyword">grid-template-columns</span>: 1fr 1fr 1fr;<br>
|
|
<span class="code-keyword">grid-gap</span>: 20px;<br>
|
|
<span class="code-keyword">grid-template-areas</span>: <br>
|
|
"header header header"<br>
|
|
"main main sidebar"<br>
|
|
"footer footer footer";<br>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-container">
|
|
<div class="demo-box">
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 20px;">
|
|
<div style="background: #3498db; color: white; padding: 20px; text-align: center;">Grid Item 1</div>
|
|
<div style="background: #2ecc71; color: white; padding: 20px; text-align: center;">Grid Item 2</div>
|
|
<div style="background: #e74c3c; color: white; padding: 20px; text-align: center;">Grid Item 3</div>
|
|
</div>
|
|
|
|
<div style="display: flex; justify-content: space-between;">
|
|
<div style="background: #9b59b6; color: white; padding: 20px; text-align: center; flex: 1; margin-right: 10px;">Flex Item 1</div>
|
|
<div style="background: #f39c12; color: white; padding: 20px; text-align: center; flex: 2;">Flex Item 2</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Responsive Design with Media Queries</h3>
|
|
<p>Media queries allow you to apply CSS rules based on device characteristics.</p>
|
|
|
|
<div class="code-block">
|
|
<span class="code-comment">/* Mobile-first approach */</span><br>
|
|
<span class="code-variable">.container</span> {<br>
|
|
<span class="code-keyword">padding</span>: 10px;<br>
|
|
}<br><br>
|
|
<span class="code-comment">/* Tablet */</span><br>
|
|
<span class="code-keyword">@media</span> (<span class="code-keyword">min-width</span>: 768px) {<br>
|
|
<span class="code-variable">.container</span> {<br>
|
|
<span class="code-keyword">padding</span>: 20px;<br>
|
|
<span class="code-keyword">display</span>: grid;<br>
|
|
<span class="code-keyword">grid-template-columns</span>: 1fr 1fr;<br>
|
|
}<br>
|
|
}<br><br>
|
|
<span class="code-comment">/* Desktop */</span><br>
|
|
<span class="code-keyword">@media</span> (<span class="code-keyword">min-width</span>: 1024px) {<br>
|
|
<span class="code-variable">.container</span> {<br>
|
|
<span class="code-keyword">grid-template-columns</span>: 1fr 1fr 1fr;<br>
|
|
}<br>
|
|
}
|
|
</div>
|
|
|
|
<div class="activity-box">
|
|
<div class="activity-title">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
<polyline points="14,2 14,8 20,8"></polyline>
|
|
<line x1="16" y1="13" x2="8" y2="13"></line>
|
|
<line x1="16" y1="17" x2="8" y2="17"></line>
|
|
<polyline points="10,9 9,9 8,9"></polyline>
|
|
</svg>
|
|
Hands-On Activity
|
|
</div>
|
|
<p><strong>Build a Responsive Layout</strong></p>
|
|
<p>Create a webpage that uses Flexbox for a navigation bar and CSS Grid for the main content area. Make it responsive with media queries for mobile, tablet, and desktop views.</p>
|
|
</div>
|
|
|
|
<div class="tip-box">
|
|
<strong>Pro Tip:</strong> Start with mobile styles first, then use min-width media queries to progressively enhance the layout for larger screens (mobile-first approach).
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional lessons would continue here -->
|
|
<!-- Lesson 3, 4, and 5 slides would follow the same pattern -->
|
|
|
|
<!-- Lesson 3: Advanced CSS Effects -->
|
|
<div class="slide" id="lesson3">
|
|
<div class="lesson-header">
|
|
<h2>Lesson 3: Advanced CSS Effects</h2>
|
|
<div class="lesson-topic">Advanced CSS 2</div>
|
|
</div>
|
|
|
|
<div class="learning-objectives">
|
|
<h3>Learning Objectives</h3>
|
|
<ul>
|
|
<li>Create smooth CSS animations and transitions</li>
|
|
<li>Apply 2D and 3D transforms to elements</li>
|
|
<li>Use advanced visual effects like gradients and shadows</li>
|
|
<li>Implement modern CSS features like custom properties</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<strong>CSS Transforms and Animations</strong> can create engaging user experiences without JavaScript.
|
|
</div>
|
|
|
|
<h3>CSS Transitions and Animations</h3>
|
|
<p>Transitions allow property changes to occur smoothly over time, while animations provide more control over intermediate steps.</p>
|
|
|
|
<div class="code-block">
|
|
<span class="code-comment">/* Transition example */</span><br>
|
|
<span class="code-variable">.button</span> {<br>
|
|
<span class="code-keyword">background</span>: #3498db;<br>
|
|
<span class="code-keyword">transition</span>: background 0.3s ease, transform 0.2s;<br>
|
|
}<br><br>
|
|
<span class="code-variable">.button:hover</span> {<br>
|
|
<span class="code-keyword">background</span>: #2980b9;<br>
|
|
<span class="code-keyword">transform</span>: scale(1.05);<br>
|
|
}<br><br>
|
|
<span class="code-comment">/* Animation example */</span><br>
|
|
<span class="code-keyword">@keyframes</span> slideIn {<br>
|
|
<span class="code-keyword">from</span> { <span class="code-keyword">transform</span>: translateX(-100%); }<br>
|
|
<span class="code-keyword">to</span> { <span class="code-keyword">transform</span>: translateX(0); }<br>
|
|
}<br><br>
|
|
<span class="code-variable">.slide-element</span> {<br>
|
|
<span class="code-keyword">animation</span>: slideIn 0.5s ease-out;<br>
|
|
}
|
|
</div>
|
|
|
|
<h3>CSS Custom Properties (Variables)</h3>
|
|
<p>Custom properties allow you to store and reuse values throughout your CSS.</p>
|
|
|
|
<div class="code-block">
|
|
<span class="code-comment">/* Define custom properties */</span><br>
|
|
<span class="code-variable">:root</span> {<br>
|
|
<span class="code-keyword">--primary-color</span>: #3498db;<br>
|
|
<span class="code-keyword">--spacing-unit</span>: 1rem;<br>
|
|
<span class="code-keyword">--border-radius</span>: 8px;<br>
|
|
}<br><br>
|
|
<span class="code-comment">/* Use custom properties */</span><br>
|
|
<span class="code-variable">.card</span> {<br>
|
|
<span class="code-keyword">background</span>: white;<br>
|
|
<span class="code-keyword">padding</span>: var(--spacing-unit);<br>
|
|
<span class="code-keyword">border-radius</span>: var(--border-radius);<br>
|
|
<span class="code-keyword">border</span>: 2px solid var(--primary-color);<br>
|
|
}
|
|
</div>
|
|
|
|
<div class="activity-box">
|
|
<div class="activity-title">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
<polyline points="14,2 14,8 20,8"></polyline>
|
|
<line x1="16" y1="13" x2="8" y2="13"></line>
|
|
<line x1="16" y1="17" x2="8" y2="17"></line>
|
|
<polyline points="10,9 9,9 8,9"></polyline>
|
|
</svg>
|
|
Hands-On Activity
|
|
</div>
|
|
<p><strong>Create an Animated Interface</strong></p>
|
|
<p>Build a card component that uses CSS transitions for hover effects and a simple animation when the page loads. Use CSS custom properties to make the design easily customizable.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lesson 4: Web Accessibility Fundamentals -->
|
|
<div class="slide" id="lesson4">
|
|
<div class="lesson-header">
|
|
<h2>Lesson 4: Web Accessibility Fundamentals</h2>
|
|
<div class="lesson-topic">Web Accessibility</div>
|
|
</div>
|
|
|
|
<div class="learning-objectives">
|
|
<h3>Learning Objectives</h3>
|
|
<ul>
|
|
<li>Understand the importance of web accessibility</li>
|
|
<li>Learn WCAG guidelines and principles</li>
|
|
<li>Implement proper semantic structure for screen readers</li>
|
|
<li>Create keyboard-navigable interfaces</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<strong>Web Accessibility</strong> ensures that people with disabilities can perceive, understand, navigate, and interact with the web.
|
|
</div>
|
|
|
|
<h3>WCAG Principles (POUR)</h3>
|
|
<p>The Web Content Accessibility Guidelines are built on four principles:</p>
|
|
|
|
<div class="two-column">
|
|
<div>
|
|
<h4>Perceivable</h4>
|
|
<p>Information and UI components must be presentable to users in ways they can perceive.</p>
|
|
<ul>
|
|
<li>Text alternatives for non-text content</li>
|
|
<li>Captions and other alternatives for multimedia</li>
|
|
<li>Content that can be presented in different ways</li>
|
|
<li>Easy-to-see and -hear content</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4>Operable</h4>
|
|
<p>UI components and navigation must be operable by all users.</p>
|
|
<ul>
|
|
<li>Keyboard accessibility</li>
|
|
<li>Enough time to read and use content</li>
|
|
<li>Content that does not cause seizures</li>
|
|
<li>Easy navigation</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="two-column">
|
|
<div>
|
|
<h4>Understandable</h4>
|
|
<p>Information and operation of UI must be understandable.</p>
|
|
<ul>
|
|
<li>Readable and predictable text</li>
|
|
<li>Input assistance for forms</li>
|
|
<li>Consistent navigation</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4>Robust</h4>
|
|
<p>Content must be robust enough to work with current and future user tools.</p>
|
|
<ul>
|
|
<li>Compatible with assistive technologies</li>
|
|
<li>Valid and well-structured HTML</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Accessible HTML Practices</h3>
|
|
<p>Proper HTML structure is the foundation of accessibility:</p>
|
|
|
|
<div class="code-block">
|
|
<span class="code-comment"><!-- Use semantic elements --></span><br>
|
|
<span class="code-tag"><nav</span> <span class="code-attr">aria-label=</span><span class="code-string">"Main navigation"</span><span class="code-tag">></span><br>
|
|
<span class="code-tag"><ul></span><br>
|
|
<span class="code-tag"><li><a</span> <span class="code-attr">href=</span><span class="code-string">"#"</span><span class="code-tag">></span>Home<span class="code-tag"></a></li></span><br>
|
|
<span class="code-tag"><li><a</span> <span class="code-attr">href=</span><span class="code-string">"#"</span><span class="code-tag">></span>About<span class="code-tag"></a></li></span><br>
|
|
<span class="code-tag"></ul></span><br>
|
|
<span class="code-tag"></nav></span><br><br>
|
|
<span class="code-comment"><!-- Provide text alternatives --></span><br>
|
|
<span class="code-tag"><img</span> <span class="code-attr">src=</span><span class="code-string">"chart.jpg"</span> <span class="code-attr">alt=</span><span class="code-string">"Bar chart showing sales growth from 2018 to 2022"</span><span class="code-tag">></span><br><br>
|
|
<span class="code-comment"><!-- Use proper form labels --></span><br>
|
|
<span class="code-tag"><label</span> <span class="code-attr">for=</span><span class="code-string">"username"</span><span class="code-tag">></span>Username:<span class="code-tag"></label></span><br>
|
|
<span class="code-tag"><input</span> <span class="code-attr">type=</span><span class="code-string">"text"</span> <span class="code-attr">id=</span><span class="code-string">"username"</span> <span class="code-attr">name=</span><span class="code-string">"username"</span><span class="code-tag">></span>
|
|
</div>
|
|
|
|
<div class="activity-box">
|
|
<div class="activity-title">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
<polyline points="14,2 14,8 20,8"></polyline>
|
|
<line x1="16" y1="13" x2="8" y2="13"></line>
|
|
<line x1="16" y1="17" x2="8" y2="17"></line>
|
|
<polyline points="10,9 9,9 8,9"></polyline>
|
|
</svg>
|
|
Hands-On Activity
|
|
</div>
|
|
<p><strong>Audit and Improve Accessibility</strong></p>
|
|
<p>Take an existing webpage (or create a simple one) and identify at least 5 accessibility issues. Then fix those issues using proper semantic HTML, ARIA attributes, and accessibility best practices.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lesson 5: Accessibility Implementation -->
|
|
<div class="slide" id="lesson5">
|
|
<div class="lesson-header">
|
|
<h2>Lesson 5: Accessibility Implementation</h2>
|
|
<div class="lesson-topic">Web Accessibility</div>
|
|
</div>
|
|
|
|
<div class="learning-objectives">
|
|
<h3>Learning Objectives</h3>
|
|
<ul>
|
|
<li>Use ARIA attributes to enhance accessibility</li>
|
|
<li>Implement keyboard navigation and focus management</li>
|
|
<li>Test websites for accessibility compliance</li>
|
|
<li>Apply accessibility techniques to complex components</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<strong>ARIA (Accessible Rich Internet Applications)</strong> provides attributes to make web content more accessible when native HTML isn't sufficient.
|
|
</div>
|
|
|
|
<h3>ARIA Attributes and Roles</h3>
|
|
<p>ARIA helps communicate information about elements to assistive technologies:</p>
|
|
|
|
<div class="code-block">
|
|
<span class="code-comment"><!-- ARIA roles --></span><br>
|
|
<span class="code-tag"><div</span> <span class="code-attr">role=</span><span class="code-string">"navigation"</span> <span class="code-attr">aria-label=</span><span class="code-string">"Main menu"</span><span class="code-tag">></span><br>
|
|
<span class="code-comment"><!-- navigation content --></span><br>
|
|
<span class="code-tag"></div></span><br><br>
|
|
<span class="code-comment"><!-- ARIA states and properties --></span><br>
|
|
<span class="code-tag"><button</span> <span class="code-attr">aria-expanded=</span><span class="code-string">"false"</span> <span class="code-attr">aria-controls=</span><span class="code-string">"dropdown1"</span><span class="code-tag">></span><br>
|
|
Menu<br>
|
|
<span class="code-tag"></button></span><br>
|
|
<span class="code-tag"><ul</span> <span class="code-attr">id=</span><span class="code-string">"dropdown1"</span> <span class="code-attr">aria-hidden=</span><span class="code-string">"true"</span><span class="code-tag">></span><br>
|
|
<span class="code-tag"><li><a</span> <span class="code-attr">href=</span><span class="code-string">"#"</span><span class="code-tag">></span>Item 1<span class="code-tag"></a></li></span><br>
|
|
<span class="code-tag"><li><a</span> <span class="code-attr">href=</span><span class="code-string">"#"</span><span class="code-tag">></span>Item 2<span class="code-tag"></a></li></span><br>
|
|
<span class="code-tag"></ul></span><br><br>
|
|
<span class="code-comment"><!-- ARIA live regions --></span><br>
|
|
<span class="code-tag"><div</span> <span class="code-attr">aria-live=</span><span class="code-string">"polite"</span> <span class="code-attr">aria-atomic=</span><span class="code-string">"true"</span><span class="code-tag">></span><br>
|
|
<span class="code-comment"><!-- Dynamic content will be announced --></span><br>
|
|
<span class="code-tag"></div></span>
|
|
</div>
|
|
|
|
<h3>Keyboard Accessibility</h3>
|
|
<p>Ensure all interactive elements can be operated with a keyboard:</p>
|
|
|
|
<div class="code-block">
|
|
<span class="code-comment">/* Focus styles */</span><br>
|
|
<span class="code-variable">button:focus</span>,<br>
|
|
<span class="code-variable">a:focus</span>,<br>
|
|
<span class="code-variable">input:focus</span> {<br>
|
|
<span class="code-keyword">outline</span>: 2px solid #3498db;<br>
|
|
<span class="code-keyword">outline-offset</span>: 2px;<br>
|
|
}<br><br>
|
|
<span class="code-comment">/* Skip link for keyboard users */</span><br>
|
|
<span class="code-variable">.skip-link</span> {<br>
|
|
<span class="code-keyword">position</span>: absolute;<br>
|
|
<span class="code-keyword">top</span>: -40px;<br>
|
|
<span class="code-keyword">left</span>: 6px;<br>
|
|
<span class="code-keyword">background</span>: #e74c3c;<br>
|
|
<span class="code-keyword">color</span>: white;<br>
|
|
<span class="code-keyword">padding</span>: 8px;<br>
|
|
<span class="code-keyword">z-index</span>: 100;<br>
|
|
<span class="code-keyword">text-decoration</span>: none;<br>
|
|
}<br><br>
|
|
<span class="code-variable">.skip-link:focus</span> {<br>
|
|
<span class="code-keyword">top</span>: 6px;<br>
|
|
}
|
|
</div>
|
|
|
|
<h3>Accessibility Testing</h3>
|
|
<p>Several tools can help you test and improve accessibility:</p>
|
|
|
|
<ul>
|
|
<li><strong>Automated tools:</strong> axe, WAVE, Lighthouse</li>
|
|
<li><strong>Screen readers:</strong> NVDA (Windows), VoiceOver (Mac)</li>
|
|
<li><strong>Manual testing:</strong> Keyboard navigation, color contrast checkers</li>
|
|
</ul>
|
|
|
|
<div class="activity-box">
|
|
<div class="activity-title">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
<polyline points="14,2 14,8 20,8"></polyline>
|
|
<line x1="16" y1="13" x2="8" y2="13"></line>
|
|
<line x1="16" y1="17" x2="8" y2="17"></line>
|
|
<polyline points="10,9 9,9 8,9"></polyline>
|
|
</svg>
|
|
Hands-On Activity
|
|
</div>
|
|
<p><strong>Build an Accessible Component</strong></p>
|
|
<p>Create an accessible modal dialog or tab component that includes proper ARIA attributes, keyboard navigation, and focus management. Test it with a screen reader and keyboard-only navigation.</p>
|
|
</div>
|
|
|
|
<div class="tip-box">
|
|
<strong>Pro Tip:</strong> Remember the first rule of ARIA - don't use ARIA if you can use native HTML elements with the required semantics and behavior.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button id="prevBtn" disabled>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="15,18 9,12 15,6"></polyline>
|
|
</svg>
|
|
Previous Lesson
|
|
</button>
|
|
<button id="nextBtn">
|
|
Next Lesson
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="9,18 15,12 9,6"></polyline>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="slide-indicators" id="slideIndicators">
|
|
<!-- Indicators will be added by JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Curriculum navigation system
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const lessonCards = document.querySelectorAll('.lesson-card');
|
|
const slides = document.querySelectorAll('.slide');
|
|
const prevBtn = document.getElementById('prevBtn');
|
|
const nextBtn = document.getElementById('nextBtn');
|
|
const indicatorsContainer = document.getElementById('slideIndicators');
|
|
const progressBar = document.getElementById('progressBar');
|
|
|
|
let currentLesson = 1;
|
|
let currentSlide = 0;
|
|
|
|
// Create indicators for each lesson
|
|
slides.forEach((slide, index) => {
|
|
const indicator = document.createElement('div');
|
|
indicator.className = 'indicator';
|
|
indicator.textContent = `Lesson ${index + 1}`;
|
|
if (index === 0) indicator.classList.add('active');
|
|
indicator.addEventListener('click', () => goToLesson(index + 1));
|
|
indicatorsContainer.appendChild(indicator);
|
|
});
|
|
|
|
// Lesson card click handlers
|
|
lessonCards.forEach(card => {
|
|
card.addEventListener('click', function() {
|
|
const lessonNumber = parseInt(this.getAttribute('data-lesson'));
|
|
goToLesson(lessonNumber);
|
|
});
|
|
});
|
|
|
|
// Navigation functions
|
|
function goToLesson(lessonNumber) {
|
|
// Update active lesson card
|
|
lessonCards.forEach(card => {
|
|
card.classList.remove('active');
|
|
if (parseInt(card.getAttribute('data-lesson')) === lessonNumber) {
|
|
card.classList.add('active');
|
|
}
|
|
});
|
|
|
|
// Hide all slides
|
|
slides.forEach(slide => {
|
|
slide.classList.remove('active');
|
|
});
|
|
|
|
// Show selected lesson slide
|
|
document.getElementById(`lesson${lessonNumber}`).classList.add('active');
|
|
|
|
// Update indicators
|
|
const indicators = indicatorsContainer.querySelectorAll('.indicator');
|
|
indicators.forEach((indicator, index) => {
|
|
indicator.classList.remove('active');
|
|
if (index === lessonNumber - 1) {
|
|
indicator.classList.add('active');
|
|
}
|
|
});
|
|
|
|
// Update progress bar
|
|
const progress = (lessonNumber / slides.length) * 100;
|
|
progressBar.style.width = `${progress}%`;
|
|
|
|
// Update current lesson and slide
|
|
currentLesson = lessonNumber;
|
|
currentSlide = lessonNumber - 1;
|
|
|
|
// Update button states
|
|
updateButtonStates();
|
|
}
|
|
|
|
function nextLesson() {
|
|
if (currentLesson < slides.length) {
|
|
goToLesson(currentLesson + 1);
|
|
}
|
|
}
|
|
|
|
function prevLesson() {
|
|
if (currentLesson > 1) {
|
|
goToLesson(currentLesson - 1);
|
|
}
|
|
}
|
|
|
|
function updateButtonStates() {
|
|
prevBtn.disabled = currentLesson === 1;
|
|
nextBtn.disabled = currentLesson === slides.length;
|
|
|
|
// Update button text for last lesson
|
|
if (currentLesson === slides.length) {
|
|
nextBtn.textContent = 'Complete Course';
|
|
} else {
|
|
nextBtn.textContent = 'Next Lesson';
|
|
}
|
|
}
|
|
|
|
// Event listeners
|
|
nextBtn.addEventListener('click', nextLesson);
|
|
prevBtn.addEventListener('click', prevLesson);
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'ArrowRight') nextLesson();
|
|
if (e.key === 'ArrowLeft') prevLesson();
|
|
});
|
|
|
|
// Initialize
|
|
updateButtonStates();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |