First Project Feedback!

Code Feedback
1

Hi every one I need your suggestion for my first project.
Thank you.
https://codepen.io/Nabila95/pen/rNxeoBa

1 Like
2

Hi!
Try to make it pass all tests?
Image is not centered: expected 0 to be close to -20 +/- 11

3

Hi Nabila,
You don’t need padding style for your image , if you want the image to be smaller than the container, you could just set : max-width:90%.

4

hi @nabila

just want to add what others have mentioned, try to use the css analyze tool in codepen.

you have typo at height property in your img selector.
there is unknown property of image: center.

to centering image in their container, you just need display: block; and margin: auto; .

5

Hello!
Thanks a lot for your suggestion.
I have already pass all tests.

1 Like
6

Hey, well done! :clap:

One last suggestion: you’ve added “tribute page” to stuff for head section in settings.
HTML editor of codepen was supposed to be <body> tag of your project, and stuff for head is <head> tag, it can be used for adding fonts, meta tags, scripts maybe etc, of course it’s not that strict, there are options. Don’t think you need this line there :wink:

7

Hi
Thank you again for your suggestion.

1 Like
8

Your page looks good @nabila. Some things to revisit;

  • When you add something to the head in codepen it should still be in the format as if you had the head element. You see “tribute page” under the test hamburger because that’s what you typed into ‘Stuff for <head>’. The proper format for that is <title>tribute page</title>
  • 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 address.
  • If you review your page you’ll see everything is a serif font. That’s because you have a typo in the font family. It should be sans-serif
  • Review the lesson about giving meaningful text to links.

As an aside, the project say to make it “functionally similar” and “give it your own style”. Try to do your own thing, not a rehash of the FCC sample projects.

1 Like
9

Hello!
Thanks a lot.

10

Sorry what do you mean by “wikipedia entry” is not accessible.
Can you please explain it for me, because it’s about two months that i start learning web development and i don’t any thing about that.
Thank you.

11

If you read the links I included it explains it.
Briefly, if someone is using a screen reader then just hearing “wikipedia entry” will not mean anything to them. You need to make the link make sense…make it accessible.