My Experience Building This Website

Published on

Introduction: Why Share This?

Welcome to the very first blog post on My Portfolio! While the primary mission here is to arm you with top-notch VCE resources, I thought pulling back the curtain on how this site was built might be an interesting read. For fellow aspiring developers, students curious about web development, or just anyone wondering what goes into creating an online resource, this one’s for you.

This isn’t just about lines of code; it’s about the problem-solving, the “aha!” moments, the inevitable frustrations, and the satisfaction of bringing an idea to life. So let’s dive into the journey of building this platform.

A snapshot of the website's homepage

The Spark: Where the Idea Came From

Every project, big or small, starts with a spark. For me, the idea for this website wasn’t a sudden lightning bolt but more of a slow burn, fuelled by my own experiences and observations. As a current VCE student myself, I noticed how most resources available for students were often paywalled. The few free sources that were available were great, but were outdated in some cases.

I envisioned a clean, accessible space where students could quickly find reliable resources without getting lost in a maze of forums or outdated links. The goal was to create something genuinely helpful.

Planning and Tech Choices: Laying the Foundation

Choosing the right technology stack is always a crucial decision. For this project, I opted for:

Here’s a very basic example of the HTML structure I used for a typical resource listing item. The actual implementation has a bit more to it for styling and functionality, but this gives you an idea:

<h3>General Notes & Summaries</h3>
<ul class="resource-list">
    <li>
        <a href="Link to file..." download>Complex Numbers Summary (PDF)</a>
        - Overview of complex number operations and De Moivre's theorem.
    </li>
    <li>
        <a href="Link to file..." download>Calculus Notes (PDF)</a>
        - Covers differentiation and integration techniques relevant to Spec Maths.
    </li>
</ul>

The Building Process: Bringing it to Life

With a plan and tech stack decided, the real work began: translating ideas into a functional website. My process generally involved:

  1. Structuring the Content (HTML): Building the semantic skeleton for each page type – homepage, subject pages, resource listings, blog posts.
  2. Styling (CSS): Applying the visual design. This was an iterative process, starting with a basic layout and progressively refining the look and feel, focusing on readability and a clean user interface. I made heavy use of CSS Flexbox and Grid for layout.
  3. Adding Interactivity (JavaScript): Implementing any dynamic features, like a mobile navigation menu, search/filter functionality (a future goal!), or smooth scrolling.

One of the first major components I tackled was setting up the system for displaying the VCE resources. This involved thinking about how to categorise them and make them easily discoverable.

The first iteration of the test blog

Ensuring the website was fully responsive was a top priority. This meant a lot of testing across different screen sizes and tweaking CSS. Here’s a little CSS snippet that helps manage the layout of resource cards on different screen sizes using Flexbox:

.resource-list {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 15px;
}

.resource-list li {
  margin-bottom: 18px;
  padding-left: 30px;
  position: relative;
  line-height: 1.5;
  color: #ccc;
}

.resource-list li::before {
  content: '\f019';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0px;
  top: 3px;
  color: #a78bfa;
  font-size: 1em;
}

Challenges I Faced (And How I Tackled Them)

It wouldn’t be a real development story without a few curveballs! Here are a couple of notable challenges:

First Release of the Physics Resources

Challenge 2: Perfecting the “User-Friendly” Vibe

It’s one thing to make a site functional; it’s another to make it genuinely user-friendly and intuitive, especially for students who might be stressed and short on time. I spent a lot of time tweaking navigation, information architecture, and even font choices.

Key Learnings and Takeaways

This project has been a fantastic learning curve. Beyond the technical skills, here are some broader lessons:

What’s Next?

This is just version 1.0! I have a list of ideas and improvements I’d love to implement over time:

← Back to Blog List