A fully responsive and feature-rich front-end clone of YouTube, built using HTML, CSS, JavaScript, and PHP. This project replicates the look and feel of YouTube’s user interface with a focus on clean layout, responsive design, and usability — serving as a strong foundation for a complete full-stack video platform.
- Home Page – Lists recommended videos with thumbnails, channel info, and view stats
- Watch Page – Video viewing layout with suggested videos and video details
- Search Page – Dynamic layout to show search results by keyword
- Playlist Page – Static layout for saved playlists and videos
- Channel Page – UI for channel profile, videos, and about section
- Login Page – Clean login form with social login buttons and "remember me" option
- Signup Page – New user registration form with validation and terms agreement
- Forgot Password Page – UI for password reset (frontend only for now)
- HTML5 – Semantic structure
- CSS3 – Responsive layouts, animations, and media queries
- JavaScript – UI logic, toggle menus, interactive elements
- PHP – Basic backend integration (for authentication system)
- MySQL – Used with PHP for user storage and authentication
- Signup – Registers users with name, email, and password (hashed)
- Login – Authenticates users securely using sessions and
password_verify() - Logout – Destroys session and redirects to login page
- Protected Routes – Pages like
index.htmlordashboardprotected from unauthenticated access
- Fully mobile-friendly using media queries
- Sidebar toggles, collapsible menus, and mobile-first layout
- Tested across desktop, tablet, and mobile screen sizes
- ✅ Complete UI for all key pages
- ✅ Working login, signup, and session-based authentication
- 🔄 Backend features (video upload, comments, likes) – In Progress
- 🧪 Future: dynamic video content, user dashboard, admin panel
[🔗 live link will be added once hosted]
- How to replicate real-world UI using HTML/CSS
- Responsive design best practices
- Building a functional authentication system in PHP
- Structuring multi-page web apps using clean folder organization
Want to collaborate or hire me for a project?
- LinkedIn: linkedin.com/in/mabbasm
- Email: mabbasm1100@example.com