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 🙂

My First Website.

I’ve been working on this website all semester. It consumed me of my time, my life, my happiness and my tears. By the time I handed it in to be marked I could not look at it for another second. Ever.

Yet today in my procrastination for exams, I decided to take a look at it again. In a way I kind of missed it. All those hours sitting in a freezing lab in the basement of a building, battling with a mac computer and endless amounts of code, McDreamweaver and I became very very close.

By the end of it all and looking at the final product I’m rather proud of what I have achieved. Those close (or even not-so-close) to me, perhaps even everyone on Facebook, knew how much I hated this course. I couldn’t stop complaining because it just killed me. But as I look back, its nice to have something a bit more tangible than just a good mark to show your progress and achievement.

Back in early August, we had white web pages scattered with boring Times New Roman. We got to grips with CSS, the coding language responsible for appearance on web pages, it really was a lot more difficult that you think! Especially when you are getting next to no help from your tutors, and having to work everything out on your own. Thank God for friends. We got each other through, and even with so little help at the end we came out on top with our marks. Something to be proud of.

I hope you like the site. Every little detail and element is placed where it is by code, you actually have to tell things where to go and what to do once they are there! What we were mainly working on this semester was a Photography website, where I focused on UCT. The layout may not be perfect on various monitor sizes, it was optimised for the Macs in the lab. In future I plan to think ahead for smaller monitor sizes.

Enjoy 🙂 Hopefully you’ll see more wonderful (and hopefully more advanced) websites from me in the future (: For now, I’m still learning.