My tribute page only 20% complete :/

Code Feedback
1

I’m new to html and css. I done the teaching excercises. I’m not even sure if the feedback I’m getting is from my most recent save.
What does the fork thing mean. ? I know I have a basic one and the text on the page and margins etc. aren’t fancy.
Any tips or suggestions, to get to 100%?
only way I can think of resizing the images is using style on the img class with width; 200px;" . But that’s not resizing it right to fit the parent?
I’ve tried to do all the div id and “img-id” they wanted.

2

Welcome to the forums @hman543. I’ll give you some things to revisit regarding your page.

  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 8/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Use external styling to style your page.
    • Currently you have one instance of internal styling which is incorrect because the style element is in the body. Btw, when you move the CSS to the CSS section in codepen you don’t need the style tags.
    • You have an instance of in-line styling.
    • Your code will be easier to maintain when all styling is external.
    • There is no font called sans-s. It’s sans-serif
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should be aware of and address.
      • There is also a made up HTML element. You can’t make up your own.

When you fork the sample page you’re getting your own copy that you can edit and save. You’ll start out with blank HTML and CSS sections in codepen and create your own page. Forking the sample project leaves the script that you use to test that your page passes all the user stories.

Maybe review this lesson. When a test fails, you can click on the red button to see which test failed and why. There will be text that will help you resolve the issue. The test for resizing the image to fit the parent can possibly fail for a few reasons. If you add one of the fixes and click the test again it may fail for another reason. Keeping the first fix in, add the next fix as it tells you. Doing this until the test passes.

1 Like
3

did you see the 20% in the modal after pressing “I’ve completed this challenge”? that’s not the progress for the project (to know about the project use the test script)
the 20% is the progress in the Projects session, completing 1 of 5 is completing 20%

1 Like
4

thanks so much magic girl, I get it now, because there’s 5 projects. :slight_smile:

5

Hey , thank you for your reply. I’ve think I’ve finally done it now thanks to your help. I wanted to ask why the project required us to do so many id’s, like img-div which seems so pointless, it doesn’t contribute anything.
Oh I just realised, is that so you can put borders around the images or designs for the other id’s., like the id for the title and such.
When I make the max width in the css bit 100%, 9/10 tests pass but when I make it something else, its 8/10.

6

My page is now showing 3/10 complete. I’ve logged in from a phone so I’m not sure. anyone? only thing I haven’t done I think is the image readjusting depending on it’s parent element.
edit: I don’t know why but it doesn’t save sometimes so the style class was still in my html so I removed it and the css part was blank

7

Take a look at this code my friend and paste it to the place where you are creating the page. I think it is a good design for your site as I think not many colors are needed. Anyway if you want to design it a little better look at flex box and bootstrap. I hope I helped
code: