Responsive Design Certification! Feedback time

Project Feedback
#1

Hey free campers! Finally managed to complete the first projects and earned my first FCC certification. Here is my portfolio page, critics and suggestions are welcome!

https://codepen.io/elschilling/full/qBaombj

Thank you all involved with this amazing community. I learn something new here everytime! Hope to be able to contribute somehow soon.

#2

Your project look good @elschilling. Some things to revisit;

tribute page

  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for. (Wow! That’s a lot of them :slightly_smiling_face: )
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links. For a more thorough explanation read Web Accessibility in Mind.
    • “wikipedia” is not accessible

tech doc

  • Instead of <br> nest multi-line <code> snippets in <pre> </pre> tags in HTML to preserve whitespace and line breaks.
    Or skip the pre element and do the following in CSS;
code {
white-space: pre-line;
}
1 Like
#3

Thank you for your reply @Roma! Your hints are very important and helped me a lot to improve these projects and future ones

Only thing that I couldn’t understand:

Here wikipedia works normally

1 Like
#4

Accessibility in this case doesn’t mean the link doesn’t work. As explained in the links, a user with a screenreader will not have any context when just hearing the word “wikipedia”.

1 Like
#5

You are right! Now I got it, will expand the text inside de <a> tag. I have to get used to think in terms of screenreaders. Thanks!

1 Like
#6

You found it! Hahaha this was a bad turn around for an interference between div’s that I couldn’t find a better solution when did it. Looking the code now just by adding clear: both; to the quote div things got right.

Very happy to discover the <pre> tag! I will implement it