Transform basic HTML into a fully styled social media website
-A responsive social media platform with:
-Bulma is a free, open-source CSS framework based on Flexbox. It provides ready-to-use frontend components for building modern, responsive websites.
-Unlike some other frameworks, Bulma is pure CSS - it doesn't require JavaScript to function, making it lightweight and easy to use!
-We'll use Git to download our starter template. Follow these steps:
-Let's create a folder for our project:
-If you just installed Git on Windows, close and reopen PowerShell before continuing. This ensures Git commands work properly.
-Now we'll get our starter code:
-Remember to use YOUR ACTUAL NAME in the project name! This helps your teacher identify your work.
-After creating your repository:
-Make sure you're in your project folder, then:
-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
- In your HTML head section:
-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>
- 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.
-Your starter navigation looks like this:
-<nav>
- <div>
- <div>
- <a href="#">
- <div>M</div>
- <span>Maxy</span>
- </a>
- </div>
- </div>
-</nav>
- 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>
- Save your file and refresh the browser. You should now see a professional-looking navigation bar fixed at the top!
-Look for the section containing your content. It probably looks like:
-<section>
- <div>
- <div>
- <!-- Left Sidebar -->
- <div>...</div>
- </div>
- </div>
-</section>
- 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>
- Save and refresh. Now try resizing your browser window - the layout automatically adjusts for mobile, tablet, and desktop!
-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>
- 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>
- In your style.css file, add this for the avatar:
-In your style.css file, add:
-.maxy-primary {
- background-color: #3273dc;
- color: white;
- border: none;
-}
-
-.maxy-primary:hover {
- background-color: #2761bb;
-}
- Bulma has many button variants. Try these:
-Go back to PowerShell/Terminal and save your work:
-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.
-Now that you have the basics, make it your own!
-Remember to git add, git commit, and git push after each change!
-This saves your work and lets your teacher see your progress.
-