Skip to content
Submitted over 3 years ago

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

DIICA99•115
@DIICA99
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro component with sign-up form
  • HTML
  • CSS
  • JS
1newbie

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

  • Walter Sono•660
    @waltersonoPosted over 3 years ago

    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
    @DIICA99Posted over 3 years ago

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

    0
    DIICA99•115
    @DIICA99Posted over 3 years ago

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

    0
  • Ahmed Faisal•5,095
    @afrusselPosted over 3 years ago

    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
    @DIICA99Posted over 3 years ago

    @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

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