That Time I Made a Website

This summer (2013), I took the HTML+CSS course on Codecademy and decided to make my own website. I happened to have a month of free time before my internship started and knew I'd need a job in just 6 short months (obligatory: hire me?), so I figured why not? The course was really well organized and not the least bit intimidating -- it takes you from knowing absolutely nothing about HTML and CSS to making your own, very basic resume.

After 3-4 weeks of going through the modules, here's what I had to show for it:

Yeah.. It's pretty cute in an "aww you just learned about computers!" kind of way.

I looked at lots of websites and noticed that blurred lines lights were a popular background choice, so I tried that out and paired it with semi-transparent divs. This was what my website looked like when I first launched it:

Obviously the font colors, typography, and spacing needed work, but I was really excited about it and told all of my friends! They were all very supportive and some even shared it on Facebook! I saw the "likes" rolling in and was on an internet karma high for about 5 minutes or so, until this started happening:

My first reaction was "WHO RIGHT CLICKED 'VIEW PAGE SOURCE'??? WHO DOES THAT???" which was shortly followed by the inevitable "the internet just hurt my feelings for the first time ever". Anyway, it was pretty obvious that my website only looked good on Chrome on my 13" laptop, and nowhere else. And as far as readability goes... well, you can see how badly those yellow lights clashed with all of my text.

So then I decided to start experimenting with patterned backgrounds, thinking it would improve the readability. Which, it did, and I love this background, but it made me look like an old woman who collects ceramic cats.

Not to mention, I changed it to have the text scroll within the text box, which made reading it a pain. I changed all of the div widths/heights to percents instead of pixels, and added some max/min-widths/heights to keep things in order if anyone resized the page. It looked neat and was readable on mobile devices, so I kept it around for about a week.

But one of my good friends kept reminding me "Tiffany, patterned backgrounds aren't 'in' right now... and it makes your text hard to read." Finally, I realized that I had to face the truth: nobody is going to want to read anything on my website if it looks like this.

I completely ditched the pretty colors and the artsy backgrounds, and tried my best to go for the "minimalist" style using Google+ and Facebook as inspiration.

Readability doesn't get much better than dark text on a white background, but I hated this. Absolutely. Hated. It. Sure, yeah, it was clean. But with the all-gray background, things looked like they were floating around on the page with nowhere to be. Something just wasn't right.

For about 15 minutes, I thought about keeping it the way it was since it was practical and straightforward, but I couldn't. Every time I looked at it I felt the urge to throw my computer out the window cause it was so UGLY. I knew I wouldn't be able to live with myself if THAT was everyone's first impression of internet-me. So I put an end to my pity party, created a new .css file, and got shit done.

Here's what I came up with:

I realized that the horizontal bar up top on my floral background was what gave the website its structured look, so I took that and moved my header and navigation bar up there. As for the rest, I discovered that *less is more*. Nobody has time for my fancy "overflow: scroll;" in a 600 x 600px box. Keep it simple.

So, that's it. My website isn't the sleekest or the fanciest one out there (still need to learn JavaScript...), could use some touch ups, but it looks a hell of a lot better than it did 2 weeks ago.

And Nick, if you're reading this, thanks for letting me down gently. There are no more center tags.