1241 lines
44 KiB
HTML
1241 lines
44 KiB
HTML
<!DOCTYPE html>
|
|
<!-- saved from url=(0063)file:///Users/home/Downloads/deepseek_html_20260114_749bf2.html -->
|
|
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Building a Social Media Platform with Bulma CSS</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background: #f8fafc;
|
|
color: #1a202c;
|
|
overflow-x: hidden;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.presentation-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.slide {
|
|
display: none;
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 40px;
|
|
margin: 20px auto;
|
|
max-width: 1000px;
|
|
width: 90%;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.slide.active {
|
|
display: block;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
color: #2d3748;
|
|
margin-bottom: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
text-align: center;
|
|
margin-bottom: 15px;
|
|
color: #2d3748;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2rem;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5rem;
|
|
color: #4f46e5;
|
|
margin-top: 20px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 15px;
|
|
font-size: 1.1rem;
|
|
color: #4a5568;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
ul, ol {
|
|
margin-left: 25px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 8px;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.code-block {
|
|
background: #1a202c;
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border-left: 4px solid #4f46e5;
|
|
font-family: 'Courier New', monospace;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.code-block code {
|
|
color: #e2e8f0;
|
|
font-size: 0.95rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.code-to-type {
|
|
background-color: #f7fafc;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-family: 'Courier New', monospace;
|
|
color: #2d3748;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.instruction-box {
|
|
background: #f7fafc;
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border-left: 4px solid #4f46e5;
|
|
}
|
|
|
|
.instruction-box h4 {
|
|
color: #2d3748;
|
|
margin-bottom: 10px;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.test-box {
|
|
background: #f0fff4;
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border-left: 4px solid #48bb78;
|
|
}
|
|
|
|
.test-box h4 {
|
|
color: #2d3748;
|
|
margin-bottom: 10px;
|
|
font-size: 1.2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.test-box h4::before {
|
|
content: "💻";
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.emoji-instructions {
|
|
background: #fef3c7;
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border-left: 4px solid #f59e0b;
|
|
}
|
|
|
|
.quiz-question {
|
|
background: #f7fafc;
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.quiz-options {
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.quiz-option {
|
|
background: white;
|
|
border-radius: 6px;
|
|
padding: 12px 15px;
|
|
margin: 10px 0;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border: 1px solid #e2e8f0;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.quiz-option:hover {
|
|
background: #edf2f7;
|
|
border-color: #cbd5e0;
|
|
}
|
|
|
|
.quiz-option.selected {
|
|
background: #e6fffa;
|
|
border-color: #38b2ac;
|
|
}
|
|
|
|
.quiz-option.correct {
|
|
background: #f0fff4;
|
|
border-color: #48bb78;
|
|
}
|
|
|
|
.quiz-option.incorrect {
|
|
background: #fff5f5;
|
|
border-color: #fc8181;
|
|
}
|
|
|
|
.quiz-feedback {
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
margin-top: 15px;
|
|
display: none;
|
|
background: #f7fafc;
|
|
border-left: 4px solid transparent;
|
|
}
|
|
|
|
.quiz-feedback.correct {
|
|
border-left-color: #48bb78;
|
|
display: none;
|
|
}
|
|
|
|
.quiz-feedback.incorrect {
|
|
border-left-color: #fc8181;
|
|
display: none;
|
|
}
|
|
|
|
.challenge-item {
|
|
background: #f7fafc;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.challenge-checkbox {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 15px;
|
|
border-radius: 4px;
|
|
border: 2px solid #4f46e5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
background: white;
|
|
}
|
|
|
|
.challenge-checkbox.checked {
|
|
background: #4f46e5;
|
|
}
|
|
|
|
.challenge-checkbox.checked::after {
|
|
content: "✓";
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.nav-buttons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.nav-button {
|
|
background: white;
|
|
color: #4f46e5;
|
|
border: 1px solid #4f46e5;
|
|
padding: 12px 25px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.nav-button:hover {
|
|
background: #4f46e5;
|
|
color: white;
|
|
}
|
|
|
|
.nav-button:disabled {
|
|
background: #e2e8f0;
|
|
border-color: #cbd5e0;
|
|
color: #a0aec0;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.slide-indicator {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.indicator-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: #cbd5e0;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.indicator-dot.active {
|
|
background: #4f46e5;
|
|
}
|
|
|
|
.slide-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.slide-number {
|
|
color: #718096;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.project-preview {
|
|
background: #f7fafc;
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.big-emoji {
|
|
font-size: 4rem;
|
|
text-align: center;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.focus-point {
|
|
background: #e6fffa;
|
|
border-left: 4px solid #38b2ac;
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.terminal {
|
|
background: #1a202c;
|
|
color: #48bb78;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
font-family: 'Courier New', monospace;
|
|
margin: 15px 0;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.terminal-command {
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
.terminal-comment {
|
|
color: #718096;
|
|
}
|
|
|
|
.before-after {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.before, .after {
|
|
flex: 1;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.before {
|
|
background: #fff5f5;
|
|
border: 1px solid #fed7d7;
|
|
}
|
|
|
|
.after {
|
|
background: #f0fff4;
|
|
border: 1px solid #c6f6d5;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.slide {
|
|
padding: 25px;
|
|
width: 95%;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.big-emoji {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.before-after {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="presentation-container">
|
|
<!-- Slide 0: Title Slide -->
|
|
<div class="slide" id="slide0">
|
|
<div class="slide-header">
|
|
<h1>Build a Social Media Platform with Bulma CSS</h1>
|
|
<div class="slide-number">Slide 1 of 14</div>
|
|
</div>
|
|
|
|
<div class="project-preview">
|
|
<div class="big-emoji">🌐</div>
|
|
<h2>Maxy - Modern Social Platform</h2>
|
|
<p>Transform basic HTML into a fully styled social media website</p>
|
|
</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>What You'll Build</h4>
|
|
<p>A responsive social media platform with:</p>
|
|
<ul>
|
|
<li>Professional navigation bar</li>
|
|
<li>Three-column responsive layout</li>
|
|
<li>Styled cards for user profiles and posts</li>
|
|
<li>Interactive buttons and components</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 1: What is Bulma? -->
|
|
<div class="slide" id="slide1">
|
|
<div class="slide-header">
|
|
<h2>What is Bulma CSS?</h2>
|
|
<div class="slide-number">Slide 2 of 14</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">🎨</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Bulma is a Modern CSS Framework</h4>
|
|
<p>Bulma is a free, open-source CSS framework based on Flexbox. It provides ready-to-use frontend components for building modern, responsive websites.</p>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Key Features of Bulma:</h4>
|
|
<ul>
|
|
<li><strong>Responsive</strong>: Works on mobile, tablet, and desktop</li>
|
|
<li><strong>Flexbox-based</strong>: Uses modern CSS technology for layout</li>
|
|
<li><strong>Pure CSS</strong>: No JavaScript dependency</li>
|
|
<li><strong>Modular</strong>: Pick and choose only what you need</li>
|
|
<li><strong>Modern</strong>: Clean, minimalist design by default</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="focus-point">
|
|
<p>Unlike some other frameworks, Bulma is <strong>pure CSS</strong> - it doesn't require JavaScript to function, making it lightweight and easy to use!</p>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 2: Setup Instructions -->
|
|
<div class="slide" id="slide2">
|
|
<div class="slide-header">
|
|
<h2>Step-by-Step Setup Guide</h2>
|
|
<div class="slide-number">Slide 3 of 14</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">🔧</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Before We Start - Install Git</h4>
|
|
<p>We'll use Git to download our starter template. Follow these steps:</p>
|
|
</div>
|
|
|
|
<div class="before-after">
|
|
<div class="before">
|
|
<h4>For Windows:</h4>
|
|
<ol>
|
|
<li>Go to <a href="https://git-scm.com/download/win" target="_blank">git-scm.com/download/win</a></li>
|
|
<li>Download and run the installer</li>
|
|
<li>Click "Next" through all the options (defaults are fine)</li>
|
|
<li>When finished, open PowerShell</li>
|
|
</ol>
|
|
</div>
|
|
<div class="after">
|
|
<h4>For Mac:</h4>
|
|
<ol>
|
|
<li>Open Terminal (search in Spotlight)</li>
|
|
<li>Type: <span class="code-to-type">git --version</span></li>
|
|
<li>If Git is not installed, it will prompt you to install it</li>
|
|
<li>Follow the installation instructions</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Let's Test Git Installation:</h4>
|
|
<div class="terminal">
|
|
<span class="terminal-command">git --version</span><br>
|
|
<span class="terminal-comment"># If installed correctly, you'll see something like: git version 2.45.0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 3: Create Project Folder -->
|
|
<div class="slide active" id="slide3">
|
|
<div class="slide-header">
|
|
<h2>Create Your Project Folder</h2>
|
|
<div class="slide-number">Slide 4 of 14</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">📁</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Step 1: Open PowerShell/Terminal</h4>
|
|
<p>Let's create a folder for our project:</p>
|
|
</div>
|
|
|
|
<div class="terminal">
|
|
<span class="terminal-comment"># First, go to your Documents folder</span><br>
|
|
<span class="terminal-command">cd documents</span><br><br>
|
|
|
|
<span class="terminal-comment"># Create a new folder with YOUR name (replace "yourname" with your actual name)</span><br>
|
|
<span class="terminal-command">mkdir yourname-social-project</span><br><br>
|
|
|
|
<span class="terminal-comment"># Go into your new folder</span><br>
|
|
<span class="terminal-command">cd yourname-social-project</span><br><br>
|
|
|
|
<span class="terminal-comment"># Check where you are</span><br>
|
|
<span class="terminal-command">pwd</span><br>
|
|
<span class="terminal-comment"># (Windows: use 'dir' to see files)</span>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Important Note:</h4>
|
|
<p>If you just installed Git on Windows, <strong>close and reopen PowerShell</strong> before continuing. This ensures Git commands work properly.</p>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 4: Gitea Setup -->
|
|
<div class="slide" id="slide4">
|
|
<div class="slide-header">
|
|
<h2>Get the Starter Template</h2>
|
|
<div class="slide-number">Slide 5 of 14</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">🚀</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Step 2: Go to Gitea</h4>
|
|
<p>Now we'll get our starter code:</p>
|
|
<ol>
|
|
<li>Open your web browser</li>
|
|
<li>Go to: <a href="https://gitea.techshare.cc/technolyceum/g11-m3" target="_blank">https://gitea.techshare.cc/technolyceum/g11-m3</a></li>
|
|
<li><strong>Login with your username</strong> (ask your teacher if you don't have one)</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Step 3: Use the Template</h4>
|
|
<ol>
|
|
<li>Click "Use this template" button</li>
|
|
<li>Name it: <span class="code-to-type">yourname-social-project</span> (use YOUR name)</li>
|
|
<li>Choose one template item from the dropdown</li>
|
|
<li>Click "Create repository"</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="focus-point">
|
|
<p>Remember to use <strong>YOUR ACTUAL NAME</strong> in the project name! This helps your teacher identify your work.</p>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 5: Clone the Repository -->
|
|
<div class="slide" id="slide5">
|
|
<div class="slide-header">
|
|
<h2>Clone Your Template</h2>
|
|
<div class="slide-number">Slide 6 of 14</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">📋</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Step 4: Copy the Clone URL</h4>
|
|
<p>After creating your repository:</p>
|
|
<ol>
|
|
<li>Look for a green button that says "Code" or "Clone"</li>
|
|
<li>Click it and copy the URL (it should look like: <span class="code-to-type">https://gitea.techshare.cc/yourname/yourname-social-project.git</span>)</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Step 5: Go Back to PowerShell/Terminal</h4>
|
|
<p>Make sure you're in your project folder, then:</p>
|
|
<div class="terminal">
|
|
<span class="terminal-comment"># Clone your repository (replace URL with your actual URL)</span><br>
|
|
<span class="terminal-command">git clone https://gitea.techshare.cc/yourname/yourname-social-project.git</span><br><br>
|
|
|
|
<span class="terminal-comment"># Go into the cloned folder</span><br>
|
|
<span class="terminal-command">cd yourname-social-project</span><br><br>
|
|
|
|
<span class="terminal-comment"># See what files you have</span><br>
|
|
<span class="terminal-command">ls</span><br>
|
|
<span class="terminal-comment"># (Windows: use 'dir' instead of 'ls')</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 6: Project Structure -->
|
|
<div class="slide" id="slide6">
|
|
<div class="slide-header">
|
|
<h2>Project Folder Structure</h2>
|
|
<div class="slide-number">Slide 7 of 14</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">🗂️</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Your Project Should Look Like This:</h4>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<code>yourname-social-project/<br>
|
|
├── assets/<br>
|
|
│ └── css/<br>
|
|
│ ├── bulma.min.css # Bulma framework CSS<br>
|
|
│ └── style.css # Your custom CSS<br>
|
|
├── index.html # Your main HTML file<br>
|
|
├── starter_index.html # Your starter HTML template<br>
|
|
└── assets/<br>
|
|
└── image/<br>
|
|
└── logo.png # Your logo image</code>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Two Ways to Get Bulma:</h4>
|
|
<div class="before-after">
|
|
<div class="before">
|
|
<h4>Option A: Download (Recommended)</h4>
|
|
<ol>
|
|
<li>Go to <a href="https://bulma.io/" target="_blank">bulma.io</a></li>
|
|
<li>Click "Download"</li>
|
|
<li>Place bulma.min.css in assets/css/ folder</li>
|
|
</ol>
|
|
</div>
|
|
<div class="after">
|
|
<h4>Option B: Use CDN</h4>
|
|
<p>In your HTML head section:</p>
|
|
<div class="code-to-type"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 7: Add Bulma to HTML -->
|
|
<div class="slide" id="slide7">
|
|
<div class="slide-header">
|
|
<h2>Step 1: Add Bulma to Your Project</h2>
|
|
<div class="slide-number">Slide 8 of 14</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">🔗</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Add These Lines to Your HTML Head</h4>
|
|
<p>Open starter_index.html in your text editor and add:</p>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<code><head><br>
|
|
<!-- ... existing code ... --><br>
|
|
<br>
|
|
<!-- BULMA LOCAL FILE --><br>
|
|
<strong><link rel="stylesheet" href="./assets/css/bulma.min.css"></strong><br>
|
|
<br>
|
|
<!-- Custom CSS --><br>
|
|
<strong><link rel="stylesheet" href="./assets/css/style.css"></strong><br>
|
|
</head></code>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Test Your Setup:</h4>
|
|
<p>Open starter_index.html in your browser. Right now it won't look different, but we're about to transform it!</p>
|
|
<p><strong>Tip:</strong> Use VS Code or another text editor to edit your files. Right-click the file → "Open with" → Choose your editor.</p>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 8: Transform Navigation -->
|
|
<div class="slide" id="slide8">
|
|
<div class="slide-header">
|
|
<h2>Step 2: Transform the Navigation</h2>
|
|
<div class="slide-number">Slide 9 of 14</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">🧭</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Before: Basic HTML</h4>
|
|
<p>Your starter navigation looks like this:</p>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<code><nav><br>
|
|
<div><br>
|
|
<div><br>
|
|
<a href="#"><br>
|
|
<div>M</div><br>
|
|
<span>Maxy</span><br>
|
|
</a><br>
|
|
</div><br>
|
|
</div><br>
|
|
</nav></code>
|
|
</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>After: Bulma Styled</h4>
|
|
<p>Change it to this (copy and replace):</p>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<code><nav class="navbar is-fixed-top has-shadow"><br>
|
|
<div class="container"><br>
|
|
<div class="navbar-brand"><br>
|
|
<a class="navbar-item" href="#"><br>
|
|
<div class="bg-indigo-600 text-white font-bold text-xl w-10 h-10 rounded-lg flex items-center justify-center mr-2"><br>
|
|
M<br>
|
|
</div><br>
|
|
<span class="has-text-weight-bold is-size-4">Maxy</span><br>
|
|
</a><br>
|
|
<a role="button" class="navbar-burger" aria-label="menu"><br>
|
|
<span aria-hidden="true"></span><br>
|
|
<span aria-hidden="true"></span><br>
|
|
<span aria-hidden="true"></span><br>
|
|
</a><br>
|
|
</div><br>
|
|
</div><br>
|
|
</nav></code>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Refresh Your Browser!</h4>
|
|
<p>Save your file and refresh the browser. You should now see a professional-looking navigation bar fixed at the top!</p>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 9: Create Responsive Layout -->
|
|
<div class="slide" id="slide9">
|
|
<div class="slide-header">
|
|
<h2>Step 3: Create Responsive Layout</h2>
|
|
<div class="slide-number">Slide 10 of 14</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">📱</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Find Your Main Content Section</h4>
|
|
<p>Look for the section containing your content. It probably looks like:</p>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<code><section><br>
|
|
<div><br>
|
|
<div><br>
|
|
<!-- Left Sidebar --><br>
|
|
<div>...</div><br>
|
|
</div><br>
|
|
</div><br>
|
|
</section></code>
|
|
</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Replace With Bulma Columns</h4>
|
|
<p>Change it to this structure:</p>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<code><section class="section" style="padding-top: 80px;"><br>
|
|
<div class="container"><br>
|
|
<div class="columns is-variable is-5"><br>
|
|
<!-- Left Sidebar --><br>
|
|
<div class="column is-one-quarter"><br>
|
|
<div class="card has-text-centered mb-5"><br>
|
|
<!-- Profile Card --><br>
|
|
</div><br>
|
|
</div><br>
|
|
<br>
|
|
<!-- Main Feed --><br>
|
|
<div class="column"><br>
|
|
<!-- Posts will go here --><br>
|
|
</div><br>
|
|
<br>
|
|
<!-- Right Sidebar --><br>
|
|
<div class="column is-one-quarter"><br>
|
|
<!-- Suggestions --><br>
|
|
</div><br>
|
|
</div><br>
|
|
</div><br>
|
|
</section></code>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Test Responsive Design</h4>
|
|
<p>Save and refresh. Now try resizing your browser window - the layout automatically adjusts for mobile, tablet, and desktop!</p>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 10: Style Cards -->
|
|
<div class="slide" id="slide10">
|
|
<div class="slide-header">
|
|
<h2>Step 4: Style Cards and Content</h2>
|
|
<div class="slide-number">Slide 11 of 14</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">🎴</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Before: Basic Profile Card</h4>
|
|
<p>A simple div structure:</p>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<code><div><br>
|
|
<div>JS</div><br>
|
|
<h2>John Smith</h2><br>
|
|
<p>@johnsmith</p><br>
|
|
<div><br>
|
|
<div><br>
|
|
<p>Posts</p><br>
|
|
<p>245</p><br>
|
|
</div><br>
|
|
</div><br>
|
|
</div></code>
|
|
</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>After: Professional Bulma Card</h4>
|
|
<p>Transform it with these classes:</p>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<code><div class="card has-text-centered mb-5"><br>
|
|
<div class="card-content"><br>
|
|
<div class="post-avatar mx-auto mb-4" style="background-color: #ff5722;"><br>
|
|
JS<br>
|
|
</div><br>
|
|
<h2 class="title is-5">John Smith</h2><br>
|
|
<p class="subtitle is-6 has-text-grey">@johnsmith</p><br>
|
|
<br>
|
|
<div class="level is-mobile profile-stats mt-4"><br>
|
|
<div class="level-item has-text-centered"><br>
|
|
<div><br>
|
|
<p class="heading">Posts</p><br>
|
|
<p class="title is-5">245</p><br>
|
|
</div><br>
|
|
</div><br>
|
|
<!-- More stats here --><br>
|
|
</div><br>
|
|
</div><br>
|
|
</div></code>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Add Custom CSS</h4>
|
|
<p>In your style.css file, add this for the avatar:</p>
|
|
<div class="code-to-type">.post-avatar {<br> width: 50px;<br> height: 50px;<br> border-radius: 50%;<br> display: flex;<br> align-items: center;<br> justify-content: center;<br> color: white;<br>}</div>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 11: Style Buttons -->
|
|
<div class="slide" id="slide11">
|
|
<div class="slide-header">
|
|
<h2>Step 5: Style Buttons</h2>
|
|
<div class="slide-number">Slide 12 of 14</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">🔘</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Before: Plain Button</h4>
|
|
<div class="code-to-type"><button>Message</button></div>
|
|
</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>After: Bulma Styled Button</h4>
|
|
<div class="code-to-type"><button class="button maxy-primary">Message</button></div>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Add Custom Button Styles</h4>
|
|
<p>In your style.css file, add:</p>
|
|
<div class="code-block">
|
|
<code>.maxy-primary {<br>
|
|
background-color: #3273dc;<br>
|
|
color: white;<br>
|
|
border: none;<br>
|
|
}<br>
|
|
<br>
|
|
.maxy-primary:hover {<br>
|
|
background-color: #2761bb;<br>
|
|
}</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="emoji-instructions">
|
|
<h4>Try Different Button Styles</h4>
|
|
<p>Bulma has many button variants. Try these:</p>
|
|
<ul>
|
|
<li><span class="code-to-type">button is-primary</span> - Blue button</li>
|
|
<li><span class="code-to-type">button is-success</span> - Green button</li>
|
|
<li><span class="code-to-type">button is-rounded</span> - Rounded corners</li>
|
|
<li><span class="code-to-type">button is-large</span> - Big button</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 12: Save and Push -->
|
|
<div class="slide" id="slide12">
|
|
<div class="slide-header">
|
|
<h2>Step 6: Save Your Work to Gitea</h2>
|
|
<div class="slide-number">Slide 13 of 14</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">💾</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Once You're Done Customizing</h4>
|
|
<p>Go back to PowerShell/Terminal and save your work:</p>
|
|
</div>
|
|
|
|
<div class="terminal">
|
|
<span class="terminal-comment"># Make sure you're in your project folder</span><br>
|
|
<span class="terminal-command">cd yourname-social-project</span><br><br>
|
|
|
|
<span class="terminal-comment"># Check what files you changed</span><br>
|
|
<span class="terminal-command">git status</span><br><br>
|
|
|
|
<span class="terminal-comment"># Add all your changes</span><br>
|
|
<span class="terminal-command">git add .</span><br><br>
|
|
|
|
<span class="terminal-comment"># Commit with a message (describe what you did)</span><br>
|
|
<span class="terminal-command">git commit -m "Added Bulma CSS and styled navigation"</span><br><br>
|
|
|
|
<span class="terminal-comment"># Push to Gitea</span><br>
|
|
<span class="terminal-command">git push origin main</span>
|
|
</div>
|
|
|
|
<div class="test-box">
|
|
<h4>Check Your Work on Gitea</h4>
|
|
<p>Go back to your browser and refresh your Gitea repository page. You should see your updated files!</p>
|
|
<p>Your teacher can now see your beautiful social media platform.</p>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 13: Challenges -->
|
|
<div class="slide" id="slide13">
|
|
<div class="slide-header">
|
|
<h2>Your Challenges</h2>
|
|
<div class="slide-number">Slide 14 of 14</div>
|
|
</div>
|
|
|
|
<div class="big-emoji">🏆</div>
|
|
|
|
<div class="instruction-box">
|
|
<h4>Customize Your Platform</h4>
|
|
<p>Now that you have the basics, make it your own!</p>
|
|
</div>
|
|
|
|
<div id="challengeList">
|
|
<div class="challenge-item">
|
|
<div class="challenge-checkbox" onclick="toggleChallenge(this)"></div>
|
|
<span>Change the color scheme in style.css</span>
|
|
</div>
|
|
|
|
<div class="challenge-item">
|
|
<div class="challenge-checkbox" onclick="toggleChallenge(this)"></div>
|
|
<span>Add a post form with Bulma form classes</span>
|
|
</div>
|
|
|
|
<div class="challenge-item">
|
|
<div class="challenge-checkbox" onclick="toggleChallenge(this)"></div>
|
|
<span>Create a footer with social media icons</span>
|
|
</div>
|
|
|
|
<div class="challenge-item">
|
|
<div class="challenge-checkbox" onclick="toggleChallenge(this)"></div>
|
|
<span>Make the navigation menu actually work on mobile</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="focus-point">
|
|
<p>Remember to <strong>git add</strong>, <strong>git commit</strong>, and <strong>git push</strong> after each change!</p>
|
|
<p>This saves your work and lets your teacher see your progress.</p>
|
|
</div>
|
|
|
|
<div class="nav-buttons">
|
|
<button class="nav-button" onclick="changeSlide(-1)">
|
|
← Previous
|
|
</button>
|
|
<button class="nav-button" onclick="changeSlide(1)">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide Indicator -->
|
|
<div class="slide-indicator">
|
|
<div class="indicator-dot" onclick="goToSlide(0)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(1)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(2)"></div>
|
|
<div class="indicator-dot active" onclick="goToSlide(3)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(4)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(5)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(6)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(7)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(8)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(9)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(10)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(11)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(12)"></div>
|
|
<div class="indicator-dot" onclick="goToSlide(13)"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Presentation state
|
|
let currentSlide = 0;
|
|
const totalSlides = 14;
|
|
|
|
// Initialize presentation
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateSlideNavigation();
|
|
});
|
|
|
|
// Change slide
|
|
function changeSlide(direction) {
|
|
const newSlide = currentSlide + direction;
|
|
|
|
if (newSlide >= 0 && newSlide < totalSlides) {
|
|
// Hide current slide
|
|
document.getElementById(`slide${currentSlide}`).classList.remove('active');
|
|
|
|
// Update indicator
|
|
document.querySelectorAll('.indicator-dot')[currentSlide].classList.remove('active');
|
|
|
|
// Show new slide
|
|
currentSlide = newSlide;
|
|
document.getElementById(`slide${currentSlide}`).classList.add('active');
|
|
|
|
// Update indicator
|
|
document.querySelectorAll('.indicator-dot')[currentSlide].classList.add('active');
|
|
|
|
// Update navigation buttons
|
|
updateSlideNavigation();
|
|
|
|
// Update slide numbers
|
|
updateSlideNumbers();
|
|
}
|
|
}
|
|
|
|
// Go to specific slide
|
|
function goToSlide(slideIndex) {
|
|
if (slideIndex >= 0 && slideIndex < totalSlides) {
|
|
// Hide current slide
|
|
document.getElementById(`slide${currentSlide}`).classList.remove('active');
|
|
|
|
// Update indicator
|
|
document.querySelectorAll('.indicator-dot')[currentSlide].classList.remove('active');
|
|
|
|
// Show new slide
|
|
currentSlide = slideIndex;
|
|
document.getElementById(`slide${currentSlide}`).classList.add('active');
|
|
|
|
// Update indicator
|
|
document.querySelectorAll('.indicator-dot')[currentSlide].classList.add('active');
|
|
|
|
// Update navigation buttons
|
|
updateSlideNavigation();
|
|
|
|
// Update slide numbers
|
|
updateSlideNumbers();
|
|
}
|
|
}
|
|
|
|
// Update navigation buttons
|
|
function updateSlideNavigation() {
|
|
const prevButtons = document.querySelectorAll('.nav-button');
|
|
prevButtons.forEach(button => {
|
|
if (button.textContent.includes('Previous')) {
|
|
button.disabled = currentSlide === 0;
|
|
} else if (button.textContent.includes('Next')) {
|
|
button.disabled = currentSlide === totalSlides - 1;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Update slide numbers
|
|
function updateSlideNumbers() {
|
|
const slideNumbers = document.querySelectorAll('.slide-number');
|
|
slideNumbers.forEach((number, index) => {
|
|
if (index === currentSlide) {
|
|
number.textContent = `Slide ${currentSlide + 1} of ${totalSlides}`;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Challenge checklist
|
|
function toggleChallenge(checkbox) {
|
|
checkbox.classList.toggle('checked');
|
|
}
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener('keydown', function(event) {
|
|
if (event.key === 'ArrowRight' || event.key === ' ') {
|
|
changeSlide(1);
|
|
} else if (event.key === 'ArrowLeft') {
|
|
changeSlide(-1);
|
|
} else if (event.key >= '1' && event.key <= '9') {
|
|
const slideNum = parseInt(event.key) - 1;
|
|
if (slideNum < totalSlides) {
|
|
goToSlide(slideNum);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body></html> |