IJKL-Team-Site: https://fac-14.github.io/IJKL-Team-Site/ 😇

WHO?

(in alphabetical order 😄)

• Emma
• Eve
• Jessie
• Martin

WHY

Our main goal: We wanted to create a recognisable agency site that managed to showcase our personality without taking up too much space or too much of an audience's time.

We also wanted to cater to the following audience profiles:

• Quickly navigate with about, team and contact links 👍
• Contact the developers 👍
• Make it responsive across desktop, tablet and mobile 👍
• Make it work with screen readers 👍
• Let security-conscious users sack off Javascript 👍

HOW

• We originally sketched out a brief template and some early thinking on roles and responsibilities on a whiteboard as we began the project.
• We spent 30 minutes researching independently to collect a moodboard of features we liked for inspiration.
• We created a brief topline wireframe using Sketch that proved quite a useful overall macro view to guide us as we worked on the details.
• We decided to split into pairs and work on different sections of the site simultaneously, occasionally regrouping to commit code and review overall progress.
• On the first day, one pair worked on the header while the other worked on the footer.
• On the second day, we split the main section into two parts, 'About' and 'Team', and each pair worked on one part.
• On the second afternoon we turned to bugfixing and finishing touches.

WHAT

Here's a few things and observations we found while doing the project:

• Header section: We encountered some trickiness in getting the header items to align properly, which we kind of hacked together to look OK. We naturally stumbled upon a solution to get the icons to change automatically, too. We wanted to incorporate the nav design challenge by having our nav appear as text on desktop and than as intuitive icons on mobile.
• Fonts & Design: We ended up having to meet half-way through the project to incorporate things like font, colours and other general styling rules - at the beginning we wanted to commit code and then style it, but this exposed a bit of a realisation about working as a group!
• Team Section: we found a little tricky to accommodate the desire to have a fixed 'card' on desktop and smaller. We originally tried to accommodate for all screen sizes organically in CSS but ultimately decided to incorporate two @media breakpoints to change the options as appropriate.
• Working as a Team: Understanding and deploying a collaborative workflow and process with Git/GitHub was as much of a challenge as the code itself. Each of us probably could have worked as successfully - perhaps even a little faster - as individuals on this task, but deepening our understanding of Git and pair programming was incredibly useful for real-world projects.
• Wait, what about Javascript? We ended up not using any Javascript in our project. We felt that it didn't really add much to our project and would have required a pretty heavy time investment - especially as one user story would require the site to be fully functional without Javascript. If we had more time we would have perhaps liked to code in some more interactivity with Javascript, but we feel that we focused on the correct elements with the time we had available.
• Formatting: Our various computers all have different auto-formatting options - which threw out PRs and made code review tricky, so ahead of future projects we've decided to align at the beginning on some common standards so when we review we can focus more on what actually needs to be reviewed. This could probably be addressed if everyone uses Prettier, but that defers to a plugin.
• Testing: We could have probably done with more time towards testing - we didn't really consider it across multiple devices and browsers until 5pm on Thursday. If we were to take on the project again we'd like to take on some TDD best practice from the start.
• GIT, WHY In general, merging on Git was 😱 (but we got there)

WHERE

THE INTERNET.

STRETCH

If we had more time on the project, a few of the ideas we'd like to add are:

• A full portfolio section to help both razzle and dazzle those prospective clients.
• Our own photo for our hero image - we used Unsplash.
• We'd like to make the contact form actually work