Help i got 16/17 on my Build Survey form Challenge what did i do wrong help!

HTML-CSS
1

My Build Survey Form

2

Simple typo :slight_smile: Looks like you misspelled “Required” for your HTML Validation for the name

3

@Karma Please note, you can find these errors by clicking on the red button when a test fails. Be sure and read more than just the first line of the failing message.

You should revisit your form, there are too many things that were copied from the sample project (html & css) to be original.
Make the project from scratch, with your own code, style and content. Don’t take code from the sample project.

  • The projects aren’t just another challenge. Each one is meant to be a significant step in your progress. Every project you do will require research, planning, trial and error, and strengthening your skills beyond what you gain from the incremental challenges.
1 Like
4

thanks a lot i will re do it now

5

thanks so much, bro I really appreciate

6

please bro i just re-do it as u suggested can u re-check it for me again. thanks

my new pen

7

You’re still using .form-group. I know that’s not original and you never use it.

Some other things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Mentioning because you have elements out of order. Everything the browser renders belongs in the body element. Review this for an understanding of the HTML boilerplate tags.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s). Be careful of duplicating selectors.
    • (The one for HTML misses things which is why I recommend W3C)
  • This, </br> is not a valid HTML element. And along with that, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

Screen Shot 2021-01-04 at 20.36.15
Screen Shot 2021-01-04 at 20.36.15499×611 20.3 KB

8

wow! thanks so much bro i really appreciate all your efforts in giving me the right corrections i have really learnt a lot from u here already, u have opened my eye to a whole lot of stuff that i don’t know before because am new in all this and believes i can always be better and u are helping me get better, just started all this from scratch on the 14th December and am never giving up, is like i will be disturbing you with my challenges bro please don’t be offended anytime i send my challenges to u to verify them before i submit, please

My corrected Pen

9

You’re not disturbing me but it looks like not much was done.
Previously I said;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for ’ box.
    • Mentioning because you have elements out of order. Everything the browser renders belongs in the body element. Review this for an understanding of the HTML boilerplate tags.
    • This is still ongoing in your pen. You’ve mixed up the head and header elements. Please read the link about the boilerplate elements.

Also said,

  • Make your page responsive.
    There’s been no improvement on the way the page displays on smaller screens.
    Some things to help, start with the narrow view (mobile) design first and then work your way wider, adding breakpoints where needed for the wider design.
    In your body declaration you’ve given side margins that total 600px. It’s better to use relative units like percentages, rem or em units for widths rather than hardcoding pixels.
    To help see how you’ve got elements defined, add the following at the first line in your CSS. It should help you with responsiveness;
* {
  border: solid 1px red;
}
10

thanks a lot for all your help and corrections i really appreciate them, please re-check them again i have done some corrections. God bless u bro

my pen

11

  1. You forgot to close the opening form tag (missing >).

  2. You forgot the closing div tag for the .name div element.

12

thanks so much, i really appreciate this

13

That looks a lot better @Karma. A couple of things,

  • the addition of the border in the universal reset was meant to be temporary so you could see what your elements look like
  • on smaller screens, the default text in the dropdowns cannot be seen
14

corrected now bro. thanks so much, i really appreciate all your time my pen

15

All tests pass and your page is responsive.
Look forward to seeing your next project.

16

My mentor please help me am seriously stocked here on styling, please give me clues on what to do and how to go about it , the header styling and logo styling is seriously messing me up for days now on this my product landing page

my product landing page

17

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.