Browning Birds Website

I started my undergraduate studies at Scripps College in Fall 2019, but in the spring of my freshman year, March 2020, we were all sent home because of the pandemic. We didn’t return to campus until Fall 2021–my friends and I all still felt like freshmen, but we were technically upperclassmen. We were on campus, but didn’t have any knowledge of the history or culture of our college. We wanted to participate in some sort of tradition, so we started our own.

Browning Tower is a small, empty tower that overlooks most of the campus, with four windows cut into the walls. We hung out up there sometimes, but the tile floors were always dirty and there was always some trash lying around. My friend Julienne suggested that we start a community mural at Scripps, so we decided to transform this space. In April 2022, we painted six birds from around the world on the walls, and wrote “Add Your Own Bird.” By the time we graduated, more than 50 birds had been painted by anonymous artists, and everyone on campus knew about the Browning Bird Tower.

I wanted to document the history of the Bird Tower, so in February 2023 I created my first-ever website from scratch, browningbirds.com. My friends Gabriel and Julienne helped me register the custom domain name with Google, and I set up a GitHub Pages repository to host the code (I switched from GitHub Pages to Neocities for my personal website because I like the community on Neocities). I spent 30 minutes reading through a single HTML/CSS tutorial, then decided I knew enough to make an entire website.

This whole project was a huge learning experience. Some things went pretty well–at the end of the day, I came out with a functional website.

But I faced some major struggles. For starters, I decided early on that I wasn’t going to copy+paste any code, because I wanted to learn by writing it myself. I looked at an online tutorial for how to create a nav bar, which used HTML formatting that I later learned was an “unordered list,” with the tag <ul> as a container for the items. However. In many monospace fonts, the tag <ul> (letters) looks extremely similar to <u1> (letter and number), and because I was just typing out the code myself I didn’t catch the difference. I didn’t catch the mistake until months later, at which point I had somehow managed to wrangle the <u1> tag into being an effective nav bar.

But the Browning Birds website was the perfect way to learn the basics of creating a website from scratch, because it’s a very simple site with a few different types of pages. The first pages, just text and images, were the hardest to create because I didn’t understand how to position elements with CSS (a skill I didn’t fully master until almost a year later). The Gallery page was also difficult, because I needed to stack images neatly in columns in a way that would compress well on small screens, and I decided that I wanted to include captions for each image that pop up when hovered over. I achieved the caption effect by positioning the text and its semi-translucent background 100px below each image card, and then on hover the position moves up. Like this:

For the Submit Birds page, I was lucky enough to stumble across FormSubmit, a service that allowed me to easily collect submissions of new bird paintings to post on the website.

Looking back, the Browning Birds website looks incredibly simple. It’s a purely static site, just HTML and CSS, and I can think of a million different ways to improve it. But it was my first foray into website building, and the skills I learned there allowed me to create my current, much more complicated website. If you compare the two, you can see traces of the Browning Birds throughout my whole website design. And at the end of the day, this was a website meant to document a history and a community, and I think it succeeded :)