I rushed on this because I had zero ideas. Forgive the non-traditional subject matter.
congrats on your first project, you did a great job so far!
all tests pass, awesome!
when you use codepen (only there!), you can remove
you can increase the readability of your code by:
- clicking on the small arrow on the right side of the code box and
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!
Your page looks good @alismora. Some things to revisit;
- Keep the test script when forking the pen (
- 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.
- Web Accessibility in Mind has a more thorough explanation.
- “wikipedia page” and “website” are not accessible
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
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
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.
Alright, I think I understand now.
Is this better?
Yes, that is much better @alismora
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