Responsive Design Certification! Feedback time

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.

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

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

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

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

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