Yes, I’m laughing at you html

So aside for watching tons of awful foreign films at University (that were mostly in German), I also spent many, many hours learning to code websites. I spent most of my day (I only had class 11 – 2 by my 3rd year, and I often left home at 5), in the dungeon basement lab, where all the macs are stored, coding. Squinting at the massive mac screen in front of me, trying to find a piece of off syntax for why my website isn’t doing what I want it to do. It became the bane of my existence.

I don’t regret it, as it gave me a great skill, but I can’t explain the frustration, the tears and all ’round turmoil that coding created in my soul while at University. I can’t complain either because I did really well and got class medal for 2 out of the 3 courses (well, there were only like 9 of us in this class).

In my day-to-day these days (2 years out of varsity) I sometimes come across the odd element of code when making Facebook apps, but now if we need something specifically styled – I’m likely to just send it to the Development guys. I came across these minimalist posters (now, I love minimal design) for how html tags can be used in real life. They’re classic. Especially the breakup one.

If you code, this will make your heart sing too.

<body> <html> <div> <em> colour: .class </html>

(source)

When things get real…hello CSS

Designing a Photoshop mockup of a website you wish to create is a lot easier than actually coding it. For a beginning like myself, you sometime realise that you’re having difficulty coding certain things, or that other things practically work better i rearranged.

Here are thumbnails of my mockup vs. what i have currently coded:

Proposed layout for my new portfolio websiteCoded version of portfolio

So as you can see, they look a little different, while still the same. (For those who dont understand HTML or CSS, you can just gaze at the pretty pictures)

I made a few changes to my photoshop mockup. The main one was of the block holding my name which I moved from the center to the left. This was because I wanted to have the header in fixed positioning and figured if it stayed in the center it would always be in the way so in the left would be more discrete. Also I changed the pink of the header to blue to match the blue at the bottom swirl as well as matching the blue background.

Some difficulties I had were as follows:

  • It was proving difficult to do the header as I wanted it in Photoshop with the different chades & the block and was having difficulty doing them in the floated list, especially when I was trying to have the block with my name in the center. I tried filling the background colour to achieve the header, but trying with my name bigger vs. the smaller <li>s it all came as one solid block which isn’t what I wanted. In the end I opted for an image of the block.
  • I’m having difficulty positioning the tagline, but I might have to think of using a particular type of positioning, and work around the background of it.
  • I felt I needed the footer to also have fixed positioning, especially so that the swirl could be there are all times, without seeing it the page looked dull and static. The only thing is, that I then couldnt have a thick footer with information i.e services provided, or a long disclaimer because with the fixed positioning (and a fixed header) it would take up most of the page and not leave space for actual content. My issue I’m trying to work out is that having the footer & swirl with a fixed position hides the bottom of the information in my content div i.e my blog feed at the moment. I tried padding & margins & niether seemed to work.
  • Working on my computer at home I havent been able to see how elements look positioned on the bigger monitors. While in the lab I was struggling to get the swirls centered using margin left/right: auto like I usually do, so some things may need to have thei positions fiddled with.

But otherwise its looking good 🙂