diff --git a/Building a Social Media Platform with Bulma CSS.html b/Building a Social Media Platform with Bulma CSS.html new file mode 100644 index 0000000..d82c5ae --- /dev/null +++ b/Building a Social Media Platform with 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