Added readme
This commit is contained in:
1241
g11-m3-2/Bulma CSS.html
Normal file
1241
g11-m3-2/Bulma CSS.html
Normal file
File diff suppressed because it is too large
Load Diff
724
g11-m3-2/Lesson 2_ Getting Started with Bulma.html
Normal file
724
g11-m3-2/Lesson 2_ Getting Started with Bulma.html
Normal 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">
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Your Bulma-powered HTML here -->
|
||||||
|
</body>
|
||||||
|
</html></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"><button class="button">Click me</button></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">
|
||||||
|
<!-- Basic 3-column layout -->
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">Auto-width</div>
|
||||||
|
<div class="column">Auto-width</div>
|
||||||
|
<div class="column">Auto-width</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Responsive column sizing -->
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-half">Half width</div>
|
||||||
|
<div class="column">Auto</div>
|
||||||
|
<div class="column">Auto</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile columns -->
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column">Mobile column</div>
|
||||||
|
<div class="column">Mobile column</div>
|
||||||
|
</div></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"><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></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">
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-brand">
|
||||||
|
<a class="navbar-item">Logo</a>
|
||||||
|
</div>
|
||||||
|
</nav></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">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-content">
|
||||||
|
<p class="title">Title</p>
|
||||||
|
<p>Content</p>
|
||||||
|
</div>
|
||||||
|
</div></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 & 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;"><!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>
|
||||||
|
<!-- Add your code here -->
|
||||||
|
|
||||||
|
<!-- 1. Navigation -->
|
||||||
|
|
||||||
|
<!-- 2. Hero Section -->
|
||||||
|
|
||||||
|
<!-- 3. Blog Posts Grid -->
|
||||||
|
|
||||||
|
<!-- 4. Footer -->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html></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>© 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>
|
||||||
BIN
g11-m3-4/.DS_Store
vendored
Normal file
BIN
g11-m3-4/.DS_Store
vendored
Normal file
Binary file not shown.
@@ -4,13 +4,13 @@ A complete full-stack web application with user authentication built with Flask
|
|||||||
|
|
||||||
## 📁 Project Structure
|
## 📁 Project Structure
|
||||||
flask_app/
|
flask_app/
|
||||||
├── app.py # Main Flask application
|
├── app.py
|
||||||
├── database.py # Database setup and functions
|
├── database.py
|
||||||
├── users.py # User authentication functions
|
├── users.py
|
||||||
├── users.db # SQLite database
|
├── users.db
|
||||||
├── requirements.txt # Python dependencies
|
├── requirements.txt
|
||||||
├── venv/ # Virtual environment
|
├── venv/
|
||||||
└── templates/ # HTML templates
|
└── templates/
|
||||||
├── base.html
|
├── base.html
|
||||||
├── home.html
|
├── home.html
|
||||||
├── login.html
|
├── login.html
|
||||||
@@ -20,15 +20,37 @@ text
|
|||||||
|
|
||||||
## 🚀 Quick Start
|
## 🚀 Quick Start
|
||||||
|
|
||||||
### 1. Create Project Structure
|
### 1. Create Project Scaffold (One Command!)
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
cd Desktop
|
# Create all empty files and folders with one command:
|
||||||
mkdir flask_app
|
mkdir -p flask_app/templates && cd flask_app && touch app.py database.py users.py users.db requirements.txt && mkdir -p venv && touch templates/base.html templates/home.html templates/login.html templates/register.html && cd .. && echo "✅ All empty files created in 'flask_app/':" && find flask_app/ -type f | sort
|
||||||
|
2. Setup Virtual Environment
|
||||||
|
bash
|
||||||
cd flask_app
|
cd flask_app
|
||||||
|
|
||||||
# Create all project files at once
|
# Create virtual environment
|
||||||
cat > app.py << 'PYEOF'
|
python -m venv venv
|
||||||
|
|
||||||
|
# Activate virtual environment (Windows PowerShell)
|
||||||
|
venv\Scripts\Activate.ps1
|
||||||
|
|
||||||
|
# If you get an error:
|
||||||
|
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
|
||||||
|
venv\Scripts\Activate.ps1
|
||||||
|
|
||||||
|
# Activate virtual environment (Mac/Linux)
|
||||||
|
# source venv/bin/activate
|
||||||
|
3. Install Dependencies
|
||||||
|
bash
|
||||||
|
pip install flask werkzeug flask-wtf
|
||||||
|
pip freeze > requirements.txt
|
||||||
|
4. Fill Files with Code
|
||||||
|
Now fill the empty files with the code below:
|
||||||
|
|
||||||
|
app.py - Main Flask application:
|
||||||
|
|
||||||
|
python
|
||||||
from flask import Flask, render_template, request, redirect, url_for, session, flash
|
from flask import Flask, render_template, request, redirect, url_for, session, flash
|
||||||
import database
|
import database
|
||||||
import users
|
import users
|
||||||
@@ -85,9 +107,9 @@ def logout():
|
|||||||
|
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
app.run(debug=True)
|
app.run(debug=True)
|
||||||
PYEOF
|
database.py - Database operations:
|
||||||
|
|
||||||
cat > database.py << 'DBEOF'
|
python
|
||||||
import sqlite3
|
import sqlite3
|
||||||
|
|
||||||
def init_db():
|
def init_db():
|
||||||
@@ -111,9 +133,9 @@ def get_db_connection():
|
|||||||
conn = sqlite3.connect('users.db')
|
conn = sqlite3.connect('users.db')
|
||||||
conn.row_factory = sqlite3.Row
|
conn.row_factory = sqlite3.Row
|
||||||
return conn
|
return conn
|
||||||
DBEOF
|
users.py - User authentication:
|
||||||
|
|
||||||
cat > users.py << 'UEOF'
|
python
|
||||||
from werkzeug.security import generate_password_hash, check_password_hash
|
from werkzeug.security import generate_password_hash, check_password_hash
|
||||||
import database
|
import database
|
||||||
|
|
||||||
@@ -139,12 +161,10 @@ def login_user(username, password):
|
|||||||
return True, user
|
return True, user
|
||||||
else:
|
else:
|
||||||
return False, 'Invalid username or password!'
|
return False, 'Invalid username or password!'
|
||||||
UEOF
|
5. Fill HTML Templates
|
||||||
|
templates/base.html:
|
||||||
|
|
||||||
# Create templates folder
|
html
|
||||||
mkdir templates
|
|
||||||
|
|
||||||
cat > templates/base.html << 'HTML1EOF'
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
@@ -184,9 +204,9 @@ cat > templates/base.html << 'HTML1EOF'
|
|||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
HTML1EOF
|
templates/home.html:
|
||||||
|
|
||||||
cat > templates/home.html << 'HTML2EOF'
|
html
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block title %}Home{% endblock %}
|
{% block title %}Home{% endblock %}
|
||||||
@@ -201,9 +221,9 @@ cat > templates/home.html << 'HTML2EOF'
|
|||||||
<p>Please <a href="{{ url_for('login') }}">login</a> or <a href="{{ url_for('register') }}">register</a>.</p>
|
<p>Please <a href="{{ url_for('login') }}">login</a> or <a href="{{ url_for('register') }}">register</a>.</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
HTML2EOF
|
templates/register.html:
|
||||||
|
|
||||||
cat > templates/register.html << 'HTML3EOF'
|
html
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block title %}Register{% endblock %}
|
{% block title %}Register{% endblock %}
|
||||||
@@ -218,9 +238,9 @@ cat > templates/register.html << 'HTML3EOF'
|
|||||||
</form>
|
</form>
|
||||||
<p>Already have an account? <a href="{{ url_for('login') }}">Login here</a></p>
|
<p>Already have an account? <a href="{{ url_for('login') }}">Login here</a></p>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
HTML3EOF
|
templates/login.html:
|
||||||
|
|
||||||
cat > templates/login.html << 'HTML4EOF'
|
html
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block title %}Login{% endblock %}
|
{% block title %}Login{% endblock %}
|
||||||
@@ -234,21 +254,7 @@ cat > templates/login.html << 'HTML4EOF'
|
|||||||
</form>
|
</form>
|
||||||
<p>Don't have an account? <a href="{{ url_for('register') }}">Register here</a></p>
|
<p>Don't have an account? <a href="{{ url_for('register') }}">Register here</a></p>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
HTML4EOF
|
6. Run the Application
|
||||||
2. Create Virtual Environment
|
|
||||||
bash
|
|
||||||
python -m venv venv
|
|
||||||
venv\Scripts\Activate.ps1
|
|
||||||
If you get an error:
|
|
||||||
|
|
||||||
bash
|
|
||||||
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
|
|
||||||
venv\Scripts\Activate.ps1
|
|
||||||
3. Install Dependencies
|
|
||||||
bash
|
|
||||||
pip install flask werkzeug flask-wtf
|
|
||||||
pip freeze > requirements.txt
|
|
||||||
4. Run the Application
|
|
||||||
bash
|
bash
|
||||||
python app.py
|
python app.py
|
||||||
Visit: http://127.0.0.1:5000
|
Visit: http://127.0.0.1:5000
|
||||||
|
|||||||
793
g11-m3-m3/Lesson 3_ Tailwind CSS - Utility-First Framework.html
Normal file
793
g11-m3-m3/Lesson 3_ Tailwind CSS - Utility-First Framework.html
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user