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

HTML & CSS

Wayne Fox• 90

@waynefox

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


All comments are welcome

Community feedback

Simeon Udoh• 535

@simeon4real

Posted

Hey Wayne, I just previewed your solution and It's on point. However, I have a couple of recommendations.

  1. Reduce the font size on smaller screen sizes. You can accomplish this using Media Queries.

  2. Don't use IDs for styling your websites. Javascript uses ID and you can't apply an ID more than once. Instead, I suggest you make use of classes. Instead of

#submit { 
	styles here
} 

You can use

.submit {
	styles here
}
  1. Embrace Cleaner Codes. Learn how to use the BEM methodology and learn about HTML5 Semantic markups.

  2. To fix those accessibility issues, you should wrap each of your input with a <label></label> element.

Then you can add **aria-label="description of input" ** to your inputs.

You can upvote my feedback if you found my recommendations useful.

1

@rafaelmaiach

Posted

Hey Wayne, congratulations on your solution! Clean and well done.

About some feedback:

  • The report identified some accessibility problems. You could check and fix them as accessibility on the web is growing every day.

Comparing the solution with the challenge, it seems some font-sizes and elements spacing (padding / margin) are different.

  • On the left text, you could put it more to the right and increase the title font size.
  • The purple button seems to be bigger too

Also, your buttons don't have a cursor: pointer set. This makes bad feedback to user when hovering them.

1

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