Tribute Page - Ariana G

I rushed on this because I had zero ideas. Forgive the non-traditional subject matter.

2 Likes

Hey Chelly,

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


My ideas:

  • all tests pass, awesome!

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

  • when you use codepen (only there!), you can remove <!DOCTYPE html>

  • 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
  • on my wide screen, I’m having a hard time to read the content, because some lines are very long, font size and line height are rather small:


That’s a really great first project!
Keep up the great work,
looking forward to seeing your next steps! :slightly_smiling_face:

1 Like

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

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
  • Don’t use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Review the lesson about giving meaningful text to links.
1 Like

Thanks!

I’ve made some adjustments based on suggestions except for the links at the bottom. I’m not really sure how to improve that without sounding redundant.

The one article may be able to help. It’s not a show stopper but you should be aware that someone using a screenreader will not know what “wikipedia page” or “website” refers to.

On a side note, I just noticed that you use the strong tag in your timeline and achievements. Have you noticed that the text is not bold like you expect it to be?
This is because when you imported your font you only selected the “Regular 400” weight. So the browser tries but cannot make that bold. What you need/want to do is select both the “Regular 400” and the “Bold 700”. Then you’ll see the results on your page the way you desire.

When your link names are here, click here, Wikipedia etc. you don’t know the content of the link without actually visiting it. Sure, you can hover over the link and look at the URL and guess the content.

When your link names are My Freecodecamp Tribute Page, alismora's Personal Portfolio, Ariana's Github etc., you know the content without visiting it.

Now think about a blind person that can’t check the links by hovering over it:
They visit a page and the screen reader goes like click here, here, visit this, click here.

I recently saw a post and I literally got a headache (not to blame anyone, just a good example): example of bad link names

You literally have to read all sentences again to know where the here links go.
If you use a screen reader, you have to memorize the past sentences and repeat them.

1 Like

Alright, I think I understand now.

Is this better?

image

Yes, that is much better @alismora

1 Like

Wow, it looks great! I think, you are really demonstrating a feeling for good design. That’s exactly the right balance between clean design, and refreshing at the same time. I also appreaciated the not-so-basic-stuff you did, like the flexbox. Keep up the great work <3

1 Like