Build a social media feed with posts, likes, comments, and user interactions.
This project will guide you through creating a modern social media feed using CSS. You'll learn to design post cards, interaction buttons, and responsive layouts.
Intermediate: 2-3 hours | Advanced: 1-2 hours
Difficulty Level: Intermediate
<div class="social-feed">
<div class="post-card">
<div class="post-header">
<img src="avatar1.jpg" alt="User Avatar" class="avatar">
<div class="user-info">
<h4>John Doe</h4>
<span class="timestamp">2 hours ago</span>
</div>
</div>
<div class="post-content">
<p>This is a sample post content...</p>
<img src="post-image.jpg" alt="Post Image" class="post-image">
</div>
<div class="post-actions">
<button class="action-btn like-btn">
<i class="fas fa-heart"></i>
<span>Like</span>
<span class="count">42</span>
</button>
<button class="action-btn comment-btn">
<i class="fas fa-comment"></i>
<span>Comment</span>
<span class="count">12</span>
</button>
<button class="action-btn share-btn">
<i class="fas fa-share"></i>
<span>Share</span>
</button>
</div>
<div class="comments-section">
<div class="comment">
<img src="avatar2.jpg" alt="Commenter Avatar" class="avatar-small">
<div class="comment-content">
<strong>Jane Smith</strong>
<p>Great post!</p>
</div>
</div>
</div>
</div>
</div>
.social-feed {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
}
.post-card {
background: white;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 2rem;
overflow: hidden;
}
.post-header {
display: flex;
align-items: center;
padding: 1rem;
border-bottom: 1px solid #f0f0f0;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 1rem;
object-fit: cover;
}
.user-info h4 {
margin: 0;
font-size: 1rem;
color: #333;
}
.timestamp {
font-size: 0.8rem;
color: #666;
}
.post-content {
padding: 1rem;
}
.post-content p {
margin-bottom: 1rem;
line-height: 1.6;
color: #333;
}
.post-image {
width: 100%;
max-height: 400px;
object-fit: cover;
border-radius: 8px;
}
.post-actions {
display: flex;
justify-content: space-around;
padding: 1rem;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
}
.action-btn {
display: flex;
align-items: center;
gap: 0.5rem;
background: none;
border: none;
padding: 0.5rem 1rem;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s;
color: #666;
}
.action-btn:hover {
background: #f8f9fa;
}
.action-btn.liked {
color: #e74c3c;
}
.action-btn i {
font-size: 1.1rem;
}
.count {
font-size: 0.9rem;
font-weight: 500;
}
.comments-section {
padding: 1rem;
}
.comment {
display: flex;
align-items: flex-start;
margin-bottom: 1rem;
}
.avatar-small {
width: 32px;
height: 32px;
border-radius: 50%;
margin-right: 0.75rem;
object-fit: cover;
}
.comment-content strong {
font-size: 0.9rem;
color: #333;
margin-right: 0.5rem;
}
.comment-content p {
margin: 0;
font-size: 0.9rem;
color: #666;
}
@media (max-width: 768px) {
.social-feed {
padding: 0.5rem;
}
.post-actions {
flex-direction: column;
gap: 0.5rem;
}
.action-btn {
justify-content: center;
}
}
document.querySelectorAll('.like-btn').forEach(btn => {
btn.addEventListener('click', function() {
const icon = this.querySelector('i');
const count = this.querySelector('.count');
const currentLikes = parseInt(count.textContent);
if (this.classList.contains('liked')) {
this.classList.remove('liked');
icon.classList.remove('fas');
icon.classList.add('far');
count.textContent = currentLikes - 1;
} else {
this.classList.add('liked');
icon.classList.remove('far');
icon.classList.add('fas');
count.textContent = currentLikes + 1;
}
});
});