Facebook UI Clone (HTML & CSS)
A responsive Facebook-inspired UI layout built with HTML and CSS, featuring a top navigation bar, left sidebar shortcuts, stories row, “create post” composer, a posts feed, and a right sidebar for sponsored content and contacts.
HTML
CSS
Responsive Design
UI Clone
Layout
Flexbox
Font Awesome
Vercel
Project Overview
This project recreates a Facebook-style homepage layout to practice building complex, real-world UIs using only HTML and CSS. It captures the main elements of a social feed: a top navbar with search and action icons, sidebars, stories, a post composer, and a multi-post feed.
Features
Top navigation bar with logo, search input, active navigation icons, and profile/actions area.
Left sidebar shortcuts list (Friends, Jobs, Groups, Marketplace, Watch, Memories, Saved, etc.) with icons/images.
Stories section including a "Create story" card and multiple story cards with overlays.
Create post composer with avatar, input placeholder, and quick actions (Live video, Photo/Video, Feeling/Activity).
Posts feed with repeated post cards (author header, timestamp, content text, optional image, and Like/Comment/Share actions).
Right sidebar showing sponsored blocks and a contacts list with quick action icons.
Tech Stack
Frontend: HTML + CSS.
Icons: Font Awesome via CDN.
Deployment: Vercel.
Implementation
Layout Structure
Split the page into three major columns (left sidebar, main feed, right sidebar) wrapped in a single main container for predictable alignment. Used repeating UI "card" patterns for stories and posts to maintain consistent spacing and styling.
UI Details
Implemented a search input inside the navbar with an "active" state for the currently selected navigation item. Built post action rows (Like/Comment/Share) using icons + labels to mimic the original interaction layout.
How It Works
The page loads as a static social feed UI (no backend). Navigation, stories, composer, posts, and sidebars render as structured HTML sections styled with CSS. Icons load from Font Awesome, while avatars and thumbnails use local image assets.
Future Enhancements
Add real interactivity with JavaScript (story slider, post reactions counter, dropdown menus).
Improve responsiveness for smaller screens (collapse sidebars, mobile nav behavior).
Replace static posts with JSON data and render the feed dynamically.
Features
Top navigation bar with logo, search input, active navigation icons, and profile/actions area.
Left sidebar shortcuts list (Friends, Jobs, Groups, Marketplace, Watch, Memories, Saved, etc.) with icons/images.
Stories section including a "Create story" card and multiple story cards with overlays.
Create post composer with avatar, input placeholder, and quick actions (Live video, Photo/Video, Feeling/Activity).
Posts feed with repeated post cards (author header, timestamp, content text, optional image, and Like/Comment/Share actions).
Right sidebar showing sponsored blocks and a contacts list with quick action icons.
Tech Stack
Frontend: HTML + CSS.
Icons: Font Awesome via CDN.
Deployment: Vercel.
Implementation
Layout Structure
Split the page into three major columns (left sidebar, main feed, right sidebar) wrapped in a single main container for predictable alignment. Used repeating UI "card" patterns for stories and posts to maintain consistent spacing and styling.
UI Details
Implemented a search input inside the navbar with an "active" state for the currently selected navigation item. Built post action rows (Like/Comment/Share) using icons + labels to mimic the original interaction layout.
How It Works
The page loads as a static social feed UI (no backend). Navigation, stories, composer, posts, and sidebars render as structured HTML sections styled with CSS. Icons load from Font Awesome, while avatars and thumbnails use local image assets.
Future Enhancements
Add real interactivity with JavaScript (story slider, post reactions counter, dropdown menus).
Improve responsiveness for smaller screens (collapse sidebars, mobile nav behavior).
Replace static posts with JSON data and render the feed dynamically.
ContactMe
Have a question or want to work together? Send me a message using the form below.