project showcase

A Free Bird

Mobile Responsiveness
CSS
HTML5

Overview

During my time at A Free Bird, I was able to work as a front-end developer, altering code that would directly translate to the main website of the organization. A lot of my work consisted of optimizing pages for mobile responsiveness or making sure the page looks good when someone accesses it through a device other than a laptop or desktop. Devices such as phones and iPads. The following images show the formatting for mobile vs desktop. On mobile, bubble images appear which are embedded into the text.

Learning Point

I spent a majority of my time working on improving the program pages by the names, Dream Big, Take Flight and Fly Free. I changed their layout, improved them for mobile responsiveness and updated the written content. I also embedded images and videos to their corresponding paragraphs to improve the reader’s experience which improved my UX sensibilities. The task was slightly difficult as it required CSS code that would embed the image and have the text curve around in a way that feels cohesive. The image below showcases bubble images with text wrapping around them.

Teamwork

For this role, we used the online collaboration platform Clickup to create tasks, assign and track their progress. It was my first time working on this platform and I enjoyed how comprehensive it is when it comes to elements of project management. We also used Slack and Google Meet where I regularly communicated with my direct supervisor and the founder of A Free Bird and attended tech meetings twice a week. I got to better understand good practices of workplace communication. Especially given that it was a remote role where we worked on self-designated times, it was a bit difficult at first to adjust with their time expectations but after we spoke about that confusion I was well sorted.

Difficulties

Most, if not all the tasks I engaged with had to do with CSS alterations so it was the perfect opportunity to take a deep dive into CSS and attain a comfortability with it. I encountered some difficulty picking up best practices for writing CSS including naming conventions to account for CSS specificity and code that applies to more than one page and how to name classes for scalability. These difficulties allowed me to develop a better understanding of how to organize CSS for production level code.

Moving Forward

This experience allowed me to settle with just the fundamentals of web development mainly working with CSS and HTML and it revealed a blindspot that I had overlooked. While I was keen on getting up to speed with React, I realized that my CSS and HTML skills needed dedicated attention as well so moving forward, I know i need to continuously refresh.

visit live site →A screenshot of web page