A space that helps figure skaters discover local clubs, events, and programs happening near them.
What if a young child, inspired by a figure skating performance, wanted to start skating, but didn’t know where to begin?
For many families, finding clear and reliable information about figure skating can be surprisingly difficult. From understanding the different disciplines to locating local clubs or competitions, the process often involves searching through multiple websites, each offering only partial or outdated information. This lack of accessibility can discourage potential young skaters from pursuing their interest in the sport.
This challenge inspired me to create a website dedicated to promoting figure skating among youth and young children. The goal of this is to build a centralized, easy-to-use website where users can find everything they need in one place. At the same time, this experience allows me to develop my website-building skills by building a website from scratch and applying what I learn in a real-world context.
Throughout this process, I will also research existing websites to understand their strengths and weaknesses, allowing me to improve my own design.
The “Why”
Many beginners are interested in the sport but struggle to find reliable guidance on how to get started, what opportunities are available, and how to stay engaged. By building this website, I aimed to both solve this problem and develop my own technical and research skills:
- Provide a centralized platform where parents and young skaters can easily access information about figure skating without needing to search across multiple websites.
- Make figure skating more accessible and understandable by introducing different disciplines, levels, and competition pathways in a simple way.
- Promote local skating clubs and events to encourage real-world participation and community involvement.
- Create engaging content (such as news, interviews, and stories) to increase interest and motivation among young skaters.
- Improve my ability to research, compare platforms, and apply user feedback to design a more effective and user-friendly website.
- Gain experience in the full website development process, from planning and design to testing and deployment.
The Website in Process
The final website includes an overview section, a category section, a story section, and a gallery section. I put everything on the HOME page, divided into four sections, so users can easily access any section they want.
The website link is here to view: https://glideguide.vercel.app/
The background will remain the same when the users scroll down. I created a huge skate to match the main idea:
The Color Theme
I have chosen the overall color theme of the website to balance national identity, user experience, and content variety. Since this website is focused on domestic figure skaters in Canada, red was selected as the primary color to reflect the Canadian flag and create a sense of national pride. This color is used in key branding elements, headers, and navigation menus to provide a consistent visual identity throughout the website.
However, not all sections use red exclusively. For example, the Gallery section incorporates a variety of colors. This decision was made intentionally because the gallery features images from different competitions, skaters’ performances, and events, each with its own lighting, costumes, and background colors. Using multiple colors in this section enhances visual interest and helps each image stand out, while still maintaining a cohesive look through layout and spacing.
The secondary and neutral colors were chosen for backgrounds, buttons, and text to ensure readability and avoid overwhelming the user. These complementary colors support the primary red theme without competing with it, creating a visually appealing and easy-to-navigate website.
Challenges
Building a website as a beginner was more challenging than I initially expected. Coding itself was difficult because I had to learn multiple languages, like CSS, Python, and JavaScript, at the same time, while trying to make the website functional and visually appealing. It was overwhelming to start from scratch, and at times, I wasn’t sure how to structure pages or apply design elements effectively.
One challenge I faced was learning CSS layouts, especially flexbox and grid. Arranging elements properly on the page and making the website responsive for different devices required a lot of trial and error.
To overcome these challenges, I used several tools and resources. For example, I incorporated AI tools to help me understand coding problems, generate sample code snippets, and explore design solutions. Explaining that in real-world work environments, many developers use AI to improve efficiency and creativity. Additionally, I collected design inspiration from platforms like Pinterest, which helped me visualize layouts, color schemes, and overall website aesthetics.
Another obstacle was trying to create a meaningful website rather than a random page. As a beginner, it was easy to focus only on coding without thinkinxg about user experience or content organization. By researching other figure skating websites like Figure Skaters Online, I learned how to structure content, make navigation intuitive, and present information in a way that is helpful for parents and young skaters.
Website Processes
When I first decided to build a website about promoting figure skating for youth, I knew it wouldn’t be as simple as just writing some code. The process began with planning and I spent several days sketching the website layout, deciding what sections were essential, and choosing a color scheme. Since the website is focused on Canadian figure skating, I wanted red to represent national pride, while also allowing other colors in sections like the gallery to highlight competitions and athletes’ photos. I imagined how parents and kids would navigate the site, and what content they would find most useful.
Next came the learning stage, which was both exciting and challenging. As a beginner, I had to start with the basics of CSS and JavaScript. I followed online tutorials and practiced coding exercises to understand how each element worked. At first, it was overwhelming—so many rules, tags, and styles! To make things easier, I started using AI tools to help debug code and generate examples. After doing a lot of research in real work life, AI is often used to make coding more efficient and inspire design ideas. I also explored platforms like Pinterest to gather creative inspiration for layouts and visual styles.
Once I felt more confident, I began building the software using Visual Studio Code. I coded the main pages, organized sections for competitions, skating clubs, and news, and made sure the navigation was clear and easy to use. Every step required problem-solving, from fixing alignment issues in CSS to testing interactive buttons with JavaScript.
The next stage was enhancing the website. I added interactive features like clickable menus, slideshows for competition photos, and a contact form. Each addition made the website feel more complete and engaging for visitors.
Lastly, I moved on to testing and deployment. I checked how the website appeared on different devices and screens, making adjustments to ensure it was mobile-friendly. Once satisfied, I published the website online using Vercel, which made it accessible to parents, kids, and skating enthusiasts everywhere.
Looking back, the process was a journey of learning, experimenting, and problem-solving. Each stage taught me something new—not just about coding, but also about designing a website that is functional, visually appealing, and meaningful for its audience.
Overview
Working on this website was a mix of excitement, challenge, and discovery. As a website-building beginner, I often felt overwhelmed when coding didn’t work as expected or when layouts didn’t look right, but those moments taught me patience and problem-solving. Seeing small pieces of the website come together with some help from AI, from a functioning menu to interactive gallery features, this experience gave me a sense of accomplishment and motivation to keep going. Even though my website still needs some more content, like interviews, stories, or competition pictures, the basic website building is coming to an end. The process of learning while building made the experience very hands-on, and receiving feedback from my mentor helped me refine my work and feel more confident in my decisions.
Takeaways
This experience taught me several important lessons beyond coding. I learned that careful planning, research, and testing are crucial for creating a user-friendly website. I also discovered that leveraging tools like AI and design platforms can make problem-solving faster and inspire new ideas. Most importantly, I gained confidence in tackling technical challenges and learned how to combine creativity with structured thinking to build a website from start to finish. These skills will not only help me in future web development experiences but also give me a practical understanding of how digital platforms can be designed to serve real users effectively.