Thursday, 15 November 2012

HTML & CSS, Sorted!

It took the best part of the week, but I feel like I've finally got fundamental HTML and CSS cracked. I've just finished up on my first site (all about me, of course) and you can find it at mynameisel.com.

I'm going to go through the steps for you here, because really there isn't any reason we should all know a little bit about putting together a simple website. For me it was an obvious skill I needed - I work daily with online advertisers so having some web design knowledge should help there. It also means I can use my own creativity when it comes to promoting anything I'll need to in the future. So I decided to take 2 weeks off work to focus on me and learning something I wanted to learn. I did not expect to be done by now!

Day 1: On the first day I learnt all the basic HTML stuff. Pretty simple since I was a bit of a MySpaceaholic back in the day. I understand the core concepts, but needed some refreshing on how a website is really meant to be put together, as opposed to how a self-obsessed teenager might do on a broken social network. It led neatly into...

Day 2: Good, solid CSS. I loved this bit. I'm a bit of a minimalist (have you seen my site yet?!) and a perfectionist with stuff like this, so seeing the range of style to use was great fun. I've spent longer than I care to admit getting all the details right, but I've come to see how flexible CSS is, and how important it is to keep it in a separate file. This was a brand new concept to me (tell me about it... and I work at Google... I should know these things right?)

Day 3: Getting in hosted. This was way harder than I expected. A simple, practical and affordable web hosting solution is a big fat gap in the market if I've ever seen one. It took me two hours, a long walk, and a headache to figure out and decide what service provider to go with. All said and done, I put the site online using HostGator, for $8.95/month, plus $15 to register my domain. Their 24/7 chat customer service is pretty stellar, but their UI is total crap. I need to see if this can be done cheaper.

Day 4: Making it better. I spent time today nailing the "hover over" effect that's going on. Codecademy taught me how to change what happens to a certain div when you hover over it, but it took me a darn good while to figure out how to affect another div, and how to do it with correct positioning so that everything didn't shuffle around the page. Today is Day 4.

Next: Well now I need a new project. I've got some tidying up to do on the dashboards I have made for work, but since I am still on vacation, that can probably wait. In the meantime, I think I'll look for another site to start working on.

EDIT: Lot's of credit to Codecademy and the contributors on Stack Overflow btw. Couldn't have done it without them!