CodeCrafters Academy

CodeCrafters Academy is a web development project that focuses on helping individuals learn programming languages and develop their skills. I worked with the team on various aspects of the site, including creating a home page with a feedback carousel and a responsive registration form.

collaborators

Ailbhe Cullen, Andreea Coica, Faith Clarke

project duration

28 June 2023 → 26 July 2023

project type

Web Development

UX/UI

programming languages and tools

html

css

javascript

bootstrap

figma

miro

visual studio code

github

challenge overview

Create a website with the topic 'teaching' including the following key items:

A minimum of 2 HTML web pages and one external CSS file
A website wireframe
Use a CSS framework
All links working
Basic user interaction (ex. hover, submit form, action on click)
Adhering to UI/UX rules

discovery

Each group member shared some of their initial ideas and what features could be included in the website. I collated these ideas and shared them on a Miro board.

define

After group discussions, we decided to create a tutoring website for people who were seeking tutoring for various coding languages. Through wireframing and sketches, we were able to identify the two HTML pages we wanted to include, and what features to implement.

develop

Using our initial sketches and wireframes, high-fidelity wireframes were mocked up. This allowed us to identify which sections of the website we were going to develop. My role involved creating the navigation bar, footer bar, and making sure all the links were active. I created the boilerplates for each of the pages and created a Github repository in order for the team to collaborate remotely.

Following UX/UI principles, we wanted to create a consistent look and feel across both pages. To ensure consistency, we decided on the colour scheme and typography. A blue colour scheme was chosen to promote a calm environment for learning and also allow customers to build trust with the brand.

first iterations

The first iteration of the registration form had a transparent background overlayed on an image. The white text on the form created low contrast, affecting the overall accessibility of the site.

Since each member had a different section to develop, there were some inconsistencies with the design. I made sure that the navigation bar, footer bar, and colours were consistent across the two pages.

deliver

After several reiterations, we were able to deliver our website to our cohort. The website delivered consistency across the two pages, and we increased the contrast of the registration form.

Full Website Here

future work

In future work, I'd like to build upon the website and design more pages. These pages can also include a page for tutor profiles. A search bar would also be useful for website visitors to find what they are looking for. I'd also like to try coding a payment page for cutomers following the registration page.

results and reflections

Project Successes 👏

The team were able to successfully present our website design to our peers and instructors and received positive feedback. Our website won best project from the whole cohort.

What I Learned 🌱

I furthered my skills in collaborative teamwork and wireframing skills. I learned a lot about HTML, CSS, Javascript and Bootstrap and was able to contribute to a successful project. I was also able to familiarise myself more with Github and how to collaborate through the platform. I was also able to see the importance of wireframing and prototyping before the development process, as there were many things that we had to change whilst developing the site.

Reflection 🪞

Due to the timeframe of this project, we had little time to work on this project. In future work, I’d like to develop more of the website and the different pages. I mainly focused on using HTML, CSS, and Github to complete my part of the website, so I would like to practise using more Javascript and using Bootstrap frameworks.