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

Fylo landing page with two column layout

Tony 140

@handleryouth

Desktop design screenshot for the Fylo landing page with two column layout coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Open to any advice. Thank You!

Community feedback

P
Chamu 12,970

@ChamuMutezva

Posted

Great work Tony Your work is responsive on most devices - you did well Here are a few suggestions:

  • Make use of semantic elements where possible to assist with accessibility. For example instead of using a div with a class navigation-bar - a navtag can be used instead. Other elements that you can have a look at includes header, main, section etc.
  • still on the same issues , i would look into using anchor tags instead of p tags for the navigation as in a real website that will be the expectation. I would use something like this ``` <ul> li><a href="">Features</a></li> <li><a href="" >Team</a></li> <li><a href="" >Sign in</a></li> </ul>

One issue with an empty href=""is that it reloads the page , you can override that by editing the above to something like this <li><href="" onclick="return false">Features</a></li>

  • Only one h1 tag on a site is considered best practice - remember you can adjust font size using css .
  • the input tag is associated with a form and must have a label - i would suggest to change the parent div into a form tag.

You can also take time to look at my solution and give feedback as well. We can support each other in that way link to project

Happy coding

0

Tony 140

@handleryouth

Posted

@ChamuMutezva hi there, thank you for your advice!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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