Please l need your honest feedbacks. first time posting

Code Feedback
1

Tribute form - https://codepen.io/preciouskk/pen/YzzYNVa
Survey form - https://codepen.io/preciouskk/pen/JjjZOGV

2 Likes
2

Your tribute page looks fine.

Your survey form is only passing 4/17 tests for me.

3

Hi @preciouskk, welcome!
I think your projects are a good start, keep it up!:clap::clap:

If you want to improve even more, I recommend making the image of your tribute page responsive.
Improving the responsiveness of the form (considering mobile devices) would also be a good idea.:wink:

Cheers and happy coding!:keyboard::heart:

4

OK thanks will look into that

5

Thanks for your feedback. please what areas do l pay more attention to

6

Thanks will look into the mobile responsiveness. But should it be applied only to the image?

7

06%20PM

8

For your first project, the tribute page is really neat. although it is simple, it has a great design.

For the survey form, I really like your selection of colors although I don’t prefer the border to be such a difference from the form. if you don’t want to remove it, color it a similar shade as that of the form or the background. Now for the <textArea> tag, don’t give it a value of “Enter your comments here…” give it a placeholder of the desired text.
I have three examples. two wrong which are possibly what you are doing and one right. as you reveal each one, try to figure out how to do it.

Hints
#1

Wrong: <textArea>Enter your comments here</textArea>

#2

Wrong: <textArea value = "Enter your comments here"></textArea>

#3

Right: <textArea placeholder = "Enter your comments here"></textArea>

1 Like
9

OK thanks for the feedback, well noted

1 Like
10

Have you checked the tests on the test suite? Click Run Tests, then click the red Tests button. See what the failed tests are and try to fix them. If you need help, feel free to ask. :slight_smile:

11

Please l need help with my survey form, cant seem to pass the test suite. Having issues with d ff:

12. Inside the form element, I can select an option from a dropdown that has corresponding id=“dropdown”.’

The select field with id=“dropdown” is not inside the form element : expected 0 to be above 0 AssertionError: The select field with id=“dropdown” is not inside the form element :

13. Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the name attribute. Each radio button must have a value attribute.

14. Inside the form element, I can select several fields from a series of checkboxes, each of which must have a value attribute.

i have tried fixing the errors but it seems not to be working.

Please l need help.

12

Your nested divs are messed up.

    <div class="container">
        <div class="box1">
    <!--Form-->
    <Form id="survey-form" action="#" method="get">
        <div>
        <label for="name" id="name-label">Name</label>
        <input name="name" type="text" id="name" placeholder="Enter your name" required>
        </div>

        <div>
            <label for="email" id="email-label">Email</label>
            <input name="email" type="email" id="email" placeholder="Enter your email" required>
        </div>

        <div>
            <label for="age" id="number-label">Age</label>
            <input name="Age" type="number" id="number" placeholder="Enter your Age" min="15" max="55" required>
        </div>
        </div>

The div with class “box1” opens before the <form> but closes before the form closes. (on the last line that I pasted.) If you get rid of the open and close tags for the “box1” div it will solve some of the errors. If you want to keep that div you either have to put it all inside the <form> tags or all around them. Make sense?

Also, <Form> should be lowercase. I don’t know if uppercase causes a problem, but it’s the convention to be lowercase.

13

ok thanks will correct that now

14

Ok let me know if you have a problem.

Also, id attributes should be unique. Both of your dropdown menus have an id of “dropdown”. Only one should have that. (You only need one to pass the test. You can give a different id to the second <select> if you like.) If you want to select both for CSS styling you can use class="dropdown" because the same class can be applied to more than one element.

15

In addition to what @stressstressstress has indicated, to solve the error with test 13 you must add the value attribute to each radio input.:wink:

16

A very useful tool to detect errors in the HTML code is the Markup Validation Service (MVS).

If you want to check your own pen code, from Codepen you go to the “debug mode” view, copy the url of your pen and paste it in the “Validate by URI” section of MVS.

Another option is to copy the HTML code and paste it into the “Validate by direct input” section of MVS.

It has been very useful for me, I recommend it!:ok_hand:

17

ok thanks really appreciate

1 Like
18

thank you it was helpful

19

thanks very much, please help review the survey form now.

1 Like
20

Great job on fixing all the errors! :slight_smile:
It looks good.

Here’s something small I would fix:

image
image1081Ă—129 7.61 KB

Make the “yes” radio button appear on top of the other buttons so they’re all in one list.

Here’s one way to do that: Wrap the three radio buttons in a div.