@Victor-Nyagudi
Posted
Great work on this one. It's responsive and follows the design well.
There are a couple of things you can improve. First, you should add an <h2>
or lower heading tag inside your <section>
tags and style them such that they're out of view for viewers with good eyesight.
Screen readers read out these headings to people with poor eyesight telling them what the section is about. Adding them also removes some of the warnings in the HTML validator report.
Here's an example of a heading with a for-screen-reader
class.
h2.for-screen-reader
{
position: absolute;
right: -100000000; // give it a very large number so it's out of view
height: 1px;
width: 1px; // if it somehow ends up on the screen, it's too small to see
overflow: hidden;
}
Secondly, if you're going to use an <article>
tag, it requires an accompanying <h2>
tag or lower, just like the <section>
tag. The reason is also the same.
I like the transitions that you made for some of the elements, but the only way to see them right now is when the screen is being resized.
If this was just something cool you wanted those of us viewing your solution to see, then it's fine, but if this was something going into production, it wouldn't be necessary since the average person doesn't use developer tools to resize the screen, checking its responsiveness.
Other than that, everything else looks good!
All the best with future solutions.