I’ve been going at this thing for two hours and I am stumped. I’ve scoured Google, Stack Overflow and this forum.
Below are the errors I’m receiving. Been stuck on these for the past hour. I even tried the original code that is used as the example for the and it didn’t work. This is driving me nuts! Any help is appreciated. thank you!
So your label for the name you’ve given the id “firstname”. That is not what it’s asking for. Your email label has no id at all. And your age label, which you are using as the number, has the id “number label”, rather than “number-label”.
And honestly, I was stumped as to the checkbox error. Stumped, I tell you. So I copied your HTML, went to my editor (I use codeanywhere and its built-in IDE), and checked out your html in an editor I could work with.
It was a mess. Once I’d changed the labels I mention above, and moved the style tag to the head (and created a head el before the body el), it still gave me errors. So I removed all the divs in your form, and tried again, passes fine. Somewhere, I think you may have a nesting problem. That seems to be what is glitching the test suite.
Personally, I think the use of divs in this case is redundant – they are a block-level element and you use them to wrap other block-level elements. Its a box in a box. Instead, apply the same styles to your ULs and/or your labels.
I know it’s a total mess - slightly embarrassing. I was so close and just didn’t want to risk touching anything else. Considering the mess it is, major kudos for you for taking the time to review it. Seriously, thank you! I will changed the mentioned labels and get rid of the divs…decided to go for it before responding and holy cow - IT WORKED!!! THANK YOU!!!
Yeah. You’ve got some issues with nested elements. You have two form elements one nested in the other. The opening form tags are nested in one div at the top of the page and the closing are nested in another at the bottom. That CSS mixed in with your HTML is kind of cluttering that window too - probably move that to the CSS window where it belongs.
You might do best to start with a blank page with one form adding 1 required question (input and label) at a time then testing it to see if that requirement passes. Don’t move on until you have fixed any errors related to that input / label combination. Take your time and you’ll end up with one very plain (ugly) page that passes all the tests.
Once you get that working start styling with css and bringing in images, testing with every change to see if your change broke something.
Thank you for the suggestion. Will definitely take that approach moving forward. It’s about hitting the marks right now not making something pretty. 
well, ish. See, here’s my issue with that approach. Are you simply trying to get the certifications, or are you thinking longer-term?
I see this often in the JS track, and it gets annoying. Yay, I’ve blown through all the challenges, got six certifications in as many days!! Yay! Sure, and you’ve built a prototype, and you’ve wired it up to answer the tests, and it passed. Great. And it isn’t necessarily PRETTY, but it passed.
But the problem is, if you are doing this with the end-game of becoming a designer/developer/programmer, you need to think about this longer-term. That particular page, as you had it – would YOU hire a developer with something like that in their portfolio? I’ve seen some REALLY ugly spaghetti code, things nested partially, unclosed block tags, scripts spilling over… Having been on that side of the table, I’ll tell you: I won’t waste my time.
If you are going for all the certs because you hate your day job and want to be a developer by the weekend, I wish you luck. You’ve got a LONG uphill battle. If you are trying to build a solid foundation as a developer and a firm reputation for quality, slow down. Take the time to break things down to small steps, simplify as much as possible, and write code of which you can be proud.
It’s the difference between Ikea furniture and a custom-built cabinet – do you want to be another Ikea man, or do you want to be known as a fine crafter in your own right?
Agreed, don’t abandon your vision - you had a cool-looking page in mind and end up with a cool page you shall.
Get the under the hood mechanics working first though. Get control of that div nesting, multiple forms, etc. Take your time to understand when things don’t work as expected. As you get one test satisfied move on to the next.
Once you get a minimal working form treat it like a blank canvas. Then pimp it out - end with something you would want to show your friends, future employer, etc. If you want to take a real big risk then fork you own project so you have a safe place to start over from if things don’t work out the first few tries.
Good luck! Post again if you need help.
I definitely didn’t think of it that way - my POV in regards to following this method is really understanding the bones of it all. Taking my time, really going through it and getting it right. Being able to following what is being asked of me and make it come to fruition - to me, at least the way my brain works, means I GOT IT.
But absolutely I totally understand what you’re saying. My end game isn’t to just pass some online certification but to make an aesthetically pleasing portfolio that truly showcases I know what I’m doing.
I appreciate your combined input. @snowmonkey you really helped me when you said “So your label for the name you’ve given the id “firstname”. That is not what it’s asking for.” It made me think - Ok, slow down and THINK about what it’s asking you. And I will use this way of thinking/learning/problem solving moving forward.
Excellent. And always know, this is a great community, almost always willing to take the time and proof code. Personally, I look for reasons to poke around in broken code. It’s like when I was a kid and the crystal radio broke, I was the one who wanted to pull it apart and find out WHY.
Damn. There I go, dating myself. 
Seriously, though, I’m glad you get my point. I did blow through some of the lessons and challenges, and now (both for my portfolio and for my own education), I’m revisiting them and seeing if there’s a way to do the same thing better.
For example, in the front-end libraries track, the challenges there want developers to demonstrate that they can use a framework or library (jQuery, React, etc). And that’s great. But too often, folks don’t really get how to build an elegant app with no framework at all. Find the thing that can set you apart, and keep on taking it apart and rebuilding it better.
Your portfolio will be a living, evolving creation. I look forward to seeing it, @ChadMKidd.
So again, tinkering because I can, I massaged your survey form page on my server. I removed all the div tags, every one, and I changed the formatting a little: I used a two-column grid layout, so labels are in the left col and fields are in the right. Makes for a much smaller page, far easier to maintain.
Also, in yours, you style input[type=text] elements, but you might also want to style (in that same rule) input[type=email], input[type=number], as it will give all text inputs the same styling.
To see what changes I made, take a look here.
Wow that looks so much better. Crazy what a bit of tweaking can do. Would you mind sharing the code or at least the changes? 
Right-click on the page, and “view source”. It’s all right there, and free for the taking.
Didn’t want to inspect if you weren’t cool with it. haha thanks!
I messed with it a little. But now it’s starting to get too crazy haha and fatigue is setting in. It’s dinner time in Los Angeles. Check it out when you get a chance. updated hiphop survey
Took a look at it, cool changes, but from a design perspective, I might suggest another change: for someone with some visual challenges, the busy background distracts from the form. Perhaps give the form element an opaque white background (so that it fades the body’s background some). This will let you show your mad photoshop skills, but be considerably less distracting from the survey, which is the point of the exercise.
Thank you! Honestly I didn’t even consider that.
I’m getting old. Easily distracted. Blind. heh. Kidding.
But it is part of the accessibility testing. Doesn’t impact that you have a GREAT page going there, but just something to bear in mind.
ok I tried to make it more readable. I appreciate your feedback 
One thing to note, you have an extra label tag in both ‘Nikki Minaj’ and ‘Amil’. It becomes obvious with the drop-shadows and border-radius thing.
Also, I might consider changing the padding rule on labels, simply to give a little space on the left and right.
Otherwise, much better, far less busy and distracting! Have you scoped it out on mobile devices? I’m on a flip-phone, so (other than mobile emulators) I don’t have a way to check that for you.
Good catch. I was wondering why it was acting wonky. Will fix. No haven’t scoped for mobile yet. Was so focused on just getting it looking good didn’t even consider. Will do moving forward with future projects.