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

Intro component with sign-up - HTML, SCSS, Grid, JS & mobile-first!

#bem#sass/scss
darryncodes 6,430

@darryncodes

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi everyone 👋

This turned out to be a fun one.

Another great opportunity to practice JavaScript and client-side form validation. I learnt some big lessons from the base apparel challenge and it's really motivating to see small progressions on each challenge.

Any thoughts welcome!

Happy coding 🤙

Community feedback

hardy 3,660

@hardy333

Posted

Hey, nice job everything looks good.

I have few suggestions for you.

  • If you look at design files all your content (text and form) needs to be centered vertically, it will be nice if you fix it.
  • Text content(heading and paragraph) also need to be centered vertically relative to form...
  • Heading needs to be bigger
  • Paragraph line height is little bit bigger then on design files and it is not looking that good, and also paragraph has very low opacity try to increase it, or to make it more white...

For validation and javascript(there are a lot of bugs ):

  • Custom email validation doesn't work on first try when only email is not correct
  • After invalid inputs when I write valid inputs it steel shows invalid visual red outlines on for fields
  • I suggest to write all the validation part again ...

Good luck.

4

darryncodes 6,430

@darryncodes

Posted

Hi @hardy333 thanks, and thanks for taking the time to provide feedback.

In response to your feedback:

  • The content (text and form) is not quite centered vertically because of the attribution footer - i'm okay with it
  • Text content (heading and paragraph) is not centered vertically, i needed to remove some margin - thanks for that, updated
  • Heading increased on desktop - thanks, updated
  • Good point about the opacity and line-height, i've updated the design

I can't seem to re-create the customer email validation error you mentioned.

Regarding re-writing the validation part again do you have any specific feedback or fixes I could try? This would be a massive help as I'm a newbie with anything JS related.

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