HTML/CSS Assessment Questions - Failed

Learning Challenge

Question

What I’ve tried

Screenshots

Hey guys,

Here are the things that I am having a hard time figuring out where I went wrong:

The questions you missed were:

* has a ‘button’ element which contains the exact text “Create new pet”

  • has two ‘input’ fields

  • has a ‘form’ element that is 600px when the window is wider than 600px

  • has exactly one reset ‘button’ elements that has the content ‘Reset’

I’ve attached my code. I’m kind of hitting a brick wall with this. Thank you so much!

Hi, @ethan! Welcome to the community, man. Look forward to seeing you pass this! :fire: :rotating_light: :fire_engine: :fire_extinguisher: :fire:

You’ll want to take a look at the <button> element. While you’ve definitely made a ‘type’ of button using the <input type="submit" /> our assessment is very strict about using a Button.

This is being caused by the previous issue. You essentially end up with 4 input elements, because your “buttons” are, technically, inputs. Fixing the previous issue should resolve this issue.

The simplest way to look at this issue is going to look into the max-width css style and apply it directly to your form element. This will effectively tell the form, “Hey, no matter how big the browser gets, I don’t want you to go past 600px.”

This is the same as the “button” issue described above.

Hope that helps, man! Let us know if you have any more questions.

Bryan,

Thank you SO MUCH.

Bryan,

Can you take a look and make sure this looks proper, please?

Cheers,

EthanScreen Shot 2020-07-16 at 12.08.49 PM

That CSS is effectively saying, “On screens that are 600px or less, set the form width to 100%”

And as long as you have the CSS that covers the “On screens that are 600px or more …”

That should be good.

Hello,
The question I missed was this: * has exactly one ‘select’ element with a name of ‘pet_type’ and an associated label with the content ‘Type’

Attached is screenshot, I believe I satisfied the requirement. Can someone please provide some insight as to why is was not accepted…

Thank you!

Super close, @MG2Ten!

Notice that your label is inside your select element … that will make the browser super angry! :imp:

Ahhh, @bryanray so not necessarily the content, but you think removing the label from inside the select structure itself would make all the difference?

@KyleMonaghan
Alright,
So I restructured the code removing the label from within the select element.
Now the response I received was 10/12.
The two missed questions were:

  • has exactly one ‘select’ element with a name of ‘pet_type’ and an associated label with the content ‘Type’
  • has exactly five ‘options’ elements in the ‘select’ element
    Is there anyway to speak with someone regarding this issue, I’m kind of at a loss here.
    The submission screenshot is below.

So this is what I missed, but I have this in my code:
The questions you missed were:

* has a ‘button’ element which contains the exact text “Create new pet”

Here’s my code:

Really close, @MG2Ten. Take a look at your select element. The name needs to be pet_type and the id attribute needs to be type. You appear to have them flipped.

Solving that should solve both your errors! :+1:

Sadly, casing is important, @ethan. :sob:

“Create New Pet” and “Create new pet”

NOOOOO. :sleepy: :sleepy: :sleepy:

SUCCESS! @bryanray thank you for your help!

3 Likes

I keep searching my directory for an avatar image and a desert image but i do not have any. i checked c:\windows\web and nothing is there. can anyone help?

I found a couple images on google to upload but they are way too big. I have tried messing around with the CSS code to get the proper sizing. I will upload my code as well.

Hello, and welcome to the community!

The images you need are already in the project. If you open the images folder you will see desert.jpg and person-avatar.jpg`. They look a little different than the ones in the screenshots, but those are the images you should use for the assessment. No need to search for any new ones!

Let us know if you still have trouble finding them.
Jesse