Recently I was reviewing Facebook’s UI and functionality, I really like the idea of their design and its amazing performance across all major browsers. For a Web Application enthusiasts such as my self, it’s my dream to be working in such a huge company, where the goal is to deliver the best product to all users. I wanted to test my self by building Facebook’s home page, but 100% responsive, I also wanted this project to be at its best performance, soo.. bellow is the result of my weeks of hard work.
- Fully optimized, this application currently scores 100 / 100 (Mobile and Desktop) on Google Page Speed Insights.
- Made using Bootstrap 3.
- Follows the card-based style which is a common layout pattern used by popular web applications like Facebook, Twitter, Google +, Linkedin, etc .
- Unlike Facebook’s current website layout, this application is Fully responsive!
- Followed Facebook’s mobile app theme for smaller screens.
- Utilizes Font Awesome for all of the buttons / icons.
- Facebook constantly updates their website design, but most users hardly notices it. I followed Facebook’s design pixel by pixel, color, background. Everything you see in the application is exactly how Facebook looked like at the time this application was created. Unfortunately I do not intend to maintain this application as itis not a product.
I’ve hand-picked a list of functionality to be included in this application. Anything that does Create, Delete and Update are not included. Included are:
- Gallery collage style. It dynamically builds the collage depending on the number of images provided on each post.
- The width and height of the images are respected, no stretching on shrinking.
- Drop down options.
- Swipable, pannable, and zoomable gallery images.
- Pop-up modal
- Preloader – shown while ajax request is processing.
- Infinite scrolling – loads new content every time you reach the bottom of the page.