Twitter's UI is easily the weirdest and most gross one to implement. They're fond of the card. Cards everywhere, in all different shapes, for all manner of things. You have cards for the login and cards for the related news and cards for each tweet. They also utilize some kind of CSS/HTML generator that loves divs. Figuring out how they do most of this was an exercise in spelunking the div.

The most difficult part of this is definitely overlaying the profile image on the header image in a reliable way. My version most likely doesn't really match the pixels of Twitter's but mine definitely is simpler. Looking at the code it seems this one header graphic makes up most of the CSS layout.

This is the first one where I started to realize we have some weird aversion to directional and positional names on tags. I first tried to avoid words like "left", "middle", and "right" because...that's just what we were always told. You'd hear people rant about how naming visual elements with their position is bad form because you may move them, and then those same people never moved them. I'm now thinking using names that match positions is far easier because I can easily mentally map "right" with the things on the actual right of the screen. If I later need to rename it for some arbitrary stylistic irrationality then I can after I get it working.