- Use everything you need but no using 'bootstrap' or similar front-end frameworks. Copy-pasting code from Twitter.com is cheating! However, feel free to inspect its HTML, JS and CSS code.
Reimplement the Twitter.com feed page as close as possible to the real look and feel. This is what a Twitter feed page looks like:
(feel free to customize Nikesh's non-standard colour choices!)
You will need a Twitter account to do this task because you'll be inspecting the structure of the real Twitter feed to understand how it's done.
The goal of this exercise is to test your front-end skills. Don't worry about the backend at all. You are expected to produce only HTML, CSS and JS files. Do not build a Sinatra application. The resulting file should look as close to the real Twitter feed as possible.
Why? Because the world has moved on from the lowly <div> to richer, more meaningful HTML5 tags. These tags mean better accessibility - So use them! Here are some resources to get you started:
- MDN HTML5 element list
- Article explaining the benefits of HTML5
- Slightly less dry explanations of each tag
- Visual example
And for those who don't like reading, here's an easy to use flowchart:
Make sure it looks good on the desktop. As a minimum you should have the header and the list of tweets.
Tip: You don't have to use exactly the same CSS techniques as Twitter developers did. For example the home icon in the header is loaded as a sprite but it may be easier to do it using just an img tag.
Another tip: play with the page a lot before starting coding it. Notice how the header stays in a fixed position as you scroll the page. Notice that there's no footer because of infinite scrolling.
Add JavaScript for infinite scrolling (using dummy data, no server-side at all), expanding the tweet input box on focus and, if you're feeling adventurous, a popup to add a new tweet.
Don't forget the infinite scrolling adds a spinner to show that data is being loaded. Even though you'll be using dummy data, emulate the delay.
Make it responsive. Notice that Twitter has very few responsive features other than resizing the search box and hiding the labels in the navigation bar.
Good luck :)