Design comparison
SolutionDesign
Solution retrospective
Bit of a rush to get it finished within one hour. Definitely some improvements that can be made, but the time limit was the only thing I was interested in with this one.
Community feedback
- @ChamuMutezvaPosted over 3 years ago
While timing is important it should not push you to move away from the basics. Here are some issues that i can highlight:
- having more than one h1 element is considered bad practice even though it does not cause errors. See article on mdn about heading elements.
- the technique you used for displaying images is also not among those recommended when it comes to responsive images. Among those recommended is scrset and the picture element. I am referring to this code in particular
<section class="hero"> <img class="hero__mob" src="./img/hero-mobile.jpg" alt=""> <img class="hero__desktop" src="./img/hero-desktop.jpg" alt=""> </section>
- the form element has a button which is not accessible to assistive technology users . There is no content that can be read by a screen reader. When navigating to a button, descriptive text must be presented to screen reader users to indicate the function of the button.
- a form element is also present that has no label. If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Form labels also provide visible descriptions and larger clickable targets for form controls. You can have a label that is visually hidden to sighted users but available to screen readers.
- the form validation still needs to be sorted as it does not meet the requirements listed when focus is on the form inputs
- the responsiveness of the site is not that pleasing especially on medium devices , check from 640px onwards.
To present a site that is complete may take you longer than expected due to the extra time that you need for research, trial and error and the final implementation.
2
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord