Now I could simply just show you the finished product, but there’s more to the journey than the destination. In my first semester of senior year I took VHS Advanced Web Design (although it wasn’t as advanced as thought it would be). Instead, I would simply just watch lectures online from CS50, an introductory computer science course at Harvard University. In December, which is the month in which the Robotics club prepares for the build season, an intense six week period to fully design, build, and program a robot in order to complete a challenge. Xin Zhang, a prestigious BHS student, offered me to help in designing the website. Using the Wayback Machine at Internet Archive, which is a massive internet archive that stores snapshots of websites over time, I was able to look into previous designs of our own website. Unfortunately, I was unimpressed. In order to create a website, I went and gathered the necessary resources:
- Bootstrap is a powerful front-end framework for HTML, CSS, and JS used to rapidly develop websites that are responsive and mobile-first.
- A text editor that is useful because of plugins like Tag, HTML-CSS-JS Prettify, SublimeLinter.
- Github is powerful collaboration software. It allows all to work on the website (though not live) at the same time and keep track of revisions.
- A modern HTML5 WordPress Bootstrap starter theme
Due to the popularity of Bootstrap, it is common to find websites using Bootstrap that make little changes to make the site unique. For example, it is painfully obvious that haikudeck uses Bootstrap for its website. However, one goal we strived for was to create a unique looking website that one would not expect to be made using Bootstrap.
In order to create a modern responsive web design, we decided to look at other websites to model after. We chose not to base our site model off of other teams in robotics. Instead, we looked to the top. We surveyed university and award winning websites for inspiration. Some of the few that were deemed relevant to our interests was BU, University of Chicago, Johns Hopkins, and Cooper Union. We knew that just because they are university sites or sites of Fortune 500 companies, that cannot stop us from making website on the same scale. The robotics club should, by merit, be employing the most advanced technology and yet our older website does not reflect this notion.
- Instead of using the default fonts that come with Bootstrap we decided to experiment with Google Fonts and chose Open Sans.
- Red is not an easy color to work with. It is rare to find sites themed with red and clashing red with black or white in the wrong way can be a disaster.
- Out of all the resources we used, Backstretch had the greatest impact on the site’s appearance (besides using Bootstrap). Backstretch allows us to add a static image to the background of all pages.
In order to keep the site going in the future years, we need to make every last effort in order to educate the younger members of the club on how the code works on the site and how to easily make adjustments to the code. From what we learned in this project, we now have to pass the baton to the underclassmen.
What I’ve Learned