Julia Butler

Back to Projects

GitHub Pages Personal Website

Link to GitHub Repository

After finishing my sophomore year of college, I had a better understanding of software development, data structures, and algorithms, which gave me many ideas for personal computer science projects. However, I wanted to have a place where I could display my project portfolio. Additionally, I noticed that many of my peers had personal websites to share their projects and knowledge with the world.

That being said, I began to research tools that I could use to build my website. I was somewhat familiar with HTML and have made single-page HTML sites for fun and to explore. However, I was not acquainted with CSS, so I took a Codecademy course to learn more about it. After learning these coding languages, I turned my attention to the next task at hand: finding a domain.

Most of the options available for web domains would cost me anywhere from $100-150/year. For a college student, this was obviously not ideal. However, I came in luck when I stumbled upon one of my professor's personal websites, which was hosted on GitHub Pages. After further research, I discovered that GitHub provided a free domain linked to every GitHub account based on username. From that point on, it was a no-brainer. Before delving into the coding, I watched some of GitHub Page's tutorial videos and looked at other websites hosted by them for inspiration on layout and formatting.

In order to maintain creative control over the layout and formatting of my website, I decided to not opt for a CSS Bootstrap. Although it meant this aspect of my website would be done completely manually and made more tedious, it has been quite fun. I relied heavily on tutorials provided by W3Schools to continue filling in the gaps of my knowledge of HTML, CSS, and JavaScript.

Another important aspect of website development that I have learned is connecting multiple coding languages to make a final product. While I have made multi-file Python, C++, and Java apps/programs, this has been quite different for me since these languages differ from each other so greatly in terms of syntax and purpose. At a later date, I plan on cleaning up my code and refactoring to make it easier to maintain.

As of the summer of 2021, I am still learning how to develop websites with HTML, CSS, and JavaScript. However, I am very proud of what this website looks like and plan to continue maintaining it in the future. It has been a very fulfilling project for me.


August 31, 2021 Update: I noticed on a Windows computer that my website had Times New Roman font rather than Avenir Next. Upon further research, I discovered that only Apple devices come with the Avenir Next font and other devices would have to purchase the font. Additionally, I became aware of "web safe fonts," or fonts that generally every computer and web browser supports. Due to differences in technology, some people would view my website in a different font. However, a solution to this problem was "fallback fonts," or fonts that computers could rely on if the preferred font is not supported or downloaded. While searching for fallback font solutions, I came across Google Fonts which are free to use. I found a font called "Nunito" that is a fairly close match to Avenir Next and edited all of the HTML and CSS files for my website. Now, the website should look similar across all computers and web browsers.