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. Download and run the installer
  3. Click "Next" through all the options (defaults are fine)
  4. When finished, open PowerShell

For Mac:

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

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. Go to: https://gitea.techshare.cc/technolyceum/g11-m3
  3. Login with your username (ask your teacher if you don't have one)

Step 3: Use the Template

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

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. Click it and copy the URL (it should look like: https://gitea.techshare.cc/yourname/yourname-social-project.git)

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. Click "Download"
  3. Place bulma.min.css in assets/css/ folder

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.