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

My Build Survey Form

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

@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

thanks a lot i will re do it now

thanks so much, bro I really appreciate

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

my new pen

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

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

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;
}

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

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

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

thanks so much, i really appreciate this

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

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

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

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