Filed under CSS, HTML, JS

Challenge: What’s the worst you can do?

After reading through the comments on my levels of CSS article I find that I few people seem to think that the article is a way to ridicule beginners. It’s not. It’s a way to document the steps that I think I have climbed. Some people also thought that this set of levels is a good indicator of how good sites you will make. That’s also false. Being Level 5 or 6 in the list means that you are a good coder, nothing else. It does not mean that a site you make is any good, I’ve seen many sites that have great code but that still makes me want to kill someone. Don’t confuse good web developers with good coders. “Don’t be a rotten standardista” as Molly Holzschlag would put it.

The challenge

To give you a perspective of how bad it really could be I’m challenging all the readers of Friendly Bit. It’s kind of a competition (with no prize) about who can make the worst site. The rules are simple; you are to construct a page, using HTML and CSS (and Javascript if you think you need it) that has a design that is as hideous as possible. I want pages that make my eyes bleed, that make small children cry and makes Maddox write hate articles about you. Think of all the good things you’ve learnt and do the opposite.

Inspiration for a truly hideous design

I won’t be giving out any prize but what I can do is help you with some ideas of bad code.

Make use of the <marquee> tag. It makes any content inside it scroll in the speed and direction you choose. Did you know that you can wrap <body> in a marquee tag? That’s right, your entire page will move automatically. You can also nest several marquee tags inside each other. Ohh yeah!

Another good tag you can use is the <blink> tag. Can it be applied to, say, a table? I hear you ask. But of course. You can have a full screen blinking table on your company homepage.

Continuing with the good ideas we have the oldschool frames we all have come to like. Did you know that there are no set upper limit on the number of frames you can load? You can have thousands of them! You can even mark up a whole tabular grid with frames alone.

This challange is about terrible code as much as it’s about terrible design. So don’t go with well-formed or the basic foundations of HTML. Did you even try putting tags inside other tags? <font <font size="2"> size="3"> is quite fantastic don’t you think? Make your page upside down by adding the <head> below the <body>, but only after you have added your own <neck> tag to the mix. Surprise me!

How to accept the challenge

To join all of this you just have to make the page, put it up on your server and link to it here. Post a link as a comment or simply trackback (link to this post) from your own blog and it will show up here.

Finally: Don’t forget the lesson behind all this. When you see a site with bad code, know that there’s a lot of much worse sites out there.

Feel free to leave a comment, or subscribe to my feed.

related

List some related articles:

You might want to browse all articles.

linkback

These people have linked to this article:

To get a link in this list: make sure your blogging software supports trackbacks or pingbacks and simply link to this article like this:

<a href="http://friendlybit.com/css/challange-whats-the-worst-you-can-do/">Challenge: What’s the worst you can do?</a>

You can also trackback by copying this link, and pasting it into a trackback field in your blogging tool.

about

Author: Emil Stenström

Emil Stenström blogs about web development. Posts are bi-weekly.

To the about section

comments

What do you think about this article? I’d love to hear your view!

