Survey Form Feedback test

Code Feedback
1

Hi Everyone
Just completed my survey form test. I would appreciate any feedback. CSS code looks horrible to me, but seems to work.

In html I’ve made a container and within that container I had my form. And the form had blocks nested into it so as to group them nicely.

https://codepen.io/ibra-wiz/full/KKpOvJo

2

The page looks good, @ibrahim_aq. It’s responsive and clean.

I want to remind you that you should keep the freeCodeCamp’s test script in your code.

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
3

Thanks for the feedback. I will include the test script now.

4
  • On the inputs and select, if you need to set a height, use ‘em’ instead of ‘px’. That way the text doesn’t get cut off as I increase the text size. I would actually add a height to the textarea (again, in ‘em’) so that there is a little more room to type, especially at larger text sizes.
  • Maybe remove some of the side margins/padding at narrower browser widths so there is more room for content, especially at larger text sizes.

Overall, it looks very nice and behaves well.

5

I think I understand what you’re saying. Excuse my ignorance, but what do you mean by typing at larger text sizes? How could you type in a larger text size?

When you say remove margins/paddings are narrower browser widths, you are referring to the use of @media query , right?

6

To change text size, using FF, go to View->Zoom menu and activate ‘Zoom Text Only’. Holding down Ctrl scroll the middle mouse button to change the text size. There are other ways to do this through browser extensions and such. The point being that the user has control over the text size they need to use to read your page and your page should be able to handle any size.

Yes, I am referring to CSS media queries.

7

Ok - I will get to it. Thanks :smiley:

8

Your form looks good @ibrahim_aq. Something minor;

  • You may have ‘Poppins’ loaded on your machine. I do not so I’m not seeing your form the way you intended. If you want to add one of Google fonts you need to either link it or import it.
    • To link it, click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
      • The link to your font goes in the box labeled ‘Stuff for <head>’
    • If you want to import it, then that goes into CSS.
      On a side note, when you click on the embed link, it defaults to link, you have to click on the import link.

As an aside, when using codepen it only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags).

9

Thank you Roma for the feedback - yes I think I have forgotten to import the the font.
I just edited it now.

10

@ibrahim_aq, one thing a developer does is check/test their work when making changes to ensure that things are correct.
When you imported the font, you should have checked to see if the font on your page changed. If you look, you’ll see it’s still sans-serif, not Poppins. I’ll let you research to see how to add it correctly to CSS. I’ll give you one hint, it doesn’t belong in a CSS declaration.