technolyceum/g11-m3
Template
15
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added readme

Browse Source
This commit is contained in:
root
2026-01-27 15:15:54 +03:00
parent 26811fd766
commit 6cdcb359a0
6 changed files with 2806 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

724
g11-m3-2/Lesson 2_ Getting Started with Bulma.html Normal file
View File

@@ -0,0 +1,724 @@
<!DOCTYPE html>
<!-- saved from url=(0063)file:///Users/home/Downloads/deepseek_html_20260113_a7f4d2.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>Lesson 2: Getting Started with Bulma</title>
<link rel="stylesheet" href="./Lesson 2_ Getting Started with Bulma_files/bulma.min.css">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #00d1b2 0%, #3273dc 100%);
color: #333;
min-height: 100vh;
padding: 20px;
}
.presentation {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.slide {
display: none;
padding: 40px;
min-height: 600px;
}
.slide.active {
display: block;
}
.slide-header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 3px solid #f0f0f0;
}
h1, h2, h3 {
font-family: 'Segoe UI', sans-serif;
}
.bulma-demo {
border: 2px dashed #00d1b2;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.code-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 25px 0;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 20px;
border-radius: 8px;
font-family: 'Consolas', monospace;
font-size: 0.9rem;
line-height: 1.5;
overflow-x: auto;
}
.live-editor {
background: #f8f9fa;
padding: 25px;
border-radius: 10px;
margin: 25px 0;
}
.editor-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
}
textarea {
width: 100%;
min-height: 200px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-family: 'Consolas', monospace;
font-size: 0.9rem;
}
.preview {
background: white;
padding: 20px;
border-radius: 6px;
border: 1px solid #ddd;
min-height: 200px;
}
.activity {
background: #e8f4fd;
padding: 25px;
border-radius: 10px;
margin: 30px 0;
border-left: 5px solid #3273dc;
}
.nav-controls {
display: flex;
justify-content: space-between;
padding: 20px 40px;
background: #f8f9fa;
border-top: 2px solid #eee;
}
button {
background: #00d1b2;
color: white;
border: none;
padding: 12px 25px;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s;
}
button:hover {
background: #3273dc;
transform: translateY(-2px);
}
button:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
}
.slide-counter {
color: #666;
font-weight: 600;
}
.bulma-badge {
display: inline-block;
background: #00d1b2;
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
margin: 0 5px;
}
@media (max-width: 768px) {
.code-comparison, .editor-container {
grid-template-columns: 1fr;
}
.slide {
padding: 20px;
}
}
</style>
</head>
<body>
<div class="presentation" id="presentation">
<!-- Slide 1: Title -->
<div class="slide active" id="slide1">
<div class="slide-header">
<h1 class="title is-1 has-text-primary">🎨 Getting Started with Bulma</h1>
<p class="subtitle is-4 has-text-grey">Lesson 2: Build Beautiful Websites with Minimal CSS</p>
<p class="has-text-info has-text-weight-bold">Grade 11 Web Development</p>
</div>
<div class="notification is-info">
<h3 class="title is-4">📏 Classroom Rules</h3>
<ul>
<li>Experiment with every code example</li>
<li>Help classmates with Bulma classes</li>
<li>Share what you build</li>
<li>Ask "what if" questions</li>
</ul>
</div>
<div class="notification is-success">
<h3 class="title is-4">🎯 Learning Outcomes</h3>
<ul>
<li>Set up Bulma in a project</li>
<li>Use Bulma's modifier classes</li>
<li>Build responsive layouts with columns</li>
<li>Style common components</li>
<li>Create a navigation bar</li>
</ul>
</div>
<div class="notification is-warning">
<h3 class="title is-4">💡 Why Bulma Matters</h3>
<p>Bulma's human-readable classes make it perfect for beginners. It's CSS-only (no JavaScript required) and built with modern Flexbox.</p>
</div>
<div class="bulma-demo">
<h3 class="title is-5">✨ Quick Bulma Demo</h3>
<button class="button is-primary">Primary Button</button>
<button class="button is-success is-rounded">Success Button</button>
<button class="button is-danger is-outlined">Danger Button</button>
<button class="button is-info is-loading">Loading...</button>
<div class="columns mt-4">
<div class="column has-background-primary has-text-white">Column 1</div>
<div class="column has-background-link has-text-white">Column 2</div>
<div class="column has-background-info has-text-white">Column 3</div>
</div>
</div>
</div>
<!-- Slide 2: Setup & Basics -->
<div class="slide" id="slide2">
<div class="slide-header">
<h2 class="title is-2 has-text-info">🚀 Bulma Setup</h2>
</div>
<div class="code-comparison">
<div>
<h3 class="title is-5">📦 Method 1: CDN (Easiest)</h3>
<div class="code-block">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- Your Bulma-powered HTML here --&gt;
&lt;/body&gt;
&lt;/html&gt;</div>
</div>
<div>
<h3 class="title is-5">🔧 Method 2: NPM (Advanced)</h3>
<div class="code-block">
# Install via npm
npm install bulma
# Import in your CSS
@import 'bulma/css/bulma.css';
# Or import only what you need
@import 'bulma/sass/utilities/_all.sass';
@import 'bulma/sass/components/navbar.sass';</div>
</div>
</div>
<div class="notification is-light">
<h3 class="title is-5">🎯 Bulma's Philosophy</h3>
<p>Bulma uses <strong>modifier classes</strong> that start with <span class="bulma-badge">is-</span> or <span class="bulma-badge">has-</span></p>
<div class="columns mt-4">
<div class="column">
<div class="box">
<h4 class="title is-6">is-* modifiers</h4>
<p>Change element's appearance</p>
<code>is-primary</code><br>
<code>is-large</code><br>
<code>is-rounded</code>
</div>
</div>
<div class="column">
<div class="box">
<h4 class="title is-6">has-* modifiers</h4>
<p>Change element's content</p>
<code>has-text-white</code><br>
<code>has-background-dark</code><br>
<code>has-text-weight-bold</code>
</div>
</div>
</div>
</div>
<div class="activity">
<h3 class="title is-5">✏️ Quick Practice</h3>
<p>Add classes to this button to make it:</p>
<ol>
<li>Large size</li>
<li>Danger color</li>
<li>Rounded corners</li>
<li>Outlined style</li>
</ol>
<div class="editor-container">
<div>
<h4 class="title is-6">Your Code:</h4>
<textarea id="buttonCode">&lt;button class="button"&gt;Click me&lt;/button&gt;</textarea>
<button class="button is-primary mt-3" onclick="updateButtonPreview()">Update Preview</button>
</div>
<div>
<h4 class="title is-6">Preview:</h4>
<div class="preview" id="buttonPreview">
<button class="button">Click me</button>
</div>
<p class="help mt-2">Solution: <code>class="button is-large is-danger is-rounded is-outlined"</code></p>
</div>
</div>
</div>
</div>
<!-- Slide 3: Layouts & Grid -->
<div class="slide" id="slide3">
<div class="slide-header">
<h2 class="title is-2 has-text-success">📐 Bulma Layout System</h2>
</div>
<div class="notification is-info-light">
<h3 class="title is-5">🎯 Bulma's Secret: Flexbox</h3>
<p>Bulma uses Flexbox for all layouts. The <code>columns</code> and <code>column</code> classes create responsive grids automatically.</p>
</div>
<div class="code-block mb-4">
&lt;!-- Basic 3-column layout --&gt;
&lt;div class="columns"&gt;
&lt;div class="column"&gt;Auto-width&lt;/div&gt;
&lt;div class="column"&gt;Auto-width&lt;/div&gt;
&lt;div class="column"&gt;Auto-width&lt;/div&gt;
&lt;/div&gt;
&lt;!-- Responsive column sizing --&gt;
&lt;div class="columns"&gt;
&lt;div class="column is-half"&gt;Half width&lt;/div&gt;
&lt;div class="column"&gt;Auto&lt;/div&gt;
&lt;div class="column"&gt;Auto&lt;/div&gt;
&lt;/div&gt;
&lt;!-- Mobile columns --&gt;
&lt;div class="columns is-mobile"&gt;
&lt;div class="column"&gt;Mobile column&lt;/div&gt;
&lt;div class="column"&gt;Mobile column&lt;/div&gt;
&lt;/div&gt;</div>
<div class="columns is-mobile has-text-centered mb-4">
<div class="column has-background-primary-light">Column 1</div>
<div class="column has-background-link-light">Column 2</div>
<div class="column has-background-info-light">Column 3</div>
<div class="column has-background-success-light">Column 4</div>
</div>
<div class="columns mb-4">
<div class="column is-half has-background-warning-light">
<p class="title is-6">Half width</p>
</div>
<div class="column has-background-danger-light">
<p class="title is-6">Auto width</p>
</div>
<div class="column has-background-grey-lighter">
<p class="title is-6">Auto width</p>
</div>
</div>
<div class="live-editor">
<h3 class="title is-5">👨‍💻 Grid Builder</h3>
<p>Create a 4-column layout where:</p>
<ul>
<li>First column takes 1/4 of space</li>
<li>Second column takes 1/2 of space</li>
<li>Last two columns share remaining space</li>
</ul>
<div class="editor-container">
<div>
<h4 class="title is-6">Your Code:</h4>
<textarea id="gridCode">&lt;div class="columns"&gt;
&lt;div class="column"&gt;Column 1&lt;/div&gt;
&lt;div class="column"&gt;Column 2&lt;/div&gt;
&lt;div class="column"&gt;Column 3&lt;/div&gt;
&lt;div class="column"&gt;Column 4&lt;/div&gt;
&lt;/div&gt;</textarea>
<button class="button is-success mt-3" onclick="updateGridPreview()">Update Preview</button>
</div>
<div>
<h4 class="title is-6">Preview:</h4>
<div class="preview" id="gridPreview">
<div class="columns">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
<div class="column">Column 4</div>
</div>
</div>
<p class="help mt-2">Solution: Use <code>is-one-quarter</code> and <code>is-half</code> classes</p>
</div>
</div>
</div>
</div>
<!-- Slide 4: Components -->
<div class="slide" id="slide4">
<div class="slide-header">
<h2 class="title is-2 has-text-danger">✨ Bulma Components</h2>
</div>
<div class="notification is-light">
<h3 class="title is-5">🎯 Ready-to-Use Components</h3>
<p>Bulma includes styled components that work out of the box:</p>
</div>
<div class="columns">
<div class="column">
<div class="box">
<h4 class="title is-6">Navigation Bar</h4>
<nav class="navbar" role="navigation">
<div class="navbar-brand">
<a class="navbar-item" href="file:///Users/home/Downloads/deepseek_html_20260113_a7f4d2.html#">
<strong>My Site</strong>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">Home</a>
<a class="navbar-item">About</a>
</div>
</div>
</nav>
<div class="code-block mt-3">
&lt;nav class="navbar"&gt;
&lt;div class="navbar-brand"&gt;
&lt;a class="navbar-item"&gt;Logo&lt;/a&gt;
&lt;/div&gt;
&lt;/nav&gt;</div>
</div>
</div>
<div class="column">
<div class="box">
<h4 class="title is-6">Card Component</h4>
<div class="card">
<div class="card-image">
<div class="placeholder-image" style="height: 100px; background: #00d1b2; display: flex; align-items: center; justify-content: center; color: white;">
Image
</div>
</div>
<div class="card-content">
<p class="title is-5">Card Title</p>
<p>Card content goes here</p>
</div>
</div>
<div class="code-block mt-3">
&lt;div class="card"&gt;
&lt;div class="card-content"&gt;
&lt;p class="title"&gt;Title&lt;/p&gt;
&lt;p&gt;Content&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</div>
</div>
</div>
</div>
<div class="columns mt-4">
<div class="column">
<div class="box">
<h4 class="title is-6">Form Elements</h4>
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input" type="text" placeholder="Text input">
</div>
</div>
<div class="field">
<label class="label">Message</label>
<div class="control">
<textarea class="textarea" placeholder="Textarea"></textarea>
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-link">Submit</button>
</div>
</div>
</div>
</div>
<div class="column">
<div class="box">
<h4 class="title is-6">Message &amp; Notifications</h4>
<article class="message is-info">
<div class="message-header">
<p>Info Message</p>
</div>
<div class="message-body">
This is an info message
</div>
</article>
<div class="notification is-success mt-3">
<button class="delete"></button>
Success notification!
</div>
</div>
</div>
</div>
</div>
<!-- Slide 5: Project Activity -->
<div class="slide" id="slide5">
<div class="slide-header">
<h2 class="title is-2 has-text-primary">🎯 Student Project: Blog Layout</h2>
</div>
<div class="notification is-warning">
<h3 class="title is-5">📝 Project Brief</h3>
<p>Create a blog homepage with Bulma that includes:</p>
<ol>
<li>Navigation bar with logo and 3 links</li>
<li>Hero section with title and subtitle</li>
<li>3-column grid of blog posts</li>
<li>Footer with copyright</li>
</ol>
</div>
<div class="live-editor">
<h3 class="title is-5">👨‍💻 Build Your Blog</h3>
<div class="editor-container">
<div>
<h4 class="title is-6">Your HTML:</h4>
<textarea id="blogCode" style="min-height: 300px;">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css"&gt;
&lt;title&gt;My Bulma Blog&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- Add your code here --&gt;
&lt;!-- 1. Navigation --&gt;
&lt;!-- 2. Hero Section --&gt;
&lt;!-- 3. Blog Posts Grid --&gt;
&lt;!-- 4. Footer --&gt;
&lt;/body&gt;
&lt;/html&gt;</textarea>
<button class="button is-primary mt-3" onclick="updateBlogPreview()">Preview Blog</button>
<button class="button is-info mt-3 ml-3" onclick="showBlogSolution()">Show Solution</button>
</div>
<div>
<h4 class="title is-6">Preview:</h4>
<div class="preview" id="blogPreview" style="min-height: 300px;">
Preview will appear here
</div>
</div>
</div>
</div>
<div class="notification is-success mt-4">
<h3 class="title is-5">✅ Lesson 2 Checklist</h3>
<ul>
<li>☑️ Understand Bulma setup</li>
<li>☑️ Use is-* and has-* modifiers</li>
<li>☑️ Create responsive grids</li>
<li>☑️ Style buttons and forms</li>
<li>☑️ Build a navigation bar</li>
<li>☑️ Create a complete blog layout</li>
</ul>
<p class="mt-3 has-text-weight-bold">Next Lesson: Tailwind CSS - Utility-First Approach!</p>
</div>
</div>
</div>
<div class="nav-controls">
<button id="prevBtn" onclick="prevSlide()" disabled="">◀ Previous</button>
<div class="slide-counter">
Slide <span id="currentSlide">1</span> of <span id="totalSlides">5</span>
</div>
<button id="nextBtn" onclick="nextSlide()">Next ▶</button>
</div>
<script>
let currentSlide = 1;
const totalSlides = 5;
function updateSlide() {
document.querySelectorAll('.slide').forEach(slide => {
slide.classList.remove('active');
});
document.getElementById(`slide${currentSlide}`).classList.add('active');
document.getElementById('currentSlide').textContent = currentSlide;
document.getElementById('totalSlides').textContent = totalSlides;
document.getElementById('prevBtn').disabled = currentSlide === 1;
document.getElementById('nextBtn').disabled = currentSlide === totalSlides;
}
function nextSlide() {
if (currentSlide < totalSlides) {
currentSlide++;
updateSlide();
}
}
function prevSlide() {
if (currentSlide > 1) {
currentSlide--;
updateSlide();
}
}
function updateButtonPreview() {
const code = document.getElementById('buttonCode').value;
document.getElementById('buttonPreview').innerHTML = code;
}
function updateGridPreview() {
const code = document.getElementById('gridCode').value;
document.getElementById('gridPreview').innerHTML = code;
}
function updateBlogPreview() {
const code = document.getElementById('blogCode').value;
document.getElementById('blogPreview').innerHTML = code;
}
function showBlogSolution() {
const solution = `<!-- 1. Navigation -->
<nav class="navbar is-primary" role="navigation">
<div class="navbar-brand">
<a class="navbar-item">
<strong>📝 My Blog</strong>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">Home</a>
<a class="navbar-item">Articles</a>
<a class="navbar-item">About</a>
</div>
</div>
</nav>
<!-- 2. Hero Section -->
<section class="hero is-info">
<div class="hero-body">
<div class="container">
<h1 class="title">Welcome to My Blog</h1>
<h2 class="subtitle">Thoughts on web development</h2>
</div>
</div>
</section>
<!-- 3. Blog Posts Grid -->
<section class="section">
<div class="container">
<div class="columns">
<!-- Post 1 -->
<div class="column">
<div class="card">
<div class="card-content">
<p class="title is-5">Learning Bulma</p>
<p>How Bulma makes CSS easier...</p>
</div>
</div>
</div>
<!-- Post 2 -->
<div class="column">
<div class="card">
<div class="card-content">
<p class="title is-5">CSS Frameworks</p>
<p>Comparing different frameworks...</p>
</div>
</div>
</div>
<!-- Post 3 -->
<div class="column">
<div class="card">
<div class="card-content">
<p class="title is-5">Web Design 2026</p>
<p>Latest trends in web design...</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 4. Footer -->
<footer class="footer">
<div class="content has-text-centered">
<p>&copy; 2026 My Blog. Built with Bulma.</p>
</div>
</footer>`;
document.getElementById('blogCode').value = `<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css">
<title>My Bulma Blog</title>
</head>
<body>
${solution}
</body>
</html>`;
updateBlogPreview();
}
// Initialize
updateSlide();
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === ' ') nextSlide();
else if (e.key === 'ArrowLeft') prevSlide();
});
</script>
</body></html>