App Academy

HTML/CSS Assessment questions - failed first try

Learning Challenge

For the HTML assessment I received 3 pieces of feedback to correct:

  • has a ‘button’ element which contains the exact text “Create new pet”
  • has exactly one input with a name of ‘pet_name’ and an associated label with the content ‘Name’
  • has exactly one ‘select’ element with a name of ‘pet_type’ and an associated label with the content ‘Type’

But, the more I look in the code, I can’t seem to see what I have wrong. I have looked a several references and I am not able to find a mistake or where I’m wrong in the specific feedback given.

Question

I would appreciate some fresh eyes please.
Thank you in advance.

Screenshots

Hi Jonathan, and welcome to the forum!

It was a good call to come to the forum - sometimes these minor details are tough to see after you’ve been looking at your own code for a long time!

I see a typo in the “Create new pet” button. For the name and type erros, the code above looks pretty good to me. I did pull up your submission, and code that was submitted does not match what you posted above. In the submitted code, you added colons next to Name and Type, and that is what caused the tests to fail. It is possible that you corrected those details in the code, but forget to save the file a final time before zipping it.

So I would recommend correcting the typo on your button, and double-checking that the colons are no longer in your code. Then you can save everything and re-submit after your final check on all of the details!
Jesse

Hi Again,
Thank you so much for your help before, but I am still in need of you help.
I turned my assessment in just now, and I have received 2 corrections:
-“has a ‘form’ element that is 600px when the window is wider than 600px”
-"has a ‘form’ element that is as wide as the window when the window is narrower than 600px.

I have attached a screenshot of my code, and I don’t know where I went wrong. Unfortunately I only have one more attempt, and I still have to finish the Git assessment.
I hope you can help me, please!

Hi Jonathan,
It looks like you have code to control the width of the form in two different places. I see that you have a max-width: 600px; for the form (outside of the media queries, and I also see some code for the form width inside your media query for smaller screens.

There are basically two ways you could tackle these specs - you could do it through media queries for different screen sizes, OR you could tackle it just with code targeting the form itself (outside of media queries). Right now, it looks like you are tackling it in both ways.

I would recommend taking the form width out of your media queries, and try to control the width of the form outside of the queries.

  • How can you use width and max-width to tell the form that it should stay at 600px even when the screen is wider?
  • How can you tell the form to be as wide as the screen when the screen is less than 600px wide?

Jesse

Do you think this would do the trick?. Because on my end it renders well.

Testing in the browser will definitely tell you if it works or not! I can’t confirm your solution since this is an assessment, but if your tests in the browser behave correctly than you should be all set.