# \[Project Feedback\] Survey Form for Front end Certification

**URL:** <https://forum.freecodecamp.org/t/project-feedback-survey-form-for-front-end-certification/383646>\
**Category:** I Built This\
**Created:** [May 4, 2020, 4:42pm UTC](https://forum.freecodecamp.org/t/project-feedback-survey-form-for-front-end-certification/383646 "2020-05-04T16:42:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![anicsekaran](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/anicsekaran/32/146843_2.png) [@anicsekaran](https://forum.freecodecamp.org/u/anicsekaran)\
**Post date:** [May 4, 2020, 4:42pm UTC](https://forum.freecodecamp.org/t/project-feedback-survey-form-for-front-end-certification/383646/1 "2020-05-04T16:42:31Z")

</div>

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 🙂  
Link: [https://codepen.io/sambarvadai/pen/yLNxWaR](https://codepen.io/sambarvadai/pen/yLNxWaR)

Thank you so much.

---

<div class="post-metadata">

**Author:** ![lerida](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lerida/32/192879_2.png) [@lerida](https://forum.freecodecamp.org/u/lerida)\
**Post date:** [May 4, 2020, 4:47pm UTC](https://forum.freecodecamp.org/t/project-feedback-survey-form-for-front-end-certification/383646/2 "2020-05-04T16:47:58Z")

</div>

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:

```auto
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](https://global.discourse-cdn.com/freecodecamp/original/3X/0/8/08b658e27a1a45cd22ce090f69995181c430979f.png)

Hope this is helpful 🙂

---

<div class="post-metadata">

**Author:** ![anicsekaran](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/anicsekaran/32/146843_2.png) [@anicsekaran](https://forum.freecodecamp.org/u/anicsekaran)\
**Post date:** [May 4, 2020, 5:04pm UTC](https://forum.freecodecamp.org/t/project-feedback-survey-form-for-front-end-certification/383646/3 "2020-05-04T17:04:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [May 5, 2020, 4:31pm UTC](https://forum.freecodecamp.org/t/project-feedback-survey-form-for-front-end-certification/383646/4 "2020-05-05T16:31:28Z")

</div>

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](https://validator.w3.org/#validate_by_input).
  - 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.

---

<div class="post-metadata">

**Author:** ![anicsekaran](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/anicsekaran/32/146843_2.png) [@anicsekaran](https://forum.freecodecamp.org/u/anicsekaran)\
**Post date:** [May 6, 2020, 3:46am UTC](https://forum.freecodecamp.org/t/project-feedback-survey-form-for-front-end-certification/383646/5 "2020-05-06T03:46:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 1:19pm UTC](https://forum.freecodecamp.org/t/project-feedback-survey-form-for-front-end-certification/383646/6 "2021-06-01T13:19:31Z")

</div>