fac-11/team-atoms

Team Atoms website

team-atoms's Issues

Accessibility: the links in the team section do not have names

So blind people tabbing through using a screen reader don't know what they are

atoms.png file should be in img folder

For consistency perhaps

No project details in the readme

It's really important to have information about the project in the readme.md

It gives people interested in the project an overview - usually at a minimum including:

• A description of the project / purpose
• A link to the site if it is live.
• Installation instructions - I'm sure git clone will get me there but instructions on how to install/open it would be nice.

Accessibility Issue # 3

Your Banner and Navbars text needs to have a more reasonable contrast ratio.

team id not used

Classic 3:1 issue on flex resize

The flex wrap is not optimal on the section about, leading to 3:1 issue at certain page widths.

One solution is to wrap the flex items into two divs (two item each divs) and then amend the media queries accordingly.

More info in the readme

Your repo should contain a README file with these three points -

WHY (describing the purpose)
WHAT (describing your site)
HOW (describing the journey to completion)

So that we can better understand how your process worked.

Add -s to title

Atoms

Navbar links not working

navbar links are not going to correct part of the page

Navbar covers part of page sections

When clicking on the anchor link which takes you to the different sections of your page, it covers a big part of the section including the section heading. This can also possible be related to the elements are obscured warning in the audit.

Navigation Bar overlap

When you tap on different sections (as oppose to just scrolling down) the navbar over laps with the section.
Suggestion: manipulating the margins on respective sections to account for the width of the bar.

Style the contact form

Accessibility Issue #2

You need to add titles to your Github/LinkedIn/Codewars links.

broken tabs

tabbed browsing not working properly

Navbar

Move navbar to the top of the page (there is some spacing above the navbar)

Business idea image not compressed

business-idea.png is larger file than the banner image (534kb vs 249kb). When designing for mobile it's super important to keep file sizes low.

Commits should be both informative and linked to an issue

Every commit should follow the template defined here.

To illustrate here are two example commits from your project:

Nice example:

Create navbar and heading …
relates #2

Less nice example:

Added heading

create about section

description of what Atom - our company- does

Heading and Navbar

Creation of Heading and Navbar

form.html file is unecessary

Looks like it can be deleted.

Accessibility Issue #1

Your atoms.png needs some alt text.

Tabindex used incorrectly

Most of FAC10 did the exact same thing in week 1 so it's definitely an issue with the teaching materials, not you guys.

Oli's great description of why this is an issue:
FAC-11/JAAM#39

Alignment on the contact section could be improved

This is VERY nitpicky but previous sections seem to be centred and the contact form alignment looks slightly off.

Header appearing off the page

In mobile view, "ATOMS" does not centre and appears off the page

Centre the about section elements

The section is not centred properly when in mobile viewport

Take a look at the #about-container, the parent of the .about-content child elements