Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

mobile first site using HTML & CSS

@mnazneen20

Desktop design screenshot for the Fylo dark theme landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View Challenge

Design Comparison

SolutionDesign

Report

14

Accessibility Issues

42

HTML Issues

View Report

Dewan Masuma Nazneen’s questions for the community

I could not use the curvy backgrounds properly...If you have any suggestions please mention them.

Community Feedback

P
Chamu 11,350

@ChamuMutezva

Posted

Greetings. Some issues have been raised in the report , some of them may include the following:

  • alt values must be descriptive for the benefit of assistive tech users to be able to visualize the message that is being put across with the message. Decorative images can have alt="" . The following does not aid assistive tech users <img src="./images/illustration-intro.png" alt="illustration-intro" width="100%" id="img1">
  • you site is missing basic elements like headings. Check on mdn on the importance headings
  • as a follow up to the above point - use semantic elements where possible. Elements such as main should be available in a site as they hold the main content of the site.
  • this image <img src="./images/bg-quotes.png"> does not have an alt value. If it is decorative use alt=""
  • input elements should have an associated label <input type="email" name="mail" class="mailinput" placeholder="[email protected]">
  • separation of concern is also important, let your css reside in their own css files <div style="padding: 10px;"></div>
  • well done on responsive side, i can generally view the site on most devices from small to desktop.

Marked as helpful

1


@mnazneen20

Posted

@ChamuMutezva thank you for your feedback, I will keep your points in mind.

0

Please focus on giving high-quality, helpful feedback and answering any questions mnazneen20 might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!