Web Development With Odin

Those of you unfamiliar with Odin, one of the gods from Norse mythology, may be unaware of his connection with the study of web development.

It turns out, this guy plucked out his own eye to gain the Wisdom of Ages. He went on to hang himself from a tree, pierced by his own spear, for nine days. This was done to gain wisdom and power in the nine worlds.

A quick review of the FAQ reveals how this applies to learning web development.

Learning development is not an easy task and the tools laid out here are merely the path; you must walk it yourself. Should you possess a thirst for knowledge and persistence of spirit akin to that storied in Odin's mythos, you will find success on your journey.

I couldn't agree more!

One of my projects for this week is to recreate a page from Google. The easy version of this assignment is to simply recreate the Google homepage. I, being a bit ambitious, chose to tackle the advanced version. That is, I have to create the search results page from Google. This page to be exact.

While working on this project, I learned something that I never really noticed before. It turns out that Google places a standard text input filed inside a div to create the appearance of a larger input field. Here's how it's done:

1. create a text input field
2. remove the border using CSS
3. wrap that input field inside a div
4. wrap that div inside another div
5. use CSS to create a grey border around the outer div
6. use the hover setting in CSS to make that border turn black when the mouse hovers over it
7. adjust CSS option to line up the divs and center the text input field

These things are very difficult to explain in text without a visual aid, so I put together some code on jsFiddle to make this easier to explain.

I'm enjoying my study of web development in the same way that Odin enjoyed his quest for knowledge. I look forward to learning everything The Odin Project has to offer and can't wait to spend more working hours doing web development. In the meantime, you can keep up with my work on the Google search results page through my repository on GitHub.