Submitted over 3 years ago

Intro component with sign-up form with TailwindCSS and Vanilla CSS

Sagar Kaurav• 460

@sagarkaurav

Preview site View code

This is a solution for...

Intro component with sign-up form

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Feedback appreciated

Community feedback

Mark Mitchell• 1,820

@markup-mitchell

Posted over 3 years ago

I'm happy to see other tailwind users on here! It looks really close to the design.

Just a couple of things I noticed:

object-fill is not doing anything on your <body> element; it won't act on a div's background-image, only a replaced element like a <img>.

I'm not sure the validaton on the inputs is working as intended - I struggled to get the errors to show!

Sagar Kaurav• 460

@sagarkaurav

Posted over 3 years ago

@markup-mitchell I have removed the object-fill class as you suggested.

The validations are seemed to work fine for me. If you having any problems please share the screenshot so I can resolve the issue.

Abdulla Bashiroglu• 520

@bashiroglu

Posted over 3 years ago

@sagarkaurav, It looks good, two things I noticed, probably "try it free" is not a button just div or p. And it needs more space for form in a horizontal direction. Good luck.

Sagar Kaurav• 460

@sagarkaurav

Posted over 3 years ago

@bashiroglu Made changes as you suggested.

Grace• 27,930

@grace-snow

Posted about 3 years ago

Really nice solution, this one! I like it a lot.

A few small learning points from your html:

Only minor, but with aria labels, write them as you would any label. So instead of aria-label="First Name input" just put first name in there. It is announced as an input already, so screenreaders would hear input, text, first name input with how you have it at the moment.
make sure any text you have on the page is always in a meaningful element. Just a span or div is not enough. This one is a bit more important as paragraphs, lists, and other text elements are all used to make up the document outline for search engines and assistive tech. They don't know what to do with text in a span/div alone.

I hope these tips are helpful. You've been doing great work

Sagar Kaurav• 460

@sagarkaurav

Posted about 3 years ago

@grace-snow I have changed all the arial-label with appropiate text. Now I am using h2 tag for try it free text because I think it is second important thing on page after Learn code by watching others which is using h1. My web knownledge in accessbility and HTML semantics is little weak I am working on it.

Please log in to post a comment

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