Facebook Layout

Project to clone the Facebook login page using HTML and CSS. The project utilized CSS Grid and Flexbox for layout and alignment, featuring a two-column design with a login form, styled buttons, and a footer. The author gained experience in responsive UI design, layout techniques, and code organization, with plans to add JavaScript validation and backend connectivity in the future.

Facebook Login Page Clone using HTML & CSS Introduction In this project, I created a clone of the Facebook login page using HTML and CSS. The goal was to understand real-world UI design and improve my frontend development skills. Technologies Used HTML for structuring the webpage CSS for styling and layout design CSS Grid and Flexbox for alignment Features Two-column layout using CSS Grid Left section with logo and image Right section with login form Styled buttons with hover effects Footer with multiple language options What I Learned Through this project, I learned how to: Use CSS Grid for page layout Use Flexbox for alignment and spacing Design responsive UI structures Style forms, buttons, and text effectively Organize code for better readability Challenges Faced Aligning the left and right sections properly Managing spacing between elements Making the layout similar to the original Facebook design Improvements Added responsive design using media queries Improved button hover effects Enhanced UI with better spacing and shadows Conclusion This project helped me gain hands-on experience in building real-world UI designs. It improved my understanding of layout techniques and boosted my confidence in frontend development. Future Scope Add JavaScript form validation Connect to backend for login functionality Improve mobile responsiveness further