Code Lab Feedback

[ackleyd1]

Hey @chrisvfritz, can you take a look at this? It's hosted here and meets the following project criteria:

• [x] Build a table using a table element, listing statistics for various branches of a national organization. Example stats should all be very impressive business terms, such as "Synergy Coefficient" or "Projected Bitcoin Dynamics". Include at least 3 stats for a very impressive table.
• [x] When the user hovers over each table cell, the background color should slowly transition to a different color.
• [x] When the user hovers over the table, it should transition to be slightly larger with a fancy scale transform.
• [x] When the user hovers over a table row (tr), the row should transition_ to the right slightly with a __translateX transform.
• [x] The client needs a fancy logo, so quickly create one with the Hipster Logo Generator, then include it in your page, above the table. It's very important to the client that a super awesome keyframe animation is applied when a user hovers over the logo. (You can create your own or steal an attention seeker from animate.css).

[chrisvfritz]

Looking very good for the most part! I just see a few issues I want to address (and the first two are likely new information):

img tags should have a non-empty alt attribute

Although the W3C validator fails to correctly detect empty alt attributes, they should have text in them for valid img tags in HTML. The purpose of the alt tag is to have something useful show up on the page if the image doesn't load. It's also very useful for accessibility. If someone who's blind is visiting your page, for example, a screen reader has no way of describing what the image is without an alt tag.

The / in self-closing tags

Self-closing elements (or sometimes called "void elements"), such as <img /> and <br />, do not actually require the / in HTML5. They can instead be written as simply <img> and <br>. Using the /s is not strictly wrong. And by that, I mean it's not invalid HTML5. But I feel compelled to discourge them, simply because many companies' style guides, like GitHub's for example, completely bans them in their code.

Logo animation should happen on hover

I know it sounds like nitpicking, but animations can sometimes work a bit differently on hover, so want to make sure you gain that experience.

Inconsistent indentation

The vast majority of the project looks fantastic, but there is some inconsistent indentation in styles.css. Throughout most of your project, you're using 4-space indentation, but then you use 2-space indentation for the keyframe.

[ackleyd1]

There ya go, fixed suggestions. the keyframes were copied from another source and had that formatting :0 and the img / came from tab completion! cant believe it. why wouldnt they get rid of them.

[chrisvfritz]

Excellent! :shipit: I don't always like what Atom's built-in tab-completions give you. I often define my own instead. :smiley: