Giacomo Balli profile picture
Giacomo Balli
The Mobile Guy

Over two decades of experience at your service.
I help business owners make better decisions.

Let's Chat LinkedIn

Recreating Facebook UI with HTML and CSS (live coding screencast tutorial)

In the following, is a screencast of me live coding in pure HTML & CSS. The goal is recreating Facebook UI mobile.
As you can see this is pure hand coding, no editors, frameworks or templates; just pure HTML and CSS in notepad. Also, this is a perfect example showing why using web technologies, perhaps in conjunction with PhoneGap (aka Cordova) will make prototyping your apps blazing fast… as long as you know what you're doing! :) 
Please let me know your feedback! Bracket code editorSome mentioned automatically refreshing the preview by using a refresh meta tag or using Brackets (Brackets rocks by the way). The problem, which is very subjective, is that in the first case, I like to "fix" more than one thing at once so I like to have the "obsolete" version in front of me. In the second case, I would not be able to preview in the iPhone Simulator.
Have another UI you'd want to see me recreate? Just let me know!

#coding, #css, #facebook, #html
Published: Tue, May 6 2014 @ 7:34:09
Back to Blog