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 full validation signup form (HTML, SCSS, BEM, JS)

DIICA99 115

@DIICA99

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


Hello everyone!

I've just completed my second challenge and I'll like to have some feedback. Please, it really helps me to improve my skills and knowledge.

1 - Does the site looks good? 2 - After taking a look at the source code, what do I have to improve? 3 - Average from 0 to 10. 4 - Do I have any chance to be a wonderful frontend dev?

Community feedback

@waltersono

Posted

Hi there DIICA99

Nice work! The design looks good on almost all screens. You definitely have a chance to be an awesome developer

I am going to give many tips you need for this and your next projects, here we go:

HTML

Use Semantic HTML

  • Using the correct tags to structure your page helps the Web, browsers, search engines, users to understand, categorize, list your website
  • Put the heading section inside a <header> tag

Code for web accessibility

  • Help screenreaders navigate your page easily
  • Remove the empty labels and insert an aria-label attribute inside the <input>
  • Provide an alt text for each image

CSS

Use low specificity

  • Try as much as possible to keep to target your elements with class (.heading) instead of targeting them by structure or tag name (input,section form input)
    • If you target by structure, then you will have to change the CSS every time you change your HTML code
    • If you target by tags, then you will run into problems when you want to apply different styles to the same HTML input

JavaScript

  • Use strict mode to enforce some good practices
  • Call the javascript file on the top inside the <head> with defer attribute, instead of calling it at the bottom for performace

There you go my fellow mentor.

Hope this is helpful to you.

See you next time, feel free to go and checkout my work as well.

Marked as helpful

1

DIICA99 115

@DIICA99

Posted

@waltersono thank you very much for your comment. I'm truly impatient to start working with you 😊🙏🏻

0
DIICA99 115

@DIICA99

Posted

@waltersono I really appreciate you advices. Thank you very much 🙏🏻

0
Ahmed Faisal 5,095

@afrussel

Posted

Overall all good. I would like to request you please take a look of my solution. It will help you to find your issues

1

DIICA99 115

@DIICA99

Posted

@afrussel thank you very much for your comment. I took a look to your solution and thank you for that. 🙏🏻

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