Feedback: Atribute page

Code Feedback
1

Hello guys!
Can you give me a feedback about my first project (attribute page)
i’ll be so thankful!!
here’s the link https://codepen.io/masmarmehdi/details/abZjzGL

1 Like
2

Hello @mehdimasmar. Your project is impressive!
Here are some things you can change:

  • Always keep accessibility in mind when giving text to link. The link in the footer currently has “Click Here” which is not meaningful. Try changing it to “Learn More about Einstein in WikiPedia” or something meaningful.
  • In smaller screens, the image caption is a little bit larger.
  • Capitalize the header above Einstein’s timeline.
  • Validate your code through w3c Validator. There are some small errors in your HTML code. Since copy-pasting from CodePen, you can ignore the first three errors.

Anyway, good job! Keep it up!

1 Like
3

Thank you so much for your time! i’ve changed my errors,but concerning image i tried to do it smaller when the page is getting smaller but i don’t understand how…
i hope if you could help me
thanks again!

1 Like
4

I told you to change the font size of the IMAGE CAPTION and not the image.

1 Like
5

i did but i see something different that i expected… :confused:

6

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

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • In addition to its use being an error the way you’ve used it, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • The tribute link doesn’t show so well as a link. Links by default have an offset color and are underlined to designate themselves as a link. While you can change them it’s not a good idea to radically change it so that it’s not clear to the user that there’s a link to click.
    • Remember too that smaller devices will not have a mouse with which to hover.
  • I normally don’t comment on someone’s design choices because it’s personal and I don’t force mine on someone else but you should rethink the color choices with such a dark background and black text.
1 Like
7

Thank you so much for your feedback i’ll to make it better :smile: :raised_hands:

8

Hey @mehdimasmar!

Were you able to fix the issue?

1 Like
9

Fine project, just wanna add two things.

  1. Choose the colors wisely, currently you have chosen dark colors for both foreground and background.
  2. Style the anchor tags differently, they need to look different than regular text.
1 Like
10

no i didn’t…:sweat:

11

Okey i’ll add those advises thank you so much! :smile:

12

You are missing media queries on your page.

If you add this to the bottom of your css code and resize then browser window then it should work.

@media (max-width: 600px){
  #img-caption{
        font-size:15px;
    }
}

Here is the FCC lesson on media queries again as a refresher.

Hope that makes sense!

1 Like
13

Thank you so much for your time it makes sense now! :smile: :raised_hands:

1 Like
14

You’ve had a lot of feedback on this but I’ll add one more thing @mehdimasmar.

This is a relatively small page. It really wouldn’t require media queries if you use relative units (percentages on widths, em or rem units for font size, etc) rather than hardcoding pixel values.

Edit: side note, you don’t have to incorporate every style change someone suggests. For example, if the font is a little large when viewed on a small screen you don’t have to correct it right away as long as all tests pass and the page is responsive. You can choose to revisit it at a later time when your skills increase and you want to make the page look better.

2 Likes
15

Happy to help!

I definitely agree with @Roma’s comments on style changes. You always have to remember that at the end of the day it is your project and you get to style it the way you like it. I think you did a really good job and you shouldn’t feel like you can’t move on from a project until the forum approves. You are more than ready to move onto the next project if you haven’t done so already.

Also, for your next project I am going to include the FCC lesson links for relative units.

When I made the post about media quieres I totally forgot about using relative font sizes (I’m such a dummy sometimes :laughing:) But it gave us an opportunity to review media queries . :smiley:

Keep up the good work!

Happy coding!

1 Like
16

Thank you so much for this feedback I really get motivated more and more to get the certificate thank you for your time I really appreciate that :pray:t2::100:

1 Like
17

Yess we at least revised the media queries. Thank you so much for your time I appreciate that :grin::pray:t2: