Simon and Muhammad's Agency Website

Deployed at:

https://fac27.github.io/AgencyWebsite/

Project Brief

This website is a project for FAC27. Our brief was to create an agency website which included:

• An introduction to your agency
• Information about each member of your team
• A way to get in touch if they are interested in working with you

User stories

Core Stories

As a potential client, I want to:

• See information about each member of your team so that I can know who you are
• Browse your website on mobile, tablet, and desktop devices
• Click to navigate to different sections of your webpage
• Contact you to enquire about working with you
• Visit your website at a publicly accessible domain name

Additionally, as a visually impaired user, I want to:

• Navigate your website using keyboard controls
• Hear my screen reader describe the content on your website

Acceptance criteria

• Navigation menu
• ‘About us’ section
• Contact form
• A user cannot submit a form without filling out all of the mandatory fields (name, company name, email address)
• Information from the form doesn’t get submitted until the user clicks a button

Our process

Initial meeting and beginnings

During our initial meeting, we discussed our ideas for the website and agreed on a four-page site that would cover all of the content above.

We both looked at examples of agency websites for inspiration and decided on some key features such as a 'sticky' header navigation bar and video backgrounds.

Our first step was for Muhammad to create an HTML skeleton for the pages while Simon created wireframes that would inform the layout.

We also used these initial stages as an opportunity to practice creating issues, branches and pull requests.

Stage 2

After creating our initial HTML skeleton and planning the layout of the website, we decided on our next steps and created and assigned issues for each one.

Broadly speaking, Muhammad has been working on the HTML and Javascript, focusing on keeping HTML semantic to support accessibility, while Simon has been working on creating and applying CSS classes using sensible naming conventions and focusing on writing reusable code.

Next steps

• Burger menu for mobile site
• Consistent approach to CSS
• Social links further apart on mobile
• LinkedIn links added

Links for Reference

Website Wireframe:

https://docs.google.com/presentation/d/1nWWRpcBRzNzjSdiTBdWVikwUVTyARt6nFb3xvTxdcZ0/edit#slide=id.p

Spike:

https://docs.google.com/document/d/12GxZeetf7Ag6oesPRAKmtyslCYyMR9y38Fyft2br2eo/edit#

HackMD

https://hackmd.io/6dEUHGGrQp-zbTDEe77pHg