My 1st project "Tribute Page"

Code Feedback
1

Hello there,

Here is my first page! I would love to see your thoughts about it!

[https://codepen.io/ahmedchaabane/full/JjXMyJL]
(Tribute Page about Hannibal)

2

Hey Ahmed,

nice to meet you! :wave:

Congrats on your first project, you did a great job so far! :clap:

My ideas:

  • HTML and CSS validation show no errors! :clap:

  • you can add tests by adding <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> to the top of your HTML box: Screenshot_2020-08-22_08-06-17

  • you can increase the readability of your code by:

    1. clicking on the small arrow on the right side of the code box and
    2. clicking Format HTML/CSS

  • when I decrease the width of my browser, the image overflows the view; a horizontal scrollbar is mostly something you want to avoid; this is important for people who read your page on a smartphone:
    Screenshot_2020-09-07_11-32-27

  • on my wide screen, I would love to see the text in the center of my screen (just personal preference):

    Screenshot_2020-09-07_11-33-50
    Screenshot_2020-09-07_11-33-501586×160 19 KB

Keep up the great work,
looking forward to seeing your next steps! :slightly_smiling_face:

1 Like
3

I’m experimenting i don’t know if i now fixed the mobile version! Can you give me a hint?

Also is there a way to fix lists’ bullets?
Capture

4

Your page looks good @ahmed512.

Yes. I think the easiest, best, fix for this is to left justify your list. The eye reads left to right and when you have something that starts all the way on the left and the next line starting somewhere in the middle makes it makes it harder for the user to read.
If you want to leave it the way you have it, since you have the dates bold is there really a need for the bullet points?

  • User’s are not seeing the page the way you want them to. Most won’t have ‘Montserrat’ loaded on their computer and you neither link to it (head element in HTML) or import it (CSS).
  • Review the lesson about giving meaningful text to links.
1 Like