Responsive signup form using HTML, SCSS, and JS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Venus! 👋

  I would recommend having a CSS file that is not minified. This way, people can easily see your CSS code. Currently, if people want to give feedback on your CSS code, they need to open the Sass files one by one.

  More suggestions:

  • Still about CSS, use single class selectors for styling whenever possible instead of id. id has high specificity which can lead to a lot of issues on the larger project. It's best to keep the CSS specificity as low and flat as possible.
  • Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).
  • I recommend leaving the alt="" empty for the error icon. I try using Narrator on this page and it turns out that Narrator read the alert as "First Name cannot be empty, error icon, image.".

  Some questions:

  • Why are you using nbsp for the spacing of the "Terms and Services"?
  • Why do you need JavaScript to enable scrolling? (checkContentHeight() function)

  Hope this helps. 🙂

  Marked as helpful

  0

  ---

  

  Venus•1,640

  @VenusYPosted over 2 years ago

  @vanzasetia Noted, I'll change the CSS files to expanded when I get the chance. Thank you for letting me know.

  I'll keep in mind your suggestion about CSS classes from now on. People usually suggest using IDs when the element only shows up once on the page, which is what I've done in my projects, and since these projects are quite small, it turns out to be the majority of the elements. Is this not the right way to use them?

  Thank you for that information about screen readers and uppercase words in HTML, I had no idea that was how it worked.

  I'm using nbsp for "Terms and Services" because I don't want there to be a line break in the middle of the words when the form container becomes smaller at larger font sizes (parts of the form container scale with the font size)/smaller screen sizes. In my opinion, it looks better this way since this line is meant to be a clickable link. Should I not do this?

  I need JavaScript to enable scrolling because when the height of the content is greater than the height of the viewport, some of the content gets cut off due to the height: 100vh; that is initially set on the <main> tag to center the content on the page.

  I decided to use JS instead of media queries for this because the unpredictable height of the content at different font sizes for the desktop version makes it difficult to use a media query that can tackle every possible situation. I didn't want to use multiple media queries as I feel like that would have been a messy alternative. However, I could be wrong about this, so feel free to tell me if there are any ways I can improve this part of the project.

  Thanks again for taking the time to look at my solution so thoroughly, your feedback was highly useful. :)

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @VenusY

  I think it's a good way to use id. But, there are more. So, the better way to use id is to use it when it is needed to target a unique element.

  For example, id can be used for anchoring or event site navigation. So, for sure that you want to make sure that each section has a unique identifier so that when the users click the anchor tag, it will navigate the users to that specific section.

  On the navigation
  <a href="#my-work">See my work</a>
  
  ...after some HTML code
  
  <section id="my-work">
    ...some elements
  </section>
  

  There are other use cases as well for the id like for labeling an input.

  <label for="email">Email Address</label>
  <input type="email" id="email">
  

  But, all of those are in the HTML. So, how about using id in CSS?

  In CSS, id selector (#) is considered an anti-pattern because it has high specificity. It will make the stylesheet getting harder to manipulate. So, that's why classes are the recommended way to select any elements.

  For the nbsp, you got a good point. Also, I tried to use Narrator on the page and it turned out that it pronounced the link well. So, I think it should be fine if you leave it as it is. 😊

  For height: 100vh then I recommend trying to set min-height instead. min-height will allow the element to grow when it is needed. Also, when I did the challenge I made the body element as a flex container to make all the page content in the middle of the page.

  In general, JavaScript should be the last resort. In this case, it is possible to use CSS to make the site responsive. I had done this challenge and I didn't need any JavaScript to make the site responsive. So, I recommend trying to make the site responsive without any JavaScript. 🙂

  Marked as helpful

  0

  

  Venus•1,640

  @VenusYPosted over 2 years ago

  @vanzasetia Thank you for the information! I will keep this in mind for my future projects. I also appreciate the link to the Narrator's wiki page; I'll add this to my toolbelt as well.

  Thank you for the suggestion about how else I can center the content on the page. I'll have a look at your solution for a better understanding. :)

  1