Amy Gaskin | January 2024
I decided to kick off 2024 by building a website to spotlight my ongoing projects and demonstrate my technical capabilities in coding and beyond. Within my current team, I'm known for my commitment to quality improvements, so, naturally, I've documented the process of building this website, which I recognise is a bit meta to host here, but it's a good excuse to reflect on the challenges I encountered along the way.
With all that in mind - let's get started!
If you're not familiar with GitHub, you might not know that it provides a fairly straightforward method to deploy static websites directly from a GitHub repository. So, for the sake of simplicity, it allowed me to version control, manage my front-end code, and host it all in one place, which, for this project, was pretty useful.
A summary of how I achieved this:
At this point, I had a dedicated static page where I could host my portfolio, complete with a dedicated link! This was pretty motivating, but I was blocked by deciding whether I wanted to go one step further and attempt to do the back-end development of this, too. In the end, I decided the scope could be refined as part of a future iteration, as the priority was establishing an online presence, and doing back-end as well as front-end development would have taken longer than two weeks (around a full-time job). Minimum viable product, and all!
Before I started development, I confirmed the website deployment was working. GitHub Actions were useful here to track whether workflows to deploy the website were successful.
In my repository, I created the core files for this project.
index.html This is main HTML file of the website. It defines the structure and content of my website.
styles.css This CSS file contains the styles information for my website. It determines how elements are visually presented, including colours, margins and padding, fonts, etc.
app.js This is the JavaScript script to launch any dynamic functionality I wanted to add to the website to enhance the user experience. I realise this spiel is basic,but it is important to get the basics right, as the last time I recall doing any kind of web development was coding themes for my Tumblr blog in my teenage years. (Arguably, this interest led me to my bioinformatics career).
I also created some subdirectories to organise my images and any subpages I wanted to include. It is very important to maintain a clean and organised repository structure, mostly for the sake of not irritating your future self, but also, theoretically, making collaboration easier if someone wants to maintain or use your code one day.
After setting up GitHub Pages and establishing a core set of files, the logical next step was to organise the wireframe of my website. Honestly, this was the biggest hurdle to overcome, because while I already knew what core sections I was going to create (Homepage, Projects, Skills, Contact), I couldn't decide on how I wanted it to look. Crucially, I also couldn't remember vocabulary like 'wireframe' to solve this problem, which wasn't helpful for Googling.
This is when I started browsing websites that I liked the look of and using 'View Page Source' to try and reverse-engineer them, but, I got overwhelmed by how cool these websites looked, and how I wasn't going to achieve that because, frankly, that wasn't the minimum viable product. And, after several attempts at trying to make my website sleek and aesthetic, I ended up corrupting the wireframe so much that I nuked the entire project and started again. (I probably lost a day's work to that nonsense.)
My reflection? Keep. It. Simple.
A really good example of this is the website that recently-retired digital creator Tom Scott built to showcase his projects. When I took a glance at the page source, the code was so clearly built that it reminded me a bit of Lego. Thanks to that clear structure, I began to map my own wireframe out, but not before I immediately realised something important that I'd totally forgotten about.
Any waning knowledge on web development from my teenage years immediately came flooding back. For instance, a standardised HTML boilerplate provides a starting point that includes all the necessary tags and structure to get a webpage up and running quickly (including favicons!). This is why standardisation is beautiful.
Then, Bootstrap. This is a popular front-end framework that provides a set of pre-designed, responsive, and customisable CSS classes in stylesheets. These stylesheets streamline web development by offering a consistent and aesthetically pleasing design across various devices, saving time and effort in creating responsive layouts and components.
Aside from importing a Bootstrap style sheet, I also imported some external JQuery scripts into my index.html file so I could make use of the JavaScript library jQuery and make my site interactive, and one from FontAwesome so I could fetch some social media icons.
Side note: To exert caution, whenever I imported an external stylesheet or script, I made sure to provide a SHA integrity hash to prevent potential malicious code injection. It works by ensuring that the linked stylesheet or script has not been altered or compromised, which provides a mechanism to verify the authenticity and integrity of the external resource. Best to be on the safe side!
Side side note: Don't try to use Bootstrap classes from version 3 when the stylesheet you've imported is version 5 and then wonder why your styling isn't working. You will feel silly.
A feature I knew I wanted was a simple navigation bar, which became much easier to design once I'd implemented Bootstrap styling.
Anyway, I was then able to easily structure my webpage. In Bootstrap, the grid system is based on a 12-column layout, and different classes are designed so users can create responsive and flexible layouts. In particular, I used this to arrange my projects and highlight my skills in a visually-appealing manner. I won't lie, I really enjoy how the grid in the Skills section turned out. The icons really work well together, and it's a good method to easily communicate the things I can do!
While aesthetics of a website are important, it is prudent to prioritise them after ensuring a robust foundation. My Bioinformatics professor at university created this helpful slogan to keep this principle in mind when coding anything (but, as we have seen here, I don't always remember it!).
In summary:
At the very least, spending time getting the foundations right allowed me time to figure out what kind of content I wanted to include, and how I can easily add to each section as I widen my skillset and embark on more projects!
And that's it! At the end of two weeks, I have a basic, functioning website hosted on GitHub. I certainly learned a lot during this experience, and I hope you learned a bit too, if you've read this far!
Remember:
All the best,
Amy