Skip to content
Submitted almost 4 years ago

Intro component with full validation signup form (HTML, SCSS, BEM, JS)

DIICA99•115
@DIICA99
A solution to the Intro component with sign-up form challenge
Preview (opens in new tab)Code (opens in new tab)

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?

Code

Please log in to post a comment

Log in

Community feedback

  • Walter Sono•660
    @waltersono

    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
  • Ahmed Faisal•5,095
    @afrussel

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

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