User Form Question about Styling

HTML-CSS
#1

Tell us what’s happening:
Hey y’all, I believe I have completed the user form. However, it looks like a website someone might made in 2002. Can y’all recommend a way to get more familiar with CSS beyond copy and pasting what the example code a had? I’m afraid I just don’t know where to start.

Your code so far
https://codepen.io/IanGoodman/pen/NWNMpve?editors=1100
Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36.

Challenge: Build a Survey Form

Link to the challenge:

#2

Hey @iangoodman! If you want to improve the look of your website,
you have to:

4 Ways To Help You Improve Your Project

  1. Choose a color scheme (max: 3 colors) and please don’t pick weird colors, use appropriate ones that fit the theme, there are a ton of websites that generate them.

  2. Remove default / old styling (border, change background-color, etc) especially on inputs, buttons… and customize them based on your color scheme that you’ve chose.

  3. Use line breaks, to go down a line - because in your html markup, even if you go down a line it won’t work unless if you add a line break -, for example like your radio buttons, labels… instead of being in one line… you get the idea :smiley:.

  4. Use other fonts (serif, sans-serif, slab-serif, etc) and make sure to pair them well, you can embed them from websites like Google fonts and so on, to link them you can use the tag on your tag or use the @import in your CSS style sheet.

Note: On your comment section use the tag instead of an because that doesn’t work and same thing for your button use the tag not the input.

I hope this helped :grinning:!

#3

It’s not complete @iangoodman.

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 12/17 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.

You shouldn’t copy/paste. The sample projects are just that, samples. They show one way the project can be completed. They do not have to be replicated. In each project it says “functionally similar” and “give it your own personal style”.

#4

I’m not sure how to get the br tag working in the way you described and when I look at the example User Form project, I don’t see any br tag so I’m not sure how they incorporated the line breaks. Thank you for your help! Other then that, do you believe I’m doing a good job distinguishing the look of my page?

#5

Don’t use the <br> element to force line breaks or spacing. That’s what CSS is for.
Instead of using <br> elements to have each inline element on a new line, use or set container elements to be block-level elements so they’ll each take up the full width.

#6

Hey Roma,

I can’t see the red button to click on to see which tests are failing as I’m trying to finish the project but I’m unsure of where to start. Can you clarify how I can find the failing tests?

Thank you for all your help,
Ian

#7

In my original post I gave the test script. You need to copy and paste that into the HTML section of your code. When you do, you’ll see a hamburger menu in the top left of your page.

  1. Click the hamburger menu to expand it
  2. chose “survey form” from the drop down
  3. click the “run tests” button
  4. click the red button to see which tests are failing and a description of why
  5. fix the issue(s) one at a time
  6. keep running the tests until they all pass. the button will turn green when all tests pass successfully
#8

Thank you so much, i finally got everything to work and for all tests to pass. I have two final questions for the page:

  1. What is the difference between using a “name” and an “id” for the radio/checkbox values?

  2. What am I doing wrong to have the text formatted in line with the checkboxes and radio circles?

I really appreciate everyone’s help.

#9

Good job @iangoodman. Something to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
      • This </input> is not a valid HTML tag. Remember, input is a self-closing element.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.

FCC recommends you use the Read, Search, Ask method. This is a question that can be answered with a quick Google search. I found this;
name is identifier and is used in http request sent by browser to server as a variable name associated with data contained in the value attribute of element. The id on the other hand is a unique identifier for browser, client side and JavaScript. Hence form needs an id while its elements need a name .

Are you talking about the radio button and checkbox labels? If that’s the case if you’ve ever filled out a form you may have noticed that the label is closely associated with its radio button / checkbox. How do you want to format it? What have you tried?

Side note. It seems that quite a bit of the HTML is identical to the sample. It’s best to start with a blank page and write your own code. You’ll understand more of what you’re doing because you did it.

#10

Roma you are a saint and your advice is helping a lot. What I meant by formatting is having the answers in line with the buttons/boxes.