[Project Feedback] Survey Form for Front end Certification

I Built This
1

Hello guys,

Here is a very minimal looking survey form that I’ve created as a part of the projects under the Frontend certification.
Kindly have a look at it and provide me your valubale feedback, and any tips that you guys have which can make me improve myself :slight_smile:
Link: https://codepen.io/sambarvadai/pen/yLNxWaR

Thank you so much.

2

Hi @anicsekaran,

It looks great! I suggest replacing display: block; to display: flex; in the label, and then removing the text-indent:-15px;.

So it goes like this:

label {
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 10%;
  display:flex;
  padding-top: 0.5em;
}

This way, it will get each checkbox right next to its label:

image

Hope this is helpful :slight_smile:

1 Like
3

Hello.
Thank you so much for taking out the time to reply.
I am still not well versed with flexbox and grid, so I refrained from using it.
This alignment code I took from Stack Overflow. But yes, like you highlighted, I’ll definitely try to incorporate flexbox once I get comfortable using it.

4

Welcome back @anicsekaran. Your form looks good. Some things to revisit;

  • When using codepen it only expects the code you’d put within the <body> </body> element in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are coding errors you need to address. Remember, an id must be unique within the document.
  • Side note, you should follow the recommended rules for embedding the font family. In this case it recommends font-family: 'Raleway', sans-serif;. Note case and default font. Since you don’t specify a default, if Raleway does not load users will see your page with a serif font.
1 Like
5

Thank you so much for the recommendations. Ill surely revisit the form and make the required changes :slight_smile: