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 CSS HTML CSS GRID FLEXBOX

@Ala161092

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


Hi Guys,

This was my first attempt using the HTML Form tag. I didn't know how to change the invalid text field to state "Error, please check your email". Is this something that can be done without using JS? If so, if anyone knows how please could you kindly share any tips.

Have a great day all :)

Community feedback

@pikapikamart

Posted

Good work on this one.

Before your query, suggestions.

  1. I see that you added a hover effect in your navbar items, it is fine but we want to make it more great right, right now, when I hover, it pushes it siblings right because you are adding a font-weight to it. Well to get this effect, but smoother, we could make a transition to the transform: scale() styling, so that even when we hover on this, its sibling wont be pushed away because of it.

  2. Button hovering. Right, it is transitioning its background-color right, it transitions to something white, but the thing is that, the foreground text is colored white as well and we don't want that, instead make the text color different, something that will be complemented of the background-color of it, something dark-ish will be great.

Other than that, personal preferences right.

In your query regarding the invalid text. Well you could achieved this using javascript, because if we only rely on css, we can make it work but text will still appear. I won't explain it detail by detail but the idea only. But first is that, you may want to prevent the default action when an element is clicked, so checking event.preventDefault() will be great, search for it. Next we could just add a custom html element that will pop out if the email is invalid right that is one thing. But if you just want to customized the appearing text, well you will have to use some API for that like the constraint validation API. It is easy to use here is a link for form validation from MDN.

If need more help, just drop it here and we are to help, everyone helps everyone in here right^^

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