“Presenting my very first individual website that I created during my Frontend Web Development Traineeship.”

View the website

Introduction

The Hammer, Brush & Glue Learning Centre website represents an important milestone in my journey as a web developer. This project challenged me to conceive, research, and create a comprehensive website from scratch. In this case study, I will examine the key aspects of the website's development process, from ideation to execution, highlighting the strategies and techniques used.

Project Plan and Ideation

The primary objective of the Hammer, Brush & Glue Learning Centre website was to serve as a platform for informing parents about childcare classes and services tailored for children aged 5 to 9. This family-owned business places vital importance on creating a nurturing and caring environment, with friendly tutors ensuring the well-being of every child. The website was designed to showcase the curriculum, activities, success stories, and testimonials to build credibility and trust among potential parents.

Creating a Unique Brand Identity

The name "Hammer, Brush & Glue" isn't just a catchy title; it's a unique story that captures the spirit of the Learning Centre's classes. This name was carefully crafted by me to be recognisable, memorable, and to stand out in a crowded market.

Design and Aesthetics

The colour scheme of the Hammer, Brush & Glue website was accurately chosen to vibrate with children while aligning with the logo and main navigations. This palette adds visual appeal and prioritises accessibility with high contrast and readability.

All website illustrations were personally crafted by me, using disproportionate shapes and playful lines to maintain a consistent, child-friendly atmosphere.

Wireframes and Responsive Design

Creating a seamless user experience across various devices was a key focus. I used a simple low-fidelity approach to visualise the website's layout on different screens, ensuring mobile and tablet responsiveness up to 900px and an optimal desktop version from 901px.

1 2 3 4 5 6 7

Technical Implementation

To fulfil the project objectives, I leveraged HTML5, CSS, and JavaScript, PHP, incorporating best practices in accessibility and SEO. Interactive features such as sliders and scrolling elements were integrated to present information in a user-friendly manner. A "go to top" button was added to ease navigation on the long, one-page website. For mobile users, I designed a collapsed menu icon to save screen space while maintaining interactivity.

Challenges and Learning

Through this project, I gained valuable insights into web development. I learned the importance of balancing interactivity with user convenience, realising that excessive sliders on a one-page website could potentially frustrate users. And it may be worth minimizing the user interface by avoiding unnecessary clicks for quick access to information.

One of the most significant challenges I faced was making a gallery slider responsive across all platforms, particularly in managing the height of the parent container. I think JavaScript might offer a solution for this issue, but I haven't cracked it yet. Due to a looming deadline, I resorted to a less-than-ideal approach – I employed around seven Media Queries exclusively for the gallery slider, and even then, it was not perfect. Perhaps more Media Queries could have helped, but I hesitated to add more.

Conclusion

The Hammer, Brush & Glue Learning Centre website has become a demonstration of my growth as a novice web developer. Through strategic planning, innovative design, and a user-centric approach, the website effectively informs parents, introduces trust, and showcases the Centre's unique offerings. It reflects my commitment to creating engaging online experiences that resonate with users and fulfil business objectives.

This project is a prove that web development is an evolving journey. This challenge provided an opportunity to learn, adapt, and improve my skills. The Hammer, Brush & Glue Learning Centre website stands as evidence of my commitment to delivering user-focused, visually appealing, and technically sound websites.