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 dark theme landing page | Responsive | Plain Html & Sass

Arif Khanβ€’ 285

@arif-khan-dh

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

Solution retrospective


Any suggestion or feedback will be appreciated. Thanks.

Community feedback

P
Daveβ€’ 5,245

@dwhenson

Posted

Hey @arif-khan-dh nice job on this one πŸ™Œ the site looks great and responds nicely at smaller viewports too! πŸ‘

Here's some small points you might like to consider:

  1. It took me a while to work out how you got the error message working without JavaScript - good job there! But I wonder whether you might be better of using a form to wrap your input rather than a div? This would enable you to take advantage of the inbuilt browser validation if you don't want to use JS.

  2. This would also require you to change your div.btn to an actual button which would also be a good thing. Lastly, in this same area, don't forget that every input should have a label, here's why: https://css-tricks.com/html-inputs-and-labels-a-love-story/ if you want to hide the label visually you can always apply a special class for this.

  3. Lastly, in general, I would suggest using semantic HTML tags when possible. For example, you could have used both header and footer and an additional nav in the footer in this page rather than divs throughout the document. This will make the overall page more semantic and will help with all your challenges.

Otherwise, just so say great job again! πŸ‘ Hope you find some of these ideas helpful. Cheers πŸ‘‹

2

Arif Khanβ€’ 285

@arif-khan-dh

Posted

Thanks @dwhenson for taking the time and efforts in replying to the solution. I really appreciate it.

  1. Using inbuilt browser validation is better idea than writing JS code (in simple case like this)
  2. The article was an interesting read. Thanks for sharing it. The author dove deep in explaining why an input almost always should be paired with a label.
  3. I wasn't so sure about the benefits of using html semantics before. I'm still trying to grasp it.

I'll definitely follow your suggestion in the next challenge. Thanks again. Please keep giving feedback and Happy Coding !

0
P
Daveβ€’ 5,245

@dwhenson

Posted

@arif-khan-dh happy to help. Here’s an article about why semantic html is helping: https://www.brucelawson.co.uk/2018/the-practical-value-of-semantic-html/

It says it’s for JS developers but applies to everyone. He also starts off talking about buttons and labels, but then goes on to why the other tags are useful too.

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