Scroll to comment box.

  1. Emil Stenström 11 Mar

    01

    This is what you are competing against: Dizziness delux

  2. Brad Schiff 12 Mar

    02

    Emil, that is pure genius! I had to close the window within 3 seconds, I could feel a seizure coming on, honestly. I’ll have to see what I can cook up. Fun idea.

  3. Majik Sznak 14 Mar

    03

    The first thing I thought was I should make a page that has span tags with a class of blink and JavaScript that finds all those spans and uses setTimeout to implement the blink… I think it’s because I’m a sick, sick man.

    P.S. I’m stealing your preview box idea.

  4. Emil Stenström 14 Mar

    04

    @Majik Sznak: sounds interesting, do you have an URL available to that blink thingie? :)

    The previewbox is a Wordpress plugin (not mine), I just plugged it in and added some styling. It’s called Live Comment Preview.

  5. stefan asemota 14 Mar

    05

    And the Oscar goes to….
    http://www.renttoownrealestate.com/

  6. Emil Stenström 14 Mar

    06

    @stefan asemota: Haha! That’s a terrible site :) I think we have a new leader. Who can do worse than that?

  7. Majik Sznak 14 Mar

    07

    Just for you

  8. Dr Crumb 14 Mar

    08

    I whipped together a page in a few minutes, by request. It’s mostly just geocities-inspired bad design, though using CSS. There’s also a fun javascript function to add to the annoyingness…


    fugly

  9. Emil Stenström 16 Mar

    09

    @Majik Sznak: that’s possibly the worst javascript ever made!

    @Dr Crumb: heh, what memories this brings back ;) That site is too serious! I almost belive you just used an old site of mine.

  10. Jesse Skinner 16 Mar

    10

    We serious web masters often need to communicate to visitors that our web sites are not yet finished. This way, they will know to make our site their homepage and check back regularly. I have solved this common problem once and for all.

    Under Construction

  11. D. Olsson 16 Mar

    11

    @Skinner, I must say that your exampel takes the price! Haha… Almost got an epileptic attack here.

  12. Michelle 19 Mar

    12

    I must say, A very educational site. I do not believe I have ever been quite this bad. But close. I appreciate the tutorials and info here greatly, Thanks

  13. zapada 20 Mar

    13

    Digg: How to make a bad website

  14. Sudrien 23 Mar

    14

    I don’t know how I even got here - that might not be true.

    This will take a second to warm up.

    -Sud.

  15. laaarrd 26 Mar

    15

    This was not done for this challenge, but rather as test around 1999. I later updated it to validate, CSS and all! ;)

  16. Martin Strand 31 Mar

    16

    I guess this is it: arngren.net is the worst website out there ever – even though it isn’t doing to much fancy blinkin’ and rolling’

  17. Emil Stenström 1 Apr

    17

    @laaarrd: haha, terrible :) Proves that validation is not everything that counts.

    @Martin: Congratulations, you are the new leader :) Terrible!

  18. Jared 14 Apr

    18

    I’ve always been partial to http://www.vaughns.com myself… especially because EVERY link on the site opens a new browser window!

  19. Emil Stenström 14 Apr

    19

    Jared: Vaughns is bad, why ohhh why do they have to use their 3D-effects on their text?! Terrible :)

    After looking at arngren.net again I still find that one worse.

  20. Rowan Lewis 14 Apr

    20

    Well, here is a shocker for you: http://www.pixelcarnage.com/dump/bad.html

  21. Arthus Erea 2 May

    21

    I whipped up a quick little page for this. It does use some PHP (for browser detection). Does that disqualify me?


    Do NOT click

  22. Emil Stenström 3 May

    22

    @Rowan Lewis: OH, MY GOD! Haha, I love the flickering effect :) After looking at your code, fainting, and crawled back up to my computer I can tell you: “you are the new leader”. Well… ehm… done.

    @Arthus Erea: No, it doesn’t disqualify you :) I really like your use of <foot> and <neck> there… Have a look at Rowans though, it’s baaaad.

  23. Ruby 19 May

    23

    These websites are hillarious! I remember seeing many ugly websites, but I never saved the links.
    Most things made with the Geocities HTML editor turn out very badly.

  24. Brandon Martin 31 May

    24

    I know that you have to have heard of this site when it was in the news. I think the million dollar page is really rough on the eyes, not much really anything fancy, but it is still a menace to society.
    Million Dollar Page

  25. Emil Stenström 1 Jun

    25

    @Brandon Martin: yeah it looks pretty bad because of all the ads, but I really don’t know how it could be done any differently. That guy should get the respect he earns :)

  26. Brandon Martin 1 Jun

    26

    I agree with you… anyone who can make a million bucks on that did something right.

  27. Emil Stenström 4 Jun

    27

    Another really terrible site: http://aardvark.com/ Check out those mouseover effects on the links. GAAAH!

    A study in the works menues every made: http://www.showcaves.co.uk/pages/ironage.html Can you figure out how the menu to the left works?

  28. Zoe 5 Jun

    28

    Ok, that menu on the showcaves site *is* the worst menu ever made. Absolutely terrible.

  29. Kachina Crowe 6 Jun

    29

    I looked at all of those eye-raping pages ya’ll made and I have just one question– What did the poor internet ever do to you people? Poor little thing out there trying to provide people with services and you’re burdening her with this icky gross nonsense!!

    (Nicely done)

  30. shrat 20 Jun

    30

    I’m just glad none of my sites were listed!

  31. Emil Stenström 20 Jun

    31

    @Kachina Crowe: Hehe :) We are just trying to educate people here, I’m sure it’s apparent that we are only looking at code quality and not how well the site works in other aspects. A bad site can still draw visitors.

  32. stefano 7 Sep

    32

    uh ho…after reading this I think I will NEVER let you know my website!!!! ;-)

  33. Pozycjonowanie 4 Nov

    33

    I must say, A very educational site. I do not believe I have ever been quite this bad. But close. I appreciate the tutorials and info here greatly, Keep up the good work. Greetings

  34. Brautmode 7 Jan

    34

    You also can visit this side. I found it in german web and I`m not sure if it should realy be a “normal side” or if this should be a side to win your challenge.. But this page is worth to have a look!
    http://www.ingenfeld.de The badest one I ever visit!

If you want to you can follow the disussion through a comment feed.

add comment

This is the place where you get to say your opinion about this article, use it well. Formating with HTML is allowed. A red asterisk means that the following field is required.

Comment Form




Comment Form