A simple mock up of Google's Homepage done as a part of HTML/CSS Introduction course by The Odin Project.
Some thoughts on the Project:
Seemed like a simple project at first (and in restrospect it actually is) so I was going in with a "Hold my beer, I got this" mindset. And me being a bit of a perfectionist, things got a little messy as I got a bit carried away with CSS especiallly when it came to element positioning and nesting divs within divs within divs (margins, paddings, absolute, relative positions, ...) it worked, mostly, but it was all over the damn place. It got to the point that when I was about 70% done I decided to review and re-write the whole thing properly this time.
Lesson learned here: Sit down and plan out your project before starting (draw on paper, use codepen.io or any other web based fiddle tool of your prefference, for some mock-ups and/or to try different ideas)
All in all I'm quite happy wiht the way it turned out, CSS is still far form elegant but in the end - less of a mess and acually readable and makes sense. Went a little bit further by adding "hover:" "focus:", "box-shadow" and few more properties that I got from the DevTools, to make it look as close to the real thing as possible.
This Project was deffinately a good primer for things to come and I'm looking forward to it.
Hold my beer...
Full Project description can be found here: https://www.theodinproject.com/courses/web-development-101/lessons/html-css