Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 4 years ago

Intro component with sign up form using HTML, CSS and JS

Anjali M•50
@aj-menon
A solution to the Intro component with sign-up form challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Any feedback is welcome.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Ana Luz Cervantes•1,705
    @analuzcervantes
    Posted over 4 years ago

    Hi! 🖖

    Your desktop version looks good

    To make your site responsive, I'll leave you here an article that I hope will help you

    Be well, keep coding! 💻👾

  • Grace•32,130
    @grace-snow
    Posted over 4 years ago

    Hi, You definitely don’t want to use margin as a method to center things. instead, a little padding on the wrapper div (like 1rem or something) and use css grid or flexbox to center.

    Take another pass at this and see if you can make it work at small screens

    At the moment, you’re not using grid correctly. Grid is for 2 dimensional layouts, so should have multiple direct children, but even if it is only used for two columns the grid should define the sizes of the content within it (elements within it shouldn’t have widths etc). If you only want two columns, like you’ve got now, you should be using flexbox for that.

    My main recommendations are to

    • use semantic html (h1 should be the only heading on this page)
    • really important: remove your label elements wrapping the inputs (use div instead) and use aria-label on the inputs instead. At the moment, your labels are empty so this is inaccessible
    • make line-height match design
    • remove widths/heights from pretty much everything
    • swap grid for flex
    • make each form wrapper position relative, then position the error icon absolutely from the right. No margin, no float.
    • remove all margins. Just use margin for vertical spacing between elements
    • remove most pixel values
    • move the error message elements inside each input wrapper. Let your js just toggle a class on that wrapper if the input is invalid

    There is lots more to improve the js and accessibility on this tbh, but that’s probably enough for now.

    I would focus most on your layout techniques, the html and css. It may even be better if you pause this challenge for now and go do some of the other beginner ones first, then return to this and refactor afterwards.

    I hope this helps

  • Karim•590
    @yasssuz
    Posted over 4 years ago

    hey Anjali!

    You're changing all the css through js, that's not the best option when you need to change a lot of things. What you could do for example is to add a class to the element and then select the element with the class added on your css.

    happy coding :)

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Frontend Mentor for Teams

Frontend Mentor for Teams helps companies and schools onboard and train developers through project-based learning. Our industry-standard projects give developers hands-on experience tackling real coding problems, helping them master their craft.

If you work in a company or are a student in a coding school, feel free to share Frontend Mentor for Teams with your manager or instructor, as they may use it to help with your coding education.

Learn more

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub