Wednesday, February 8, 2023
HomeE-LearningHow To Code Web sites Like HOTorNOT With HTML & JavaScript

How To Code Web sites Like HOTorNOT With HTML & JavaScript

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

In honor of Codecademy’s eleventh anniversary, we’re wanting again on the 2000s web sites and software program that influenced our founders to construct Codecademy — and impressed a technology to study to code. Discover different enjoyable deep dives into early aughts web matters right here.

ICYMI, for Codecademy’s eleventh anniversary celebration we’re providing you with a crash-course within the web of the 2000s and paying tribute to the web sites and software program that outlined a technology of technologists.

When interested by iconic early aughts web traits, most individuals’s minds go proper to AIM and Myspace. And whereas these websites launched groundbreaking concepts for the time, there are two different essential websites that set the stage for platforms like Fb and YouTube: HOTorNOT and Facemash.

Learn on to find out how these websites labored and the wealthy legacy that they left on the World Broad Net. Then code your individual ‘00s-era mini app referred to as DOGorNOT (we swear it’s not as bizarre because it sounds) utilizing HTML, CSS, and JavaScript.

A short historical past of HOTorNOT and Facemash

Again in 2000, software program engineers in Silicon Valley coded an internet site referred to as HOTorNOT, the place individuals may add images of themselves and have strangers fee their “hotness” on a scale from 1 to 10. It’s arduous to think about this shamelessly easy web site getting greenlit (not to mention changing into standard) at present — however on the time, it was broadly thought-about okay. HOTorNOT’s runaway success was a pivotal second for the web.

Remember that this was earlier than Tinder and Fb existed, so the concept of sharing images and alluring a dialogue — about non-famous individuals’s seems nonetheless — was novel. “The whole lot about HOTorNOT was about eager to domesticate the concept of a two-way internet, discovering methods to attach individuals,” co-founder James Hong informed Mashable in 2020. “We actually noticed ourselves as making an attempt to construct the final word individuals router.”

Different programmers iterated on HOTorNOT’s premise and noticed success. In 2003, a Harvard sophomore by the title of Mark Zuckerberg (ever heard of him?) hacked the college servers and coded a “prank web site” referred to as Facemash, which introduced two headshots of scholars and invited customers to vote on the extra enticing photograph. Facemash would go on to turn out to be Fb.

Even the YouTube co-founders credited HOTorNOT for the concept for a video-sharing platform. “I used to be extremely impressed with HOTorNOT, as a result of it was the primary time that somebody had designed an internet site the place anybody may add content material that everybody else may view,” YouTube co-founder Jawed Karim informed TIME in 2006. “That was a brand new idea as a result of up till that time, it was at all times the individuals who owned the web site who would offer the content material.”

Tips on how to code your individual DOGorNOT app

If all this web nostalgia has you within the feels, we now have a enjoyable coding challenge for you that includes constructing a HOTorNOT-esque recreation, DOGorNOT, utilizing HTML/CSS and JavaScript.

The DOGorNOT mini app is tame in comparison with its predecessors. To play, click on the photograph that you simply imagine is a canine (more durable than it sounds!), and see when you guessed appropriately.

Need to code your individual DOGorNOT-inspired recreation? First, take a look at this workspace to peek on the code Jiwon Shin, Codecademy Senior Curriculum Developer, used to make it. Anybody with a free Codecademy login can entry an IDE to experiment constructing apps like this in workspaces.

Listed below are the programming languages and coding ideas that Jiwon used to create DOGorNOT, plus hyperlinks to programs that can stroll you thru the talents. To study all of those methods and perceive how the languages work together, take a look at our course Constructing Interactive JavaScript Web sites. (And don’t get discouraged when you don’t perceive what all of this implies — our programs are beginner-friendly!)

HTML organizes and shows the positioning’s content material:

  • Simply primary HTML right here; no complicated HTML tags required

CSS provides the positioning its the recognizable ‘00s aesthetic:

JavaScript makes the positioning dynamic:

HTML & CSS Programs & Tutorials | Codecademy

HTML is the muse of all internet pages. It defines the construction of a web page, whereas CSS defines its fashion. HTML and CSS are the start of the whole lot you want to know to make your first internet web page! Study each and begin creating superb web sites.


Most Popular

Recent Comments