Giacomo Balli profile picture

Giacomo Balli

Innovation consultant specializing in mobile strategy

Let's Chat

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, 06 May 2014 14:34:09 +0000