ABFAC Team Website

Week 1 Project - https://fac-13.github.io/ab-fac/

WHY

This is a one-page portfolio website for the AbFac Full-Stack Web Development team.

User Stories:

• As a client looking to hire a team of developers

  I want to visit your site and immediately see a headline about your team

  So that I get a concise description of what you have to offer me.

• As a client looking to hire a team of developers

  I want to visit your site and see a navigation link for 'About, Team, and Contact'

  so I can quickly navigate to the areas of the site I'd like to visit.

• As a client looking to hire a team of developers

  I want to be able to contact the developers by filling out and submitting a form by providing my name, email and message information

  So that the team have sufficient information to contact me afterwards

• As a client looking to hire a team of developers

  I want to click on a navigation link and a corresponding section be made visible in the browser window on the same page

  So that I can quickly navigate around the site without having to wait for new pages to be loaded.

• As a client looking to hire a team of developers

  I want to easily view the site when browsing on my mobile, tablet or desktop

  so that I can understand the sites content easily on whatever device I choose to view it in.

• As a visually impaired client...

  I would like to easily read and understand the text on your site

  so I can understand the information available

• As a blind client...

  I would like to easily understand how to navigate the site after my screen reader reads me the content of the site

  so I can understand the information available.

• As a client with JavaScript disabled in their browser for security reasons

  I would like to visit your site and get a similar experience to viewing your site on a modern browser with JavaScript enabled

  so that I don't feel like I'm completely in the stone age.

WHAT

We designed a one-page responsive website, taking a mobile-first approach.

We included three main sections: 'About, Team, and Contact' with links to these sections in the navigation bar. When a user navigates our site they can return to the top of the page by clicking our logo on the left corner of the navigation bar.

The site provides information about our team, each member's skills and expertise and links to each member's GitHub pages. Viewers can easily navigate through the site and contact us using the form at bottom of the page.

HOW (our journey to completion)

The process and workflow we used for the design and build is outlined below. We swapped pairs around between day 1 and 2, and alternated coding and using Git.

1. Planning & Design

   • As a team, we sketched out on paper our page layout and a simple wireframe.
   • We planned our work schedule, deciding how to block out our time, and when to check in.
   • We planned our workflow, deciding how to divide up the site elements into easily managable features for team pairs to work on.

2. Initial Build & Repo set up

   • We set up our Github repo while another pair initialised a boilerplate HTML index file with basic semantic sections, as well as blank JS script and CSS style sheet.

3. Build out of elements and features

   We divided up work as follow:

   DAY 1

   PAIR 1

   1. Blocked out HTML with initial placeholder tag structure and content
   2. Built out Contact Form.
   3. Responsive Design.

   PAIR 2

   1. Designed & built responsive Nav Bar.
   2. Created landing page.
   3. Started CSS styling.

   DAY 2

   PAIR 1

   1. Updated HTML to meet Web Content Accessibility Guidelines (WCAG).
   2. Added alert modal to Contact form submission to improve UX (also meeting WCAG) using Javascript
   3. Added Skip Link functionality to page.
   4. Added team portfolio content.
   5. Bug Fixing

   PAIR 2

   1. Fixed nav bar
   2. Added home button logo to nav bar
   3. Added images to team section and made section responsive
   4. Added footer
   5. Styled form
   6. Styled headings
   7. Bug fixing
   8. Added written content
   9. Added backgrounds for sections