The week1-baja from fac-11

Stretch - makes issues for ideal features

-> Toggle between content on 'About' section
-> callable number from mobile devices
-> working form for desktop and mobile
-> burger menu without JS for mobile

About us box styling

The edge of the box comes out past the end of the tabs.

More padding around the text, and spaces between paragraphs would make it easier to read.

Also, a slightly smaller font might be helpful, especially on narrower viewports.

You might also want to consider editing down your text to streamline it.

when mobile nav link is clicked, dropdown navbar should disappear

Write ReadMe

Explain:

user stories
learning
technologies
methods etc

Input elements don't need closing tag

https://github.com/FAC-11/week1-BAJA/blob/master/index.html#L106

Be able to visit site and immediately see a headline about the team

Include description of what we have to offer

Navbar contrast ratio

Text should have a contrast ratio of at least 4.5

https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_color_01

In developer tools, under the 'elements' tab if you look at accessibility properties while the element is selected, it will recommend a similar colour which provides high enough contrast and let you easily try out the recommendation in chrome.

This only comes up as an issue when javascript is enabled! Can't see why :(

What/Why/How not very in depth

👋 Hey pals.
Generally it's nice if your why/what/how is a little bit more specific. I know for this project you were given very specific user stories so it's harder to have something unique, but your why could be something like:

We have built a portfolio website to showcase ourselves and our skills to potential clients!

Your current one of

To build a web development team website

isn't really a why it more just describes what you've done.

I know it seems a minor thing but good documentation and stuff on your README.md is really helpful, especially in guiding your presentations.

Make responsive website

Be able to easily view the site when browsing on my mobile, tablet or desktop.
understand the sites content easily on whatever device is used.

Form Validation

reference https://github.com/FAC-11/week1-BAJA/blob/master/index.html#L105-L108

you may want to add required in your and <textarea> elements to ensure a form cannot be submitted without validation.

Styling on things other than classes

Generally it is considered good practice to only style on classes, a few times in your CSS you style on ids and html tags.
Check out this article for a good guide to CSS code quality.

stacking styling at 2x2 (around 720px)

when the team is loaded as 2x2, the top of Aisha's profile doesn't line up with Bart - I think it's because of her longer text - to fix, it might be about sizing the height of the team-container class rather than the padding (which might need some extra work to deal with text-overflow

readme user story clarification

Some of the users e.g. 'as a visually-impaired client' are squashed into the previous user stories. This could be clarified, perhaps with bullet-points.

Accessibility - The purpose of each link should be clear from the link text (4)

Providing a descriptive text label lets a user distinguish the link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. In some assistive technologies the aria-label value will show in the list of links instead of the actual link text.
Resources: https://www.w3.org/WAI/GL/wiki/Using_aria-label_for_link_purpose

navbar links wrap on small screen w/ no JS

when js is disabled on iPhone 5 the navbar links wrap to a new line, generally would be better if they could all be on one line

A media query to adjust the horizontal padding on the links should deal with this.

add footer

lighten/add transparency to background image?

The black lines of the background and the dark grey interfere with the black text when scrolling, harming visibility.

Add content to about section

Untitled articles

refers to https://github.com/FAC-11/week1-BAJA/blob/master/index.html#L42-L59

When running the Outline extention, the 'who we are', 'technologies', and 'mission' buttons seem to be untitled articles . Maybe use tags if possible?

about section id placement

Is the id in the correct place? Should it be in section element?

<section class="pageHeight">
  <h3> About Us </h3>
  <div id="about">

form submit not working

form submit goes to page showing error:
"Unable to submit form

Make sure you open this page through a web server, Formspree will not work in pages browsed as HTML files. Also make sure that you're posting to https://formspree.io/[email protected].

For geeks: could not find the "Referrer" header."

have a heading with 1 liner

visit our page and see a navigation link with 'About, Team, and Contact'

Should be able to quickly navigate to the areas of the site

Accessibility - Blind client

A blind client should be able to easily understand how to navigate the site after screen readers read the content of the site

Work without JS enabled

for clients with JavaScript disabled in their browser, for security reasons, should be able to visit the site and get a similar experience to viewing to a modern browser with JavaScript enabled

Code indentation

Indentation of html, css and javascript files are inconsistent

HTML outline - untitled articles

Articles in 'about us' section have no titles

Tabs disappear on small screens

Tabs in 'about us' disappear on small screens (< about 350px)

Badger logo styling

On relatively wide viewports, this gets squashed up into the form.

hover colour obscuring burger button

On mobile, when navbar is clicked open, hovering on links makes a grey overlay appear. This grey overlay partially obscures the burger button and looks ugly! Ugliness needs to be fixed with a nice design solution.

sizing issue on team section - middle size

-> not centered
-> some boxes larger

Open issues which are solved

I'm mostly referring to #44 in this one, but if you solve an issue then remember to close it!
You can do so by putting fix #<your-issue-number-here> in your pull request, when that PR is merged into master it will automatically close the linked issue.
Removes having to manually click through to close issues which is dead nice 👍

Navbar should be sticky on desktop

Have section for 'About Us'

Have navigation bar

Be able to click on a navigation link and a corresponding section be made visible in the browser window on the same page
Allow users to quickly navigate around the site without having to wait for new pages to be loaded.

Different nav bar for mobile and desktop

Have section for 'contact us'

re-align 'about' section and reduce background size

Have section for 'Team'

Use logos for mobile tabs in about sections

improve UX and save space on screen

Allow prospective clients to contact us

By filling out and submitting a form by providing my name, email and message information.
We must have sufficient information to contact clients afterward submitting form.