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

Intro component with sign-up form

@sauravchamoli17

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


I have used CSS grid for this design.Check out my code and tell me how I can improve my front end coding skills.

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Hey Saurav, just a quick heads up that the live preview link is currently broken for this solution.

Your code looks good. The main suggestions I'd have would be:

  • Try resolving the accessibility issues in the form. Input needs corresponding labels to outline what information the user is supposed to provide. You can also use the aria-label attribute on the input elements as an alternative approach.
  • You've uppercased the text in your HTML for the "CLAIM YOUR FREE TRIAL" button. I'd recommend avoiding that, as some screen readers will read those words out letter-by-letter. Instead, you could write it normally in your HTML like this "Claim your free trial". Then you could use text-transform: uppercase; in your CSS to uppercase it, but not change the way screen readers read the text.

I hope that helps. Keep up the great work!

1

@sauravchamoli17

Posted

@mattstuddert How can I update the live preview link of this solution as I have renamed the github repository for this solution so that's why the live preview link is broken.Also I have updated the text transform in the button and aria-labe attribute in the input fields.

Updated Live Site:https://sauravchamoli17.github.io/Intro-component-with-sign-up-form--FrontendMentor-Challenge/

Updated Github Repository:https://github.com/sauravchamoli17/Intro-component-with-sign-up-form--FrontendMentor-Challenge

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@sauravchamoli17 ah OK. No worries. You can update your solution by clicking on the 3 white vertical dots that you'll see at the top right of this page. From there you can select "Edit Solution" and make the changes. It will then work as expected.

0

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