How To Code A Cringey ‘00s-Era Game With HTML/CSS & JavaScript

0
83389
How To Code A Cringey ‘00s-Era Game With HTML/CSS & JavaScript
How To Code A Cringey ‘00s-Era Game With HTML/CSS & JavaScript

In honor of Codecademy’s 11th anniversary, we’re looking back at the 2000s websites and software that influenced our founders to build Codecademy — and inspired a generation to learn to code. Explore other fun deep dives into early aughts internet topics here.

ICYMI, for Codecademy’s 11th anniversary celebration we’re giving you a crash-course in the internet of the 2000s and paying tribute to the websites and software that defined a generation of technologists.

When thinking about iconic early aughts internet trends, most people’s minds go right to AIM and Myspace. And while these sites introduced groundbreaking ideas for the time, there are two other important sites that set the stage for platforms like Facebook and YouTube: HOTorNOT and Facemash.

Read on to learn how these sites worked and the rich legacy that they left on the World Wide Web. Then code your own ‘00s-era mini app called DOGorNOT (we swear it’s not as weird as it sounds) using HTML, CSS, and JavaScript.

A brief history of HOTorNOT and Facemash

Back in 2000, software engineers in Silicon Valley coded a website called HOTorNOT, where people could upload photos of themselves and have strangers rate their “hotness” on a scale from 1 to 10. It’s hard to imagine this shamelessly simple website getting greenlit (let alone becoming popular) today — but at the time, it was broadly considered okay. HOTorNOT’s runaway success was a pivotal moment for the internet.

Keep in mind that this was before Tinder and Facebook existed, so the idea of sharing photos and inviting a dialogue — about non-famous people’s looks nonetheless — was novel. “Everything about HOTorNOT was about wanting to cultivate the idea of a two-way web, finding ways to connect people,” co-founder James Hong told Mashable in 2020. “We really saw ourselves as trying to build the ultimate people router.”

Other programmers iterated on HOTorNOT’s premise and saw success. In 2003, a Harvard sophomore by the name of Mark Zuckerberg (ever heard of him?) hacked the school servers and coded a “prank website” called Facemash, which presented two headshots of students and invited users to vote on the more attractive photo. Facemash would go on to become Facebook.

Even the YouTube co-founders credited HOTorNOT for the idea for a video-sharing platform. “I was incredibly impressed with HOTorNOT, because it was the first time that someone had designed a website where anyone could upload content that everyone else could view,” YouTube co-founder Jawed Karim told TIME in 2006. “That was a new concept because up until that point, it was always the people who owned the website who would provide the content.”

How to code your own DOGorNOT app

If all this internet nostalgia has you in the feels, we have a fun coding project for you that involves building a HOTorNOT-esque game, DOGorNOT, using HTML/CSS and JavaScript.

The DOGorNOT mini app is tame compared to its predecessors. To play, click the photo that you believe is a dog (harder than it sounds!), and see if you guessed correctly.

Want to code your own DOGorNOT-inspired game? First, check out this workspace to peek at the code Jiwon Shin, Codecademy Senior Curriculum Developer, used to make it. Anyone with a free Codecademy login can access an IDE to experiment building apps like this in workspaces.

Here are the programming languages and coding concepts that Jiwon used to create DOGorNOT, plus links to courses that will walk you through the skills. To learn all of these techniques and understand how the languages interact, check out our course Building Interactive JavaScript Websites. (And don’t get discouraged if you don’t understand what all of this means — our courses are beginner-friendly!)

HTML organizes and displays the site’s content:

  • Just basic HTML here; no complex HTML tags required

CSS gives the site its the recognizable ‘00s aesthetic:

JavaScript makes the site dynamic:

HTML & CSS Courses & Tutorials | Codecademy

HTML is the foundation of all web pages. It defines the structure of a page, while CSS defines its style. HTML and CSS are the beginning of everything you need to know to make your first web page! Learn both and start creating amazing websites.