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!
Some 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!
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!
Some 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!
Published: Tue, May 6 2014 @ 7:34:09
Back to Blog