I’ve have been working on the Survey Form certification project and was wondering if anyone has any feedback thanks. and yes I know I’m using the
tags in HTML but I couldn’t figure out how to do it in CSS.
Your form looks okay @mmcgillvrey3756. Some things to revisit;
- Run your HTML code through the W3C validator.
- There are HTML coding errors you should be aware of and address.
- Among other things you have a non-valid tag
- Since copy/paste from codepen you can ignore the first warning and first two errors.
- There are HTML coding errors you should be aware of and address.
- User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox.
- Do not use the
<br>
element to force line breaks or spacing. That’s what CSS is for. - Change the cursor to a pointer when hovering over the submit button
Hi @mmcgillvrey3756!
Looking at your page I have some comments:
-
I think it would be better if the title and the sub-title were on the same box, and this box and the main box could be with the same width;
-
About Hours? and What coding language’s do you know, I should always click on the text to select the items.
HTML for Attribute -
I think the text area could fit all the main box width, would be better in my opinion.
-
And this should never happen:
I should always see the edges of your boxes.
Now let’s take a look at your code…
- This part of your code can be in other place:
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
If you want to know more about how CodePen template works:
The Pen Preview Document
-
The
id="description"
should be an<hx>
instead of a<p>
.
The<hx>
is used when you want to emphasize some text, and<p>
for a regular texts. -
And never use a
</br>
to create spaces between HTML elements, that’s why the CSS exists.
I would have done something like this:
<div id="some-id">
<h1 id="title"></h1>
<h4 id="description"></h4>
</div>
And about it, I didn’t understood your problem, you can use classes to give HTML elements attributes, like:
<p id="my-p-id" class="my-p-class">
.my-p-class { line-height: 1.5; }