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

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! 💻👾

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

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 :)