diff --git a/.DS_Store b/.DS_Store index 6d84353..3ff3792 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/g11-m3-2/Bulma CSS.html b/g11-m3-2/Bulma CSS.html new file mode 100644 index 0000000..d82c5ae --- /dev/null +++ b/g11-m3-2/Bulma CSS.html @@ -0,0 +1,1241 @@ + + + + + + Building a Social Media Platform with Bulma CSS + + + +
+ +
+
+

Build a Social Media Platform with Bulma CSS

+
Slide 1 of 14
+
+ +
+
🌐
+

Maxy - Modern Social Platform

+

Transform basic HTML into a fully styled social media website

+
+ +
+

What You'll Build

+

A responsive social media platform with:

+
    +
  • Professional navigation bar
    • +
  • Three-column responsive layout
    • +
  • Styled cards for user profiles and posts
    • +
  • Interactive buttons and components
    • +
+
+ +
+ + +
+
+ + +
+
+

What is Bulma CSS?

+
Slide 2 of 14
+
+ +
🎨
+ +
+

Bulma is a Modern CSS Framework

+

Bulma is a free, open-source CSS framework based on Flexbox. It provides ready-to-use frontend components for building modern, responsive websites.

+
+ +
+

Key Features of Bulma:

+
    +
  • Responsive: Works on mobile, tablet, and desktop
    • +
  • Flexbox-based: Uses modern CSS technology for layout
    • +
  • Pure CSS: No JavaScript dependency
    • +
  • Modular: Pick and choose only what you need
    • +
  • Modern: Clean, minimalist design by default
    • +
+
+ +
+

Unlike some other frameworks, Bulma is pure CSS - it doesn't require JavaScript to function, making it lightweight and easy to use!

+
+ +
+ + +
+
+ + +
+
+

Step-by-Step Setup Guide

+
Slide 3 of 14
+
+ +
🔧
+ +
+

Before We Start - Install Git

+

We'll use Git to download our starter template. Follow these steps:

+
+ +
+
+

For Windows:

+
    +
  1. Go to git-scm.com/download/win
    2. +
  2. Download and run the installer
    3. +
  3. Click "Next" through all the options (defaults are fine)
    4. +
  4. When finished, open PowerShell
    5. +
+
+
+

For Mac:

+
    +
  1. Open Terminal (search in Spotlight)
    2. +
  2. Type: git --version
    3. +
  3. If Git is not installed, it will prompt you to install it
    4. +
  4. Follow the installation instructions
    5. +
+
+
+ +
+

Let's Test Git Installation:

+
+ git --version
+ # If installed correctly, you'll see something like: git version 2.45.0 +
+
+ +
+ + +
+
+ + +
+
+

Create Your Project Folder

+
Slide 4 of 14
+
+ +
📁
+ +
+

Step 1: Open PowerShell/Terminal

+

Let's create a folder for our project:

+
+ +
+ # First, go to your Documents folder
+ cd documents

+ + # Create a new folder with YOUR name (replace "yourname" with your actual name)
+ mkdir yourname-social-project

+ + # Go into your new folder
+ cd yourname-social-project

+ + # Check where you are
+ pwd
+ # (Windows: use 'dir' to see files) +
+ +
+

Important Note:

+

If you just installed Git on Windows, close and reopen PowerShell before continuing. This ensures Git commands work properly.

+
+ +
+ + +
+
+ + +
+
+

Get the Starter Template

+
Slide 5 of 14
+
+ +
🚀
+ +
+

Step 2: Go to Gitea

+

Now we'll get our starter code:

+
    +
  1. Open your web browser
    2. +
  2. Go to: https://gitea.techshare.cc/technolyceum/g11-m3
    3. +
  3. Login with your username (ask your teacher if you don't have one)
    4. +
+
+ +
+

Step 3: Use the Template

+
    +
  1. Click "Use this template" button
    2. +
  2. Name it: yourname-social-project (use YOUR name)
    3. +
  3. Choose one template item from the dropdown
    4. +
  4. Click "Create repository"
    5. +
+
+ +
+

Remember to use YOUR ACTUAL NAME in the project name! This helps your teacher identify your work.

+
+ +
+ + +
+
+ + +
+
+

Clone Your Template

+
Slide 6 of 14
+
+ +
📋
+ +
+

Step 4: Copy the Clone URL

+

After creating your repository:

+
    +
  1. Look for a green button that says "Code" or "Clone"
    2. +
  2. Click it and copy the URL (it should look like: https://gitea.techshare.cc/yourname/yourname-social-project.git)
    3. +
+
+ +
+

Step 5: Go Back to PowerShell/Terminal

+

Make sure you're in your project folder, then:

+
+ # Clone your repository (replace URL with your actual URL)
+ git clone https://gitea.techshare.cc/yourname/yourname-social-project.git

+ + # Go into the cloned folder
+ cd yourname-social-project

+ + # See what files you have
+ ls
+ # (Windows: use 'dir' instead of 'ls') +
+
+ +
+ + +
+
+ + +
+
+

Project Folder Structure

+
Slide 7 of 14
+
+ +
🗂️
+ +
+

Your Project Should Look Like This:

+
+ +
+ yourname-social-project/
+├── assets/
+│ └── css/
+│ ├── bulma.min.css # Bulma framework CSS
+│ └── style.css # Your custom CSS
+├── index.html # Your main HTML file
+├── starter_index.html # Your starter HTML template
+└── assets/
+ └── image/
+ └── logo.png # Your logo image +
+ +
+

Two Ways to Get Bulma:

+
+
+

Option A: Download (Recommended)

+
    +
  1. Go to bulma.io
    2. +
  2. Click "Download"
    3. +
  3. Place bulma.min.css in assets/css/ folder
    4. +
+
+
+

Option B: Use CDN

+

In your HTML head section:

+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+
+
+
+ +
+ + +
+
+ + +
+
+

Step 1: Add Bulma to Your Project

+
Slide 8 of 14
+
+ +
🔗
+ +
+

Add These Lines to Your HTML Head

+

Open starter_index.html in your text editor and add:

+
+ +
+ <head>
+ <!-- ... existing code ... -->
+
+ <!-- BULMA LOCAL FILE -->
+ <link rel="stylesheet" href="./assets/css/bulma.min.css">
+
+ <!-- Custom CSS -->
+ <link rel="stylesheet" href="./assets/css/style.css">
+</head> +
+ +
+

Test Your Setup:

+

Open starter_index.html in your browser. Right now it won't look different, but we're about to transform it!

+

Tip: Use VS Code or another text editor to edit your files. Right-click the file → "Open with" → Choose your editor.

+
+ +
+ + +
+
+ + +
+
+

Step 2: Transform the Navigation

+
Slide 9 of 14
+
+ +
🧭
+ +
+

Before: Basic HTML

+

Your starter navigation looks like this:

+
+ +
+ <nav>
+ <div>
+ <div>
+ <a href="#">
+ <div>M</div>
+ <span>Maxy</span>
+ </a>
+ </div>
+ </div>
+</nav> +
+ +
+

After: Bulma Styled

+

Change it to this (copy and replace):

+
+ +
+ <nav class="navbar is-fixed-top has-shadow">
+ <div class="container">
+ <div class="navbar-brand">
+ <a class="navbar-item" href="#">
+ <div class="bg-indigo-600 text-white font-bold text-xl w-10 h-10 rounded-lg flex items-center justify-center mr-2">
+ M
+ </div>
+ <span class="has-text-weight-bold is-size-4">Maxy</span>
+ </a>
+ <a role="button" class="navbar-burger" aria-label="menu">
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ </a>
+ </div>
+ </div>
+</nav> +
+ +
+

Refresh Your Browser!

+

Save your file and refresh the browser. You should now see a professional-looking navigation bar fixed at the top!

+
+ +
+ + +
+
+ + +
+
+

Step 3: Create Responsive Layout

+
Slide 10 of 14
+
+ +
📱
+ +
+

Find Your Main Content Section

+

Look for the section containing your content. It probably looks like:

+
+ +
+ <section>
+ <div>
+ <div>
+ <!-- Left Sidebar -->
+ <div>...</div>
+ </div>
+ </div>
+</section> +
+ +
+

Replace With Bulma Columns

+

Change it to this structure:

+
+ +
+ <section class="section" style="padding-top: 80px;">
+ <div class="container">
+ <div class="columns is-variable is-5">
+ <!-- Left Sidebar -->
+ <div class="column is-one-quarter">
+ <div class="card has-text-centered mb-5">
+ <!-- Profile Card -->
+ </div>
+ </div>
+
+ <!-- Main Feed -->
+ <div class="column">
+ <!-- Posts will go here -->
+ </div>
+
+ <!-- Right Sidebar -->
+ <div class="column is-one-quarter">
+ <!-- Suggestions -->
+ </div>
+ </div>
+ </div>
+</section> +
+ +
+

Test Responsive Design

+

Save and refresh. Now try resizing your browser window - the layout automatically adjusts for mobile, tablet, and desktop!

+
+ +
+ + +
+
+ + +
+
+

Step 4: Style Cards and Content

+
Slide 11 of 14
+
+ +
🎴
+ +
+

Before: Basic Profile Card

+

A simple div structure:

+
+ +
+ <div>
+ <div>JS</div>
+ <h2>John Smith</h2>
+ <p>@johnsmith</p>
+ <div>
+ <div>
+ <p>Posts</p>
+ <p>245</p>
+ </div>
+ </div>
+</div> +
+ +
+

After: Professional Bulma Card

+

Transform it with these classes:

+
+ +
+ <div class="card has-text-centered mb-5">
+ <div class="card-content">
+ <div class="post-avatar mx-auto mb-4" style="background-color: #ff5722;">
+ JS
+ </div>
+ <h2 class="title is-5">John Smith</h2>
+ <p class="subtitle is-6 has-text-grey">@johnsmith</p>
+
+ <div class="level is-mobile profile-stats mt-4">
+ <div class="level-item has-text-centered">
+ <div>
+ <p class="heading">Posts</p>
+ <p class="title is-5">245</p>
+ </div>
+ </div>
+ <!-- More stats here -->
+ </div>
+ </div>
+</div> +
+ +
+

Add Custom CSS

+

In your style.css file, add this for the avatar:

+
.post-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
+
+ +
+ + +
+
+ + +
+
+

Step 5: Style Buttons

+
Slide 12 of 14
+
+ +
🔘
+ +
+

Before: Plain Button

+
<button>Message</button>
+
+ +
+

After: Bulma Styled Button

+
<button class="button maxy-primary">Message</button>
+
+ +
+

Add Custom Button Styles

+

In your style.css file, add:

+
+ .maxy-primary {
+ background-color: #3273dc;
+ color: white;
+ border: none;
+}
+
+.maxy-primary:hover {
+ background-color: #2761bb;
+} +
+
+ +
+

Try Different Button Styles

+

Bulma has many button variants. Try these:

+
    +
  • button is-primary - Blue button
    • +
  • button is-success - Green button
    • +
  • button is-rounded - Rounded corners
    • +
  • button is-large - Big button
    • +
+
+ +
+ + +
+
+ + +
+
+

Step 6: Save Your Work to Gitea

+
Slide 13 of 14
+
+ +
💾
+ +
+

Once You're Done Customizing

+

Go back to PowerShell/Terminal and save your work:

+
+ +
+ # Make sure you're in your project folder
+ cd yourname-social-project

+ + # Check what files you changed
+ git status

+ + # Add all your changes
+ git add .

+ + # Commit with a message (describe what you did)
+ git commit -m "Added Bulma CSS and styled navigation"

+ + # Push to Gitea
+ git push origin main +
+ +
+

Check Your Work on Gitea

+

Go back to your browser and refresh your Gitea repository page. You should see your updated files!

+

Your teacher can now see your beautiful social media platform.

+
+ +
+ + +
+
+ + +
+
+

Your Challenges

+
Slide 14 of 14
+
+ +
🏆
+ +
+

Customize Your Platform

+

Now that you have the basics, make it your own!

+
+ +
+
+
+ Change the color scheme in style.css +
+ +
+
+ Add a post form with Bulma form classes +
+ +
+
+ Create a footer with social media icons +
+ +
+
+ Make the navigation menu actually work on mobile +
+
+ +
+

Remember to git add, git commit, and git push after each change!

+

This saves your work and lets your teacher see your progress.

+
+ +
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/g11-m3-2/Lesson 2_ Getting Started with Bulma.html b/g11-m3-2/Lesson 2_ Getting Started with Bulma.html new file mode 100644 index 0000000..779ecb3 --- /dev/null +++ b/g11-m3-2/Lesson 2_ Getting Started with Bulma.html @@ -0,0 +1,724 @@ + + + + + + Lesson 2: Getting Started with Bulma + + + + +
+ +
+
+

🎨 Getting Started with Bulma

+

Lesson 2: Build Beautiful Websites with Minimal CSS

+

Grade 11 Web Development

+
+ +
+

📏 Classroom Rules

+
    +
  • Experiment with every code example
    • +
  • Help classmates with Bulma classes
    • +
  • Share what you build
    • +
  • Ask "what if" questions
    • +
+
+ +
+

🎯 Learning Outcomes

+
    +
  • Set up Bulma in a project
    • +
  • Use Bulma's modifier classes
    • +
  • Build responsive layouts with columns
    • +
  • Style common components
    • +
  • Create a navigation bar
    • +
+
+ +
+

💡 Why Bulma Matters

+

Bulma's human-readable classes make it perfect for beginners. It's CSS-only (no JavaScript required) and built with modern Flexbox.

+
+ +
+

✨ Quick Bulma Demo

+ + + + + +
+
Column 1
+
Column 2
+
Column 3
+
+
+
+ + +
+
+

🚀 Bulma Setup

+
+ +
+
+

📦 Method 1: CDN (Easiest)

+
+<!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>
+
+ +
+

🔧 Method 2: NPM (Advanced)

+
+# 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';
+
+
+ +
+

🎯 Bulma's Philosophy

+

Bulma uses modifier classes that start with is- or has-

+
+
+
+

is-* modifiers

+

Change element's appearance

+ is-primary
+ is-large
+ is-rounded +
+
+
+
+

has-* modifiers

+

Change element's content

+ has-text-white
+ has-background-dark
+ has-text-weight-bold +
+
+
+
+ +
+

✏️ Quick Practice

+

Add classes to this button to make it:

+
    +
  1. Large size
    2. +
  2. Danger color
    3. +
  3. Rounded corners
    4. +
  4. Outlined style
    5. +
+
+
+

Your Code:

+ + +
+
+

Preview:

+
+ +
+

Solution: class="button is-large is-danger is-rounded is-outlined"

+
+
+
+
+ + +
+
+

📐 Bulma Layout System

+
+ +
+

🎯 Bulma's Secret: Flexbox

+

Bulma uses Flexbox for all layouts. The columns and column classes create responsive grids automatically.

+
+ +
+<!-- 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>
+ +
+
Column 1
+
Column 2
+
Column 3
+
Column 4
+
+ +
+
+

Half width

+
+
+

Auto width

+
+
+

Auto width

+
+
+ +
+

👨‍💻 Grid Builder

+

Create a 4-column layout where:

+
    +
  • First column takes 1/4 of space
    • +
  • Second column takes 1/2 of space
    • +
  • Last two columns share remaining space
    • +
+ +
+
+

Your Code:

+ + +
+
+

Preview:

+
+
+
Column 1
+
Column 2
+
Column 3
+
Column 4
+
+
+

Solution: Use is-one-quarter and is-half classes

+
+
+
+
+ + +
+
+

✨ Bulma Components

+
+ +
+

🎯 Ready-to-Use Components

+

Bulma includes styled components that work out of the box:

+
+ +
+
+
+

Navigation Bar

+ +
+<nav class="navbar"> + <div class="navbar-brand"> + <a class="navbar-item">Logo</a> + </div> +</nav>
+
+
+ +
+
+

Card Component

+
+
+
+ Image +
+
+
+

Card Title

+

Card content goes here

+
+
+
+<div class="card"> + <div class="card-content"> + <p class="title">Title</p> + <p>Content</p> + </div> +</div>
+
+
+
+ +
+
+
+

Form Elements

+
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+

Message & Notifications

+
+
+

Info Message

+
+
+ This is an info message +
+
+ +
+ + Success notification! +
+
+
+
+
+ + +
+
+

🎯 Student Project: Blog Layout

+
+ +
+

📝 Project Brief

+

Create a blog homepage with Bulma that includes:

+
    +
  1. Navigation bar with logo and 3 links
    2. +
  2. Hero section with title and subtitle
    3. +
  3. 3-column grid of blog posts
    4. +
  4. Footer with copyright
    5. +
+
+ +
+

👨‍💻 Build Your Blog

+
+
+

Your HTML:

+ + + +
+
+

Preview:

+
+ Preview will appear here +
+
+
+
+ +
+

✅ Lesson 2 Checklist

+
    +
  • ☑️ Understand Bulma setup
    • +
  • ☑️ Use is-* and has-* modifiers
    • +
  • ☑️ Create responsive grids
    • +
  • ☑️ Style buttons and forms
    • +
  • ☑️ Build a navigation bar
    • +
  • ☑️ Create a complete blog layout
    • +
+

Next Lesson: Tailwind CSS - Utility-First Approach!

+
+
+
+ +
+ +
+ Slide 1 of 5 +
+ +
+ + + + \ No newline at end of file diff --git a/g11-m3-4/.DS_Store b/g11-m3-4/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/g11-m3-4/.DS_Store differ diff --git a/g11-m3-4/README.md b/g11-m3-4/README.md index 3520d3e..2298e24 100644 --- a/g11-m3-4/README.md +++ b/g11-m3-4/README.md @@ -4,13 +4,13 @@ A complete full-stack web application with user authentication built with Flask ## 📁 Project Structure flask_app/ -├── app.py # Main Flask application -├── database.py # Database setup and functions -├── users.py # User authentication functions -├── users.db # SQLite database -├── requirements.txt # Python dependencies -├── venv/ # Virtual environment -└── templates/ # HTML templates +├── app.py +├── database.py +├── users.py +├── users.db +├── requirements.txt +├── venv/ +└── templates/ ├── base.html ├── home.html ├── login.html @@ -20,15 +20,37 @@ text ## 🚀 Quick Start -### 1. Create Project Structure +### 1. Create Project Scaffold (One Command!) ```bash -cd Desktop -mkdir flask_app +# Create all empty files and folders with one command: +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 -# Create all project files at once -cat > app.py << 'PYEOF' +# Create virtual environment +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 import database import users @@ -85,9 +107,9 @@ def logout(): if __name__ == '__main__': app.run(debug=True) -PYEOF +database.py - Database operations: -cat > database.py << 'DBEOF' +python import sqlite3 def init_db(): @@ -111,9 +133,9 @@ def get_db_connection(): conn = sqlite3.connect('users.db') conn.row_factory = sqlite3.Row return conn -DBEOF +users.py - User authentication: -cat > users.py << 'UEOF' +python from werkzeug.security import generate_password_hash, check_password_hash import database @@ -139,12 +161,10 @@ def login_user(username, password): return True, user else: return False, 'Invalid username or password!' -UEOF +5. Fill HTML Templates +templates/base.html: -# Create templates folder -mkdir templates - -cat > templates/base.html << 'HTML1EOF' +html @@ -184,9 +204,9 @@ cat > templates/base.html << 'HTML1EOF' {% block content %}{% endblock %} -HTML1EOF +templates/home.html: -cat > templates/home.html << 'HTML2EOF' +html {% extends "base.html" %} {% block title %}Home{% endblock %} @@ -201,9 +221,9 @@ cat > templates/home.html << 'HTML2EOF'

Please login or register.

{% endif %} {% endblock %} -HTML2EOF +templates/register.html: -cat > templates/register.html << 'HTML3EOF' +html {% extends "base.html" %} {% block title %}Register{% endblock %} @@ -218,9 +238,9 @@ cat > templates/register.html << 'HTML3EOF'

Already have an account? Login here

{% endblock %} -HTML3EOF +templates/login.html: -cat > templates/login.html << 'HTML4EOF' +html {% extends "base.html" %} {% block title %}Login{% endblock %} @@ -234,21 +254,7 @@ cat > templates/login.html << 'HTML4EOF'

Don't have an account? Register here

{% endblock %} -HTML4EOF -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 +6. Run the Application bash python app.py Visit: http://127.0.0.1:5000 diff --git a/g11-m3-m3/Lesson 3_ Tailwind CSS - Utility-First Framework.html b/g11-m3-m3/Lesson 3_ Tailwind CSS - Utility-First Framework.html new file mode 100644 index 0000000..a816fc5 --- /dev/null +++ b/g11-m3-m3/Lesson 3_ Tailwind CSS - Utility-First Framework.html @@ -0,0 +1,793 @@ + + + + + + Lesson 3: Tailwind CSS - Utility-First Framework + + + + +
+ +
+
+

Tailwind CSS

+

Lesson 3: Utility-First CSS Framework

+

Grade 11 Web Development

+
+ +
+

Classroom Guidelines

+
    +
  • + 1 + Experiment with utility class combinations +
    • +
  • + 2 + Help classmates understand Tailwind concepts +
    • +
  • + 3 + Complete all hands-on activities +
    • +
  • + 4 + Ask questions about anything unclear +
    • +
+
+ +
+

Learning Outcomes

+
    +
  • Understand the utility-first CSS philosophy
    • +
  • Use Tailwind's spacing and color system effectively
    • +
  • Build responsive layouts with Tailwind's breakpoints
    • +
  • Create custom components using utility classes
    • +
  • Compare Tailwind CSS with Bulma CSS
    • +
+
+ +
+

Why Tailwind CSS Matters

+

Tailwind CSS is the industry standard in modern web development. It provides complete design control while maintaining consistency and performance.

+

Unlike traditional frameworks, Tailwind doesn't impose design decisions - it gives you the tools to build exactly what you envision.

+
+ +
+

Quick Tailwind Demonstration

+
+ + + +
+ +
+
+

Responsive Column 1

+

This adjusts based on screen size

+
+
+

Responsive Column 2

+

Mobile: 1 column, Desktop: 3 columns

+
+
+

Responsive Column 3

+

Built with Tailwind's grid system

+
+
+
+
+ + +
+
+

Utility-First Philosophy

+
+ +
+
+

Traditional CSS Approach

+
+/* CSS File - styles.css */ +.btn-primary { + padding: 12px 24px; + background-color: #3b82f6; + color: white; + border-radius: 6px; + font-weight: 600; + border: none; + cursor: pointer; +} + +.btn-primary:hover { + background-color: #2563eb; +} + +.btn-danger { + background-color: #ef4444; +} + +.btn-danger:hover { + background-color: #dc2626; +} + +/* HTML File */ +<button class="btn-primary">Save</button> +<button class="btn-primary btn-danger">Delete</button>
+
+ +
+

Tailwind CSS Approach

+
+<!-- No separate CSS file needed --> +<button class="px-6 py-3 bg-blue-500 text-white + rounded-lg font-semibold hover:bg-blue-600 + transition-colors"> + Save +</button> + +<button class="px-6 py-3 bg-red-500 text-white + rounded-lg font-semibold hover:bg-red-600 + transition-colors"> + Delete +</button>
+
+
+ +
+

Tailwind's Building Blocks

+
+
+
Spacing
+ p-4, m-2, mt-8 +

Padding, margin, and gap utilities

+
+
+
Colors
+ bg-blue-500, text-red-600 +

Background, text, and border colors

+
+
+
Typography
+ text-lg, font-bold +

Font size, weight, and alignment

+
+
+
Layout
+ flex, grid-cols-3 +

Flexbox and Grid utilities

+
+
+
Borders
+ border, rounded-lg +

Border styles and radius

+
+
+
Effects
+ shadow-lg, hover:scale-105 +

Shadows, transitions, transforms

+
+
+
+ +
+

Practice: Convert CSS to Tailwind

+

Convert this traditional CSS to Tailwind utility classes:

+ +
+/* Traditional CSS */ +.card { + padding: 20px; + margin-top: 16px; + background-color: #10b981; + color: white; + border-radius: 12px; + font-weight: bold; + text-align: center; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + border: 1px solid #059669; +}
+ +
+ +
+ p-5 mt-4 bg-emerald-500 text-white rounded-xl font-bold text-center shadow-md border border-emerald-600 +
+

Try applying these classes to a div element and see the result.

+
+
+
+ + +
+
+

Responsive Design with Tailwind

+
+ +
+

Mobile-First Breakpoint System

+

Tailwind uses a mobile-first approach where styles apply to all screen sizes, then you can override them for larger screens.

+ +
+<!-- Mobile: 1 column, Tablet: 2 columns, Desktop: 4 columns --> +<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> + <div class="p-4 bg-blue-50 border rounded">Item 1</div> + <div class="p-4 bg-blue-50 border rounded">Item 2</div> + <div class="p-4 bg-blue-50 border rounded">Item 3</div> + <div class="p-4 bg-blue-50 border rounded">Item 4</div> +</div>
+ +
+
+
sm: (Small)
+
≥640px
+ sm:text-lg +
+
+
md: (Medium)
+
≥768px
+ md:flex +
+
+
lg: (Large)
+
≥1024px
+ lg:w-1/2 +
+
+
xl: (Extra Large)
+
≥1280px
+ xl:grid-cols-4 +
+
+
2xl: (2X Large)
+
≥1536px
+ 2xl:container +
+
+
+ +
+

Hands-On: Build a Responsive Card

+

Create a card component that responds differently on various screen sizes:

+
    +
  • Full width on mobile devices
    • +
  • Half width on tablets (≥768px)
    • +
  • One-third width on desktops (≥1024px)
    • +
  • Include padding, shadow, and rounded corners
    • +
+ +
+
+

Your Tailwind Code:

+ + +
+
+

Live Preview:

+
+
+

Card Title

+

This card should be responsive. On mobile it takes full width, on tablet half width, and on desktop one-third width.

+
+
+

Resize your browser window to see the responsiveness.

+
+
+
+
+ + +
+
+

Comparing Tailwind and Bulma

+
+ +
+
+

Bulma CSS (Component-Based)

+
+<!-- Bulma Button --> +<button class="button is-primary is-large is-rounded"> + Click me +</button> + +<!-- Bulma Card --> +<div class="card"> + <div class="card-content"> + <p class="title">Card Title</p> + </div> +</div> + +<!-- Bulma Grid --> +<div class="columns"> + <div class="column">Column 1</div> + <div class="column">Column 2</div> +</div>
+
+

Strengths:

+
    +
  • Excellent for beginners and rapid prototyping
    • +
  • Human-readable, semantic class names
    • +
  • Consistent design out of the box
    • +
  • No JavaScript required
    • +
  • Great for projects where design consistency is priority
    • +
+
+
+ +
+

Tailwind CSS (Utility-First)

+
+<!-- Tailwind Button --> +<button class="px-6 py-3 bg-blue-500 text-white + rounded-full text-lg font-semibold + hover:bg-blue-600 transition-colors"> + Click me +</button> + +<!-- Tailwind Card --> +<div class="p-6 shadow-lg rounded-lg border"> + <p class="text-2xl font-bold">Card Title</p> +</div> + +<!-- Tailwind Grid --> +<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> + <div class="p-4">Column 1</div> + <div class="p-4">Column 2</div> +</div>
+
+

Strengths:

+
    +
  • Complete design control and customization
    • +
  • Smaller CSS file sizes in production
    • +
  • Current industry standard (2026)
    • +
  • Excellent for unique, custom designs
    • +
  • Better for team collaboration on large projects
    • +
+
+
+
+ +
+

Framework Selection Exercise

+

Based on what you've learned about both frameworks, which would you choose for these projects and why?

+ +
+
+

Project A: University Department Website

+

Needs to match existing university branding, multiple content editors will maintain it, must be accessible and consistent across all pages.

+
+ + +
+
+ +
+

Project B: Startup Analytics Dashboard

+

Unique data visualization needs, complex interactive components, design system needs to be created from scratch, team of 5 developers.

+
+ + +
+
+
+ + + +
+
+ + +
+
+

Final Project: Blog Enhancement

+
+ +
+

Project Brief

+

You will enhance a basic blog layout using Tailwind CSS. Start with the provided HTML structure and apply Tailwind utility classes to create a modern, responsive blog.

+ +
+<!-- Starting HTML Structure --> +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>My Tailwind Blog</title> + <script src="https://cdn.tailwindcss.com"></script> +</head> +<body> + <header> + <h1>My Blog</h1> + <nav> + <a href="#">Home</a> + <a href="#">Articles</a> + <a href="#">About</a> + </nav> + </header> + + <main> + <article> + <h2>Blog Post Title</h2> + <p>Blog post content goes here...</p> + </article> + </main> + + <footer> + <p>© 2026 My Blog</p> + </footer> +</body> +</html>
+
+ +
+

Enhancement Requirements

+

Apply Tailwind CSS to achieve the following:

+ +
+
+

1. Navigation Bar

+

Create a responsive navigation bar with logo, links, and mobile hamburger menu.

+
+ +
+

2. Hero Section

+

Add a hero section with gradient background, centered title, and call-to-action button.

+
+ +
+

3. Blog Posts Grid

+

Create a responsive grid of blog posts (1 column mobile, 2 tablet, 3 desktop).

+
+ +
+

4. Footer

+

Design a footer with social links, copyright, and newsletter signup.

+
+
+ +
+

Implementation Tips

+
    +
  • Use container mx-auto for centering content
    • +
  • Apply md: and lg: prefixes for responsive behavior
    • +
  • Utilize Tailwind's spacing scale (p-4, m-2, gap-4, etc.)
    • +
  • Add hover states with hover: prefix
    • +
  • Use flex and grid for layouts
    • +
+
+ +
+

Submit Your Project

+ + +
+
+ +
+

Lesson 3 Completion Checklist

+
    +
  • + + Understand utility-first CSS philosophy +
    • +
  • + + Can use Tailwind's spacing and color system +
    • +
  • + + Can create responsive layouts with breakpoints +
    • +
  • + + Can compare Tailwind and Bulma effectively +
    • +
  • + + Have enhanced a blog layout with Tailwind +
    • +
+
+
+
+ +
+ +
+ Slide 1 of 5 +
+ +
+ + + + \ No newline at end of file