How Space Jam Taught Me Web Design

My first experience with Upperline Code came from a four-week course taught as a part of the Institute for Entrepreneurship, a summer program developed by Prep for Prep and Google.

In this course, I learned valuable skills from Upperline teachers, such as enough HTML, CSS, and Javascript to be able to create a Node.js web app that uses Firebase. The purpose of this app was to showcase a business idea, and more interestingly for me, enter a competition at Google for fame, glory, and Google merchandise.

While the program was going on, I was really only thinking about the code and what Google merch I wanted to win, however, I now appreciate a little bit more what technology could do for a budding business.

About 20 years ago, having a snazzy website was not such a big part of one’s company image. A notable example of a website for a successful franchise that has not been updated for the modern day is the Space Jam site. This was shown to me first by Upperline instructor Jeff Astor.

W-where are the fancy sidebars? The material design principles? The humanity?!

This is an extreme example of a product of its time. The website was made in 1996, and did not have any of the bells and whistles we come to take for granted today. It didn’t need it, granted, but there is a stark difference when compared to, say, the website for “The House”, starring Will Ferrell and Amy Poehler.

Look! A navbar, with buttons that change color when you hover over them!

This website would be considered mediocre at best today, and this movie was even one of the bigger box office flops in 2017. But it is a world of difference from the Space Jam website.

It’s unfair to Space Jam to compare its website to that of a movie that came 21 years later, but it goes to show that if a mediocre movie got a modern website, you want to have a successful business, or movie, you will need at least need a good website.

What does Upperline have to do with this?

At the IFE course, we were taught, among many other things, how to make websites look really pretty using pure CSS and CSS frameworks.

We started out, though, at the Space Jam level of things: not much more advanced than changing text color and background images. It was not very readable, and for some reason, anyone who made such a simple HTML file in a CS class would always be theme it “My Favorite Animals” or something. Perhaps the level of sophistication in the content is meant to match that of the website’s design.

Sample page that I made during the course. Perhaps the summer heat was getting to me.

At the time, having found that teddy bear picture, I decided to get as much mileage out of it as I could, so when Mr. Jeff Astor told us to use CSS to make a nice looking “profile page”, I used our slightly-more-advanced skills to make this:

Part 1

Part 2

One of Jeff’s mantras is that he became a better coder by using (“stealing” was his word) other people’s work and changing things until it was his, so he taught us how to use a CSS framework like MaterializeCSS. This is where our pages started getting really, well, OK-looking. This is a sample of a Materialize page we made on the first day of learning about it. The essence of what we did was take various pieces of pre-made code MaterializeCSS made for us, and stuck them together to make something simple but decent. This page contains a header and footer, some cards with pictures and interactive information text, and some shifted-around colors.

I was in a Futurama mood that day.

The same page but with all of the “More” text opened up.

None of this was that impressive to look at, but it was all very easy to do, and took less than a few hours to learn and create. The point here is to show that as website design gets easier to learn, the better things you can learn to create in a short amount of time. For a look at what could be made after a few more hours of looking through documentation, writing CSS, but really just wasting time on Reddit, see the following picture. Here is the homepage of the web-app I made at the end of the summer: a pickup sports game-scheduling app called Pickup.

(I made the Pickup logo myself, humblebrag.)

I’m not a profession web designer in any sense of the word, but thanks to Upperline, I was able to make a homepage for an app that is both pretty enough and functional enough that:

• I feel comfortable showing it to this audience.
• I felt comfortable putting it in a web app that I would show to Google employees and executives.
• It would actually boost usage of an app made for an upstart entrepreneur.

If anything, I think it looks better than the website for The House, so this page is at least good enough for the app equivalent of a mediocre box-office flop.