g11s7/ksenia-tailwind-project
1
0
Fork 0
generated from technolyceum/g11-m3
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d2767a2e57f692547acafcd97e788af34c075033
ksenia-tailwind-project/README.md
g11s7 d2767a2e57 Initial commit
2026-01-15 14:23:50 +00:00

1595 lines
64 KiB
Markdown
Raw Blame History

# Building a Modern Social Media Platform with Bulma CSS or Tailwindcss
This guide will walk you through the process of transforming a basic HTML structure ([starter_index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/starter_index.html)) into a fully styled modern social media platform ([index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/index.html)) using the Bulma CSS framework.
## What is Bulma?
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 CSS frameworks, Bulma is **pure CSS** and does **not require JavaScript** to function, making it lightweight and easy to implement.
### 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 the components you need
- **Modern**: Clean, minimalist design by default
## Prerequisites
- Basic understanding of HTML
- A text editor (like VS Code, Sublime Text, etc.)
- A modern web browser for testing
## Setting Up Your Project Files
Before adding Bulma classes to your HTML, you need to properly set up your project structure and CSS files.
### Step 1: Create the Proper Folder Structure
Create the following folder structure in your project:
```
your-project-folder/
├── 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
```
### Step 2: Obtain Bulma CSS Files
You have two options to get the Bulma CSS file:
#### Option A: Download and Place Locally (Recommended for Beginners)
1. Go to the official Bulma website: https://bulma.io/
2. Click on "Download" and select "Standalone version"
3. Extract the downloaded file and find the `bulma.min.css` file
4. Place the `bulma.min.css` file in your [assets/css](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project:%20CMS%20Website/g11-m3/bulma_version/assets/css) folder
Alternatively, you can download it directly from: https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css
#### Option B: Use CDN (Content Delivery Network)
Instead of downloading the file, you can link directly to Bulma hosted on a CDN by replacing the local link with:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
```
##### Advantages of CDN approach:
- No need to download and store files locally
- Potentially faster loading if users have already cached the file from another site
- Automatic updates when you change the version in the URL
##### Disadvantages of CDN approach:
- Requires an internet connection to load the styles
- Slight dependency risk if the CDN goes down (though rare with major CDNs)
- Less control over the exact version used
### Step 3: Create Your Custom Style Sheet
Create a file called [style.css](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project:%20CMS%20Website/g11-m3/bulma_version/assets/css/style.css) in your [assets/css](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project:%20CMS%20Website/g11-m3/bulma_version/assets/css) folder to add your custom styles that complement Bulma.
## Step-by-Step Transformation Guide
### Step 1: Setting Up Bulma in Your Project
First, you need to add the Bulma CSS framework to your HTML file. In the [head](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project:%20CMS%20Website/g11-m3/bulma_version/simple_version.html#L7-L11) section of your HTML document, add the following links:
```html
<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>
```
The first link imports the Bulma CSS framework from your local assets folder, and the second imports your custom styles that complement Bulma.
### Step 2: Applying Bulma Classes to Your Navigation
In the [starter_index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/starter_index.html) file, the navigation is basic HTML. Transform it using Bulma classes:
**Before (starter version):**
```
<!-- Navigation Bar -->
<nav>
<div>
<div>
<a href="#">
<!-- Logo Image -->
<div>
M
</div>
<span>Maxy</span>
</a>
<!-- Mobile menu button -->
<a role="button" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
</div>
</nav>
```
**After (improved version):**
```
<nav class="navbar is-fixed-top has-shadow">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<!-- Logo Image -->
<div class="bg-indigo-600 text-white font-bold text-xl w-10 h-10 rounded-lg flex items-center justify-center mr-2 animate-float">
M
</div>
<span class="has-text-weight-bold is-size-4 has-text-maxy">Maxy</span>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item is-active">
<span class="icon">
<!-- Home icon would go here -->
</span>
<span class="ml-2">Home</span>
</a>
<!-- More navigation items -->
</div>
</div>
</div>
</nav>
```
#### Key Bulma Classes Used:
- `navbar`: Creates a navigation bar component
- `is-fixed-top`: Fixes the navbar at the top of the page
- `has-shadow`: Adds a shadow to the navbar
- `container`: Centers content and adds padding
- `navbar-brand`: Contains the logo and brand name
- `navbar-item`: An item inside the navbar (links, buttons, etc.)
- `navbar-burger`: Creates a responsive hamburger menu for mobile
- `navbar-menu`: Contains the navigation items
- `navbar-end`: Aligns navbar items to the right
- `is-active`: Highlights the currently active page
- `icon`: Creates an icon container
- `ml-2`: Adds left margin (margin-left: 0.5rem)
- `has-text-weight-bold`: Makes text bold
- `is-size-4`: Sets font size to level 4
### Step 3: Creating Responsive Layout with Columns
Let's compare the transformation of the main content area using Bulma's grid system:
#### Before (Basic HTML Structure)
```
<section>
<div>
<div>
<!-- Left Sidebar -->
<div>
<!-- Profile Card -->
</div>
</div>
</div>
</section>
```
#### After (Bulma Styled Version)
```
<section class="section" style="padding-top: 80px;">
<div class="container">
<div class="columns is-variable is-5">
<div class="column is-one-quarter">
<!-- Left Sidebar -->
<div class="card has-text-centered mb-5">
<!-- Profile Card Content -->
</div>
</div>
<div class="column">
<!-- Main Feed Content -->
</div>
<div class="column is-one-quarter">
<!-- Right Sidebar -->
</div>
</div>
</div>
</section>
```
#### Key Bulma Classes Used:
- `section`: Adds padding around content
- `columns`: Creates a row of columns
- `column`: Defines a column within the row
- `is-one-quarter`: Makes the column take up 1/4 of the row width
- `is-variable`: Allows spacing between columns to be adjusted
- `is-5`: Sets column spacing to level 5 (2rem)
- `card`: Creates a box with shadow for content
- `has-text-centered`: Centers text alignment
- `mb-5`: Adds bottom margin (margin-bottom: 1.5rem)
### Step 4: Creating Responsive Layout with Columns
Transform your main content area to use Bulma's grid system:
**Before:**
```
<section>
<div>
<div>
<!-- Left Sidebar -->
<div>
<!-- Profile Card -->
</div>
</div>
</div>
</section>
```
**After:**
```
<section class="section" style="padding-top: 80px;">
<div class="container">
<div class="columns is-variable is-5">
<div class="column is-one-quarter">
<!-- Left Sidebar -->
<div class="card has-text-centered mb-5">
<!-- Profile Card Content -->
</div>
</div>
<div class="column">
<!-- Main Feed Content -->
</div>
<div class="column is-one-quarter">
<!-- Right Sidebar -->
</div>
</div>
</div>
</section>
```
#### Key Bulma Classes Used:
- `section`: Adds padding around content
- `columns`: Creates a row of columns
- `column`: Defines a column within the row
- `is-one-quarter`: Makes the column take up 1/4 of the row width
- `is-variable`: Allows spacing between columns to be adjusted
- `is-5`: Sets column spacing to level 5 (2rem)
- `card`: Creates a box with shadow for content
- `has-text-centered`: Centers text alignment
- `mb-5`: Adds bottom margin (margin-bottom: 1.5rem)
### Step 5: Styling Cards and Content Elements
Apply Bulma classes to make cards and content look professional:
**Before:**
```
<div>
<div>
<div>JS</div>
<h2>John Smith</h2>
<p>@johnsmith</p>
<div>
<div>
<div>
<p>Posts</p>
<p>245</p>
</div>
</div>
<!-- More stats -->
</div>
</div>
</div>
```
**After:**
```
<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>
<div class="level-item has-text-centered">
<div>
<p class="heading">Followers</p>
<p class="title is-5">1.2K</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Following</p>
<p class="title is-5">562</p>
</div>
</div>
</div>
</div>
</div>
```
#### Key Bulma Classes Used:
- `title`: Styles heading text
- `subtitle`: Styles subheading text
- `is-5`: Font size level 5
- `is-6`: Font size level 6
- `has-text-grey`: Grey text color
- `level`: Flexible horizontal layout component
- `is-mobile`: Makes level responsive for mobile
- `level-item`: Individual item in a level component
- `mx-auto`: Margin left and right auto (centers element)
- `mt-4`: Top margin (margin-top: 1rem)
- `heading`: Smaller heading text for labels
### Step 6: Adding Buttons with Bulma
Replace basic buttons with styled Bulma buttons:
**Before:**
```
<button>Message</button>
```
**After:**
```
<button class="button maxy-primary">Message</button>
```
#### Key Bulma Classes Used:
- `button`: Creates a styled button
- `maxy-primary`: Custom class defined in style.css for our brand color
### Step 7: Understanding Custom CSS
While Bulma provides many built-in styles, we've added custom CSS in [style.css](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project:%20CMS%20Website/g11-m3/bulma_version/assets/css/style.css) to enhance the design:
```css
/* Custom button styles */
.maxy-primary {
background-color: #3273dc;
color: white;
}
.maxy-primary:hover {
background-color: #2761bb;
}
/* Avatar styles - Fixed distortion */
.post-avatar {
width: 50px;
height: 50px;
min-width: 50px;
min-height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
```
## Advantages of Using Bulma
1. **Responsive by Default**: Everything automatically adapts to different screen sizes
2. **No JavaScript Required**: Pure CSS framework means faster loading and fewer conflicts
3. **Modern Design**: Clean aesthetic without additional customization needed
4. **Flexbox-Based**: Modern CSS technology for reliable layouts
5. **Extensive Documentation**: Well-documented with many examples
6. **Modular Approach**: Only use the parts you need
7. **Consistent Spacing**: Built-in spacing utilities make design consistent
## Common Bulma Utilities
Throughout the project, you'll see various utility classes:
- **Spacing**: `m-*` (margin), `p-*` (padding), combined with directions (`t`, `b`, `l`, `r`) and sizes (1-6)
- **Text**: `has-text-centered`, `has-text-weight-bold`, `is-capitalized`
- **Colors**: `has-text-primary`, `has-background-info`, etc.
- **Typography**: `title`, `subtitle`, `is-size-1` through `is-size-7`
## Troubleshooting Tips
1. **Layout Not Responsive**: Ensure you're using the `columns` and `column` classes correctly
2. **Elements Overlapping**: Check that you're using proper spacing classes (`mt-*`, `mb-*`, `pt-*`, `pb-*`)
3. **Buttons Not Styled**: Make sure you've added the `button` class
4. **Navigation Not Working on Mobile**: Verify that your navbar-burger and navbar-menu IDs match
## Next Steps
Once you've successfully transformed your [starter_index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/starter_index.html) into the full featured [index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/index.html), consider exploring more Bulma components like modals, dropdowns, panels, and tabs to further enhance your social media platform.
# Building a Social Media Interface with Tailwind CSS
This guide will walk you through how to transform the basic HTML file ([starter_index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/tailwindcss_version/starter_index.html)) into a modern, animated social media interface ([index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/tailwindcss_version/index.html)). We'll cover everything from basic HTML structure to CSS styling with Tailwind CSS and JavaScript functionality.
## Table of Contents
1. [Prerequisites](#prerequisites)
2. [Understanding the Files](#understanding-the-files)
3. [What is Tailwind CSS?](#what-is-tailwind-css)
4. [Step-by-Step Transformation](#step-by-step-transformation)
5. [Key Tailwind CSS Classes Used](#key-tailwind-css-classes-used)
6. [Animations Explained](#animations-explained)
7. [Additional Features](#additional-features)
8. [Complete Code Examples](#complete-code-examples)
9. [Conclusion](#conclusion)
## Prerequisites
Before starting, you'll need:
- A text editor (like VSCode, Sublime Text, or Atom)
- A modern web browser (Yandex)
- Basic understanding that HTML creates structure, CSS adds styling, and JavaScript adds interactivity
## Understanding the Files
- **starter_index.html**: This is the basic HTML structure without styling - think of it as the skeleton
- **index.html**: This is the final product with Tailwind CSS styling, animations, and enhanced functionality
## What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that allows you to style your HTML directly using class names. Instead of writing traditional CSS, you combine utility classes directly in your HTML to achieve the design you want.
For example:
- Traditional CSS approach: Create a `.button` class in a separate CSS file with properties
- Tailwind approach: Apply classes directly like `<button class="bg-blue-500 text-white p-2 rounded">Click me</button>`
### Benefits of Tailwind CSS:
- Faster development
- Consistent design
- Highly customizable
- Responsive by default
## Step-by-Step Transformation
### Step 1: Setting up Tailwind CSS
To use Tailwind CSS in your project, you need to include it via a CDN (Content Delivery Network). A CDN is a service that hosts files and delivers them to users quickly from locations near them.
Add this script in the `<head>` section of your HTML file:
```html
<script src="https://cdn.tailwindcss.com"></script>
```
This line tells the browser to load Tailwind CSS from the internet when your page loads.
### Step 2: Adding Meta Viewport Tag
Include this tag in the `<head>` section to ensure your design works well on mobile devices:
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
### Step 3: Basic Structure
Start with the standard HTML5 template:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
```
### Step 4: Applying Tailwind CSS Classes
Now we'll transform each section using Tailwind CSS classes:
#### Navigation Bar
Original starter version:
```html
<nav>
<div>
<div>
<a href="#">
<!-- Logo Image -->
<div>
M
</div>
<span>Maxy</span>
</a>
<!-- Mobile menu button -->
<a role="button" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarMenu">
<div>
<a>
<span>
<!-- Home icon would go here -->
</span>
<span>Home</span>
</a>
<a>
<span>
<!-- Hashtag icon would go here -->
</span>
<span>Explore</span>
</a>
<a>
<span>
<!-- Bell icon would go here -->
</span>
<span>Notifications</span>
</a>
<a>
<span>
<!-- Envelope icon would go here -->
</span>
<span>Messages</span>
</a>
<a>
<span>
<!-- User icon would go here -->
</span>
<span>Profile</span>
</a>
<a>
<span>
<!-- User icon would go here -->
</span>
<button>Message</button>
</a>
</div>
</div>
</div>
</nav>
```
Enhanced with Tailwind CSS:
```html
<nav class="bg-white shadow-md fixed top-0 left-0 w-full z-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<a href="#" class="flex items-center">
<!-- Logo Image -->
<div class="bg-indigo-600 text-white font-bold text-xl w-10 h-10 rounded-lg flex items-center justify-center mr-2 animate-float">
M
</div>
<span class="text-xl font-bold text-gray-800">Maxy</span>
</a>
</div>
<!-- Mobile menu button -->
<div class="flex md:hidden items-center">
<button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100 focus:outline-none">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<div class="hidden md:flex md:items-center md:space-x-6">
<a href="#" class="flex items-center text-indigo-600 bg-indigo-50 rounded-lg px-3 py-2">
Home
</a>
<a href="#" class="flex items-center text-gray-600 hover:text-indigo-600 px-3 py-2">
Explore
</a>
<a href="#" class="flex items-center text-gray-600 hover:text-indigo-600 px-3 py-2">
Notifications
</a>
<a href="#" class="flex items-center text-gray-600 hover:text-indigo-600 px-3 py-2">
Messages
</a>
<a href="#" class="flex items-center text-gray-600 hover:text-indigo-600 px-3 py-2">
Profile
</a>
<a href="#" class="ml-4">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg animate-pulse-slow">
Message
</button>
</a>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white border-t">
<div class="pt-2 pb-3 space-y-1 px-4">
<a href="#" class="flex items-center text-indigo-600 bg-indigo-50 rounded-lg px-3 py-2 mb-2">
Home
</a>
<a href="#" class="flex items-center text-gray-600 hover:text-indigo-600 px-3 py-2 mb-2">
Explore
</a>
<a href="#" class="flex items-center text-gray-600 hover:text-indigo-600 px-3 py-2 mb-2">
Notifications
</a>
<a href="#" class="flex items-center text-gray-600 hover:text-indigo-600 px-3 py-2 mb-2">
Messages
</a>
<a href="#" class="flex items-center text-gray-600 hover:text-indigo-600 px-3 py-2 mb-2">
Profile
</a>
<a href="#" class="mt-2">
<button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg">
Message
</button>
</a>
</div>
</div>
</nav>
```
**Explanation of Tailwind classes:**
- `bg-white`: Sets background color to white
- `shadow-md`: Adds medium shadow for depth
- `fixed top-0 left-0 w-full`: Makes navigation stick to top of screen
- `z-10`: Ensures navigation appears above other elements
- `max-w-7xl`: Limits width to extra-large size
- `mx-auto`: Centers the container horizontally
- `px-4`: Adds horizontal padding
- `flex justify-between`: Creates flexible layout with items spaced at edges
- `h-16`: Sets height to 4rem (64px)
- `items-center`: Vertically centers items
### Step 5: Creating the Main Content Area
Add responsive layouts using Tailwind's flexbox utilities:
```html
<main class="pt-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="flex flex-col lg:flex-row gap-6">
<!-- Left Sidebar -->
<div class="lg:w-1/4 w-full">
<!-- Profile card -->
</div>
<!-- Main Feed -->
<div class="lg:w-3/4 w-full">
<!-- Posts -->
</div>
</div>
</main>
```
**Class explanations:**
- `pt-20`: Adds top padding (to account for fixed navigation)
- `flex flex-col lg:flex-row`: Stacks vertically on small screens, arranges horizontally on large screens
- `gap-6`: Adds space between elements
- `lg:w-1/4`: On large screens, takes 1/4 of available width
- `w-full`: Takes full width on smaller screens
### Step 6: Adding Animations
Create custom animations by defining keyframes in a style tag:
```html
<style>
.comment-reply { transition: all 0.3s ease; }
.comment-reply:hover { margin-left: 10px; }
/* Animation keyframes */
.animate-fadeIn {
animation: fadeIn 1s ease-out;
}
.animate-slideUp {
animation: slideUp 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-pulse-slow {
animation: pulse-slow 1.5s ease-in-out infinite alternate;
}
@keyframes fadeIn {
0% { opacity: 0; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
0% {
opacity: 0;
transform: translateY(50px) rotate(5deg);
}
100% {
opacity: 1;
transform: translateY(0) rotate(0);
}
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
@keyframes pulse-slow {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
}
100% {
transform: scale(1.1);
box-shadow: 0 0 0 15px rgba(99, 102, 241, 0);
}
}
.hover\:animate-pulse {
transition: all 0.3s ease;
}
.hover\:animate-pulse:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
</style>
```
Then apply these animations to elements:
```html
<div class="bg-white rounded-xl shadow p-5 animate-fadeIn">
<!-- Content -->
</div>
```
## Key Tailwind CSS Classes Used
### Colors
- `bg-indigo-600`: Indigo background color
- `text-white`: White text color
- `text-gray-800`: Dark gray text
### Spacing
- `p-5`: Padding on all sides
- `m-4`: Margin on all sides
- `mt-6`: Top margin
- `mb-4`: Bottom margin
### Layout
- `flex`: Creates flexible container
- `grid`: Creates grid layout
- `w-full`: Full width
- `h-screen`: Full viewport height
### Typography
- `font-bold`: Bold text
- `text-xl`: Extra large text
- `text-center`: Centered text
### Borders & Effects
- `rounded-lg`: Rounded corners
- `shadow-lg`: Large shadow
- `border`: Adds border
### Responsive Design
- `md:`: Styles applied on medium screens and larger
- `lg:`: Styles applied on large screens and larger
- `sm:flex`: Flex layout on small screens
## Animations Explained
### Fade In Animation
Gradually increases opacity from 0 to 1 while scaling up from 80% to 100%. Great for making elements appear smoothly.
### Slide Up Animation
Moves elements upward from below their final position while rotating slightly for emphasis. Creates a dynamic entrance effect.
### Float Animation
Gently moves elements up and down continuously. Good for highlighting important elements like avatars.
### Pulse Animation
Gently scales elements and adds a growing/shrinking glow effect. Draws attention to interactive elements like buttons.
## Additional Features
### Professional Navigation
- Clean, text-only navigation links
- Consistent styling across desktop and mobile
- Hover effects for better user feedback
### Responsive Design
- Adapts to different screen sizes
- Mobile-friendly navigation menu
- Properly spaced elements on all devices
### Accessibility Considerations
- Semantic HTML structure
- Proper contrast ratios
- Keyboard navigable elements
## Complete Code Examples
### Starter Index HTML
Here is the complete code for [starter_index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/tailwindcss_version/starter_index.html):
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maxy - Social Platform</title>
</head>
<body>
<!-- Navigation Bar -->
<nav>
<div>
<div>
<a href="#">
<!-- Logo Image -->
<div>
M
</div>
<span>Maxy</span>
</a>
<!-- Mobile menu button -->
<a role="button" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarMenu">
<div>
<a>
<span>
<!-- Home icon would go here -->
</span>
<span>Home</span>
</a>
<a>
<span>
<!-- Hashtag icon would go here -->
</span>
<span>Explore</span>
</a>
<a>
<span>
<!-- Bell icon would go here -->
</span>
<span>Notifications</span>
</a>
<a>
<span>
<!-- Envelope icon would go here -->
</span>
<span>Messages</span>
</a>
<a>
<span>
<!-- User icon would go here -->
</span>
<span>Profile</span>
</a>
<a>
<span>
<!-- User icon would go here -->
</span>
<button>Message</button>
</a>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<section>
<div>
<div>
<!-- Left Sidebar -->
<div>
<!-- Profile Card -->
<div>
<div>
<div>
JS
</div>
<h2>John Smith</h2>
<p>@johnsmith</p>
<div>
<div>
<div>
<p>Posts</p>
<p>245</p>
</div>
</div>
<div>
<div>
<p>Followers</p>
<p>1.2K</p>
</div>
</div>
<div>
<div>
<p>Following</p>
<p>562</p>
</div>
</div>
</div>
</div>
</div>
<!-- Removed Trending Card -->
</div>
<!-- Main Feed -->
<div>
<!-- Create Post Card -->
<div>
<div>
<div>
<textarea placeholder="What's happening?"></textarea>
</div>
<div>
<div>
<button>
<span>
<!-- Image icon would go here -->
</span>
</button>
<button>
<span>
<!-- Smile icon would go here -->
</span>
</button>
<button>
<span>
<!-- Chart icon would go here -->
</span>
</button>
</div>
<button>
Send a Message
</button>
</div>
</div>
</div>
<div>
<article>
<div>
<div>
BM
</div>
</div>
<div>
<div>
<p>
<strong>Barbara Middleton</strong>
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros
lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris
sit amet dolor blandit rutrum. Nunc in tempus turpis.
<br />
<small><a>Like</a> · <a>Reply</a> · 3 hrs</small>
</p>
</div>
<article>
<div>
<div>
SB
</div>
</div>
<div>
<div>
<p>
<strong>Sean Brown</strong>
<br />
Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis
leo feugiat.
<br />
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
</p>
</div>
<article>
<div>
<div>
SJ
</div>
</div>
<div>
<div>
<p>
<strong>Sarah Johnson</strong>
<br />
Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem
cursus ullamcorper sit amet nec massa.
<br />
<small><a>Like</a> · <a>Reply</a> · 1 hr</small>
</p>
</div>
</div>
</article>
<article>
<div>
<div>
MC
</div>
</div>
<div>
<div>
<p>
<strong>Michael Chen</strong>
<br />
Morbi vitae diam et purus tincidunt porttitor vel vitae augue.
Praesent malesuada metus sed pharetra euismod. Cras tellus odio,
tincidunt iaculis diam non, porta aliquet tortor.
<br />
<small><a>Like</a> · <a>Reply</a> · 45 mins</small>
</p>
</div>
</div>
</article>
</div>
</article>
<article>
<div>
<div>
KE
</div>
</div>
<div>
<div>
<p>
<strong>Kayli Eunice</strong>
<br />
Sed convallis scelerisque mauris, non pulvinar nunc mattis vel.
Maecenas varius felis sit amet magna vestibulum euismod malesuada
cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id
feugiat.
<br />
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
</p>
</div>
</div>
</article>
</div>
</article>
<article>
<div>
<div>
UU
</div>
</div>
<div>
<div>
<p class="control">
<textarea placeholder="Add a comment..."></textarea>
</p>
</div>
<div>
<p class="control">
<button>Post comment</button>
</p>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</section>
<!-- Scripts -->
<script>
// Mobile menu toggle
document.addEventListener('DOMContentLoaded', () => {
const navbarBurger = document.querySelector('.navbar-burger');
if(navbarBurger) {
navbarBurger.addEventListener('click', () => {
const target = navbarBurger.dataset.target;
const targetElement = document.getElementById(target);
navbarBurger.classList.toggle('is-active');
targetElement.classList.toggle('is-active');
});
}
});
</script>
</body>
</html>
```
### Final Index HTML
Here is the complete code for [index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/tailwindcss_version/index.html):
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maxy - Social Platform</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.comment-reply { transition: all 0.3s ease; }
.comment-reply:hover { margin-left: 10px; }
/* Animation keyframes */
.animate-fadeIn {
animation: fadeIn 1s ease-out;
}
.animate-slideUp {
animation: slideUp 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-pulse-slow {
animation: pulse-slow 1.5s ease-in-out infinite alternate;
}
@keyframes fadeIn {
0% { opacity: 0; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
0% {
opacity: 0;
transform: translateY(50px) rotate(5deg);
}
100% {
opacity: 1;
transform: translateY(0) rotate(0);
}
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
@keyframes pulse-slow {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
}
100% {
transform: scale(1.1);
box-shadow: 0 0 0 15px rgba(99, 102, 241, 0);
}
}
.hover\:animate-pulse {
transition: all 0.3s ease;
}
.hover\:animate-pulse:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
</style>
</head>
<body class="bg-gray-100 min-h-screen">
<!-- Navigation Bar -->
<nav class="bg-white shadow-md fixed top-0 left-0 w-full z-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<a href="#" class="flex items-center">
<!-- Logo Image -->
<div class="bg-indigo-600 text-white font-bold text-xl w-10 h-10 rounded-lg flex items-center justify-center mr-2 animate-float">
M
</div>
<span class="text-xl font-bold text-gray-800">Maxy</span>
</a>
</div>
<!-- Mobile menu button -->
<div class="flex md:hidden items-center">
<button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100 focus:outline-none">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<div class="hidden md:flex md:items-center md:space-x-6">
<a href="#" class="flex items-center text-indigo-600 bg-indigo-50 rounded-lg px-3 py-2">
Home
</a>
<a href="#" class="flex items-center text-gray-600 hover:text-indigo-600 px-3 py-2">
Explore
</a>
<a href="#" class="flex items-center text-gray-600 hover:text-indigo-600 px-3 py-2">
Notifications
</a>
<a href="#" class="flex items-center text-gray-600 hover:text-indigo-600 px-3 py-2">
Messages
</a>
<a href="#" class="flex items-center text-gray-600 hover:text-indigo-600 px-3 py-2">
Profile
</a>
<a href="#" class="ml-4">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg animate-pulse-slow">
Message
</button>
</a>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white border-t">
<div class="pt-2 pb-3 space-y-1 px-4">
<a href="#" class="flex items-center text-indigo-600 bg-indigo-50 rounded-lg px-3 py-2 mb-2">
Home
</a>
<a href="#" class="flex items-center text-gray-600 hover:text-indigo-600 px-3 py-2 mb-2">
Explore
</a>
<a href="#" class="flex items-center text-gray-600 hover:text-indigo-600 px-3 py-2 mb-2">
Notifications
</a>
<a href="#" class="flex items-center text-gray-600 hover:text-indigo-600 px-3 py-2 mb-2">
Messages
</a>
<a href="#" class="flex items-center text-gray-600 hover:text-indigo-600 px-3 py-2 mb-2">
Profile
</a>
<a href="#" class="mt-2">
<button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg">
Message
</button>
</a>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="pt-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="flex flex-col lg:flex-row gap-6">
<!-- Left Sidebar -->
<div class="lg:w-1/4 w-full">
<!-- Profile Card -->
<div class="bg-white rounded-xl shadow p-5 mb-6 animate-fadeIn">
<div class="flex flex-col items-center">
<div class="bg-indigo-100 text-indigo-800 font-bold text-xl w-24 h-24 rounded-full flex items-center justify-center mb-4 animate-float">
JS
</div>
<h2 class="text-xl font-bold text-gray-800">John Smith</h2>
<p class="text-gray-500">@johnsmith</p>
<div class="flex justify-between w-full mt-6">
<div class="text-center">
<p class="text-gray-600">Posts</p>
<p class="font-bold">245</p>
</div>
<div class="text-center">
<p class="text-gray-600">Followers</p>
<p class="font-bold">1.2K</p>
</div>
<div class="text-center">
<p class="text-gray-600">Following</p>
<p class="font-bold">562</p>
</div>
</div>
</div>
</div>
</div>
<!-- Main Feed -->
<div class="lg:w-3/4 w-full">
<!-- Create Post Card -->
<div class="bg-white rounded-xl shadow p-5 mb-6 animate-fadeIn">
<div class="flex flex-col space-y-4">
<div>
<textarea placeholder="What's happening?" class="w-full p-4 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-300 focus:border-transparent" rows="3"></textarea>
</div>
<div class="flex justify-end">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg font-medium animate-pulse-slow">
Post
</button>
</div>
</div>
</div>
<!-- Posts Section -->
<div class="space-y-6">
<!-- Post 1 -->
<article class="bg-white rounded-xl shadow p-5 animate-slideUp">
<div class="flex">
<div class="mr-4">
<div class="bg-blue-100 text-blue-800 font-bold text-lg w-12 h-12 rounded-full flex items-center justify-center animate-float">
BM
</div>
</div>
<div>
<div>
<p>
<strong class="text-gray-800">Barbara Middleton</strong>
<span class="text-gray-500 text-sm ml-2">@barbmiddle · 3 hrs</span>
</p>
<p class="text-gray-700 mt-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros
lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris
sit amet dolor blandit rutrum. Nunc in tempus turpis.
</p>
<div class="flex mt-4 space-x-6 text-gray-500">
<a href="#" class="flex items-center hover:text-blue-500">
Reply
</a>
<a href="#" class="flex items-center hover:text-green-500">
Repost
</a>
<a href="#" class="flex items-center hover:text-red-500">
Like
</a>
<a href="#" class="flex items-center hover:text-blue-400">
Share
</a>
</div>
</div>
<!-- Comments -->
<div class="mt-6 ml-4 pl-4 border-l-2 border-gray-100">
<!-- Comment 1 -->
<article class="mb-6">
<div class="flex">
<div class="mr-4">
<div class="bg-purple-100 text-purple-800 font-bold text-lg w-10 h-10 rounded-full flex items-center justify-center animate-float">
SB
</div>
</div>
<div>
<p>
<strong class="text-gray-800">Sean Brown</strong>
<span class="text-gray-500 text-sm ml-2">@seanbrown · 2 hrs</span>
</p>
<p class="text-gray-700 mt-1">
Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis
leo feugiat.
</p>
<div class="flex mt-2 space-x-4 text-gray-500">
<a href="#" class="comment-reply flex items-center hover:text-blue-500">
Like
</a>
<a href="#" class="comment-reply flex items-center hover:text-blue-500">
Reply
</a>
</div>
</div>
</div>
<!-- Nested Comment -->
<div class="mt-4 ml-6 pl-4 border-l-2 border-gray-100">
<article class="mb-0">
<div class="flex">
<div class="mr-4">
<div class="bg-pink-100 text-pink-800 font-bold text-lg w-10 h-10 rounded-full flex items-center justify-center animate-float">
SJ
</div>
</div>
<div>
<p>
<strong class="text-gray-800">Sarah Johnson</strong>
<span class="text-gray-500 text-sm ml-2">@sarahj · 1 hr</span>
</p>
<p class="text-gray-700 mt-1">
Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem
cursus ullamcorper sit amet nec massa.
</p>
<div class="flex mt-2 space-x-4 text-gray-500">
<a href="#" class="comment-reply flex items-center hover:text-blue-500">
Like
</a>
<a href="#" class="comment-reply flex items-center hover:text-blue-500">
Reply
</a>
</div>
</div>
</div>
</article>
</div>
</article>
<!-- Comment 2 -->
<article>
<div class="flex">
<div class="mr-4">
<div class="bg-green-100 text-green-800 font-bold text-lg w-10 h-10 rounded-full flex items-center justify-center animate-float">
MC
</div>
</div>
<div>
<p>
<strong class="text-gray-800">Michael Chen</strong>
<span class="text-gray-500 text-sm ml-2">@mikechen · 45 mins</span>
</p>
<p class="text-gray-700 mt-1">
Morbi vitae diam et purus tincidunt porttitor vel vitae augue.
Praesent malesuada metus sed pharetra euismod. Cras tellus odio,
tincidunt iaculis diam non, porta aliquet tortor.
</p>
<div class="flex mt-2 space-x-4 text-gray-500">
<a href="#" class="comment-reply flex items-center hover:text-blue-500">
Like
</a>
<a href="#" class="comment-reply flex items-center hover:text-blue-500">
Reply
</a>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</article>
<!-- Post 2 -->
<article class="bg-white rounded-xl shadow p-5 animate-slideUp">
<div class="flex">
<div class="mr-4">
<div class="bg-yellow-100 text-yellow-800 font-bold text-lg w-12 h-12 rounded-full flex items-center justify-center animate-float">
KE
</div>
</div>
<div>
<p>
<strong class="text-gray-800">Kayli Eunice</strong>
<span class="text-gray-500 text-sm ml-2">@kaylie · 2 hrs</span>
</p>
<p class="text-gray-700 mt-2">
Sed convallis scelerisque mauris, non pulvinar nunc mattis vel.
Maecenas varius felis sit amet magna vestibulum euismod malesuada
cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id
feugiat.
</p>
<div class="flex mt-4 space-x-6 text-gray-500">
<a href="#" class="flex items-center hover:text-blue-500">
Reply
</a>
<a href="#" class="flex items-center hover:text-green-500">
Repost
</a>
<a href="#" class="flex items-center hover:text-red-500">
Like
</a>
<a href="#" class="flex items-center hover:text-blue-400">
Share
</a>
</div>
</div>
</div>
</article>
<!-- Add Comment Section -->
<article class="bg-white rounded-xl shadow p-5 animate-slideUp">
<div class="flex">
<div class="mr-4">
<div class="bg-indigo-100 text-indigo-800 font-bold text-lg w-12 h-12 rounded-full flex items-center justify-center animate-float">
JS
</div>
</div>
<div class="w-full">
<div class="mb-3">
<textarea placeholder="Add a comment..." class="w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-300 focus:border-transparent" rows="2"></textarea>
</div>
<div class="flex justify-between items-center">
<div class="text-gray-500">
@ #
</div>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-1.5 rounded-lg text-sm font-medium animate-pulse-slow">
Post comment
</button>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</main>
<!-- Scripts -->
<script>
// Mobile menu toggle
document.addEventListener('DOMContentLoaded', () => {
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
if(mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
}
});
</script>
</body>
</html>
```
## Conclusion
By following these steps, you've transformed a basic HTML structure into a modern, responsive social media interface with Tailwind CSS. The key takeaways are:
1. **CDNs** allow easy access to external libraries like Tailwind CSS
2. **Utility classes** in Tailwind CSS allow rapid styling directly in HTML
3. **Responsive prefixes** like `md:` and `lg:` enable adaptive designs
4. **Custom animations** can be added with CSS keyframes
5. **Consistent spacing and colors** create professional-looking interfaces
Remember to always test your design on different screen sizes and browsers to ensure a great user experience!
---
*This guide was created for students learning web development with Tailwind CSS. Practice by modifying colors, spacing, and animations to create your own unique designs.*
Reference in New Issue View Git Blame Copy Permalink