Tribute Page Feedback - 1° challengue

Hi everyone i’m Juan. I’m starting in the world of the programming and i want to share with you mi first page that i do for the first challenge of the “Responsive Web Design Projects: Tribute Page” and ask for feedback, i want to improve.

I share the repository on github and codepen too. I really want to know what i can improved in all the senses. I think one can be use more appropriated html tags for make the page more friendly to the readers screen and for debugging.

So, i stay attentive to your words, thanks for all.

Web Page: https://juanpastencastillo.github.io/FCC-Challenge-TributePage/
Repository: https://github.com/JuanPastenCastillo/FCC-Challenge-TributePage
Codepen: https://codepen.io/JuanPastenCastillo/pen/GRqbrKj

1 Like

Hey @juanpastencastillo!

Congrats on finishing your first project!

A few things.

  • You do need to include the test suite in your project. Right now you are only passing two of the 10 tests. So I would work on those 8 tests that are failing before submitting this project.
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  • In codepen, you don’t need to include the doctype, head section or html tags. All of that is taken care of by codepen. If you need to include a link in the head section you can add it in the html settings on codepen.

  • I think black text on a dark grey background is a little hard to read. So I would suggest choosing a lighter background color or white font.

Hope that helps!

1 Like

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

  • As mentioned, 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.
    • Your page passes 2/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Please note that this;
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- 
ALL CONTENT
-------------------------------------------->

is NOT a valid comment.

1 Like

Thanks a lot for you word @jwilkins.oboe and @Roma i really appreciate the commentary. I learn some new things with the colour, make a make a web more accessible and know devdocs where they combined multiple documentation, thanks a loot for all.

I share with you my code with your lessons. This time i pass the challenge (i didn’t realise that javascript scrip exists, because i do all on VS code).

The page: https://juanpastencastillo.github.io/FCC-Challenge-TributePage/
Repository: https://github.com/JuanPastenCastillo/FCC-Challenge-TributePage
CodePen: https://codepen.io/JuanPastenCastillo/pen/GRqbrKj

I want to share too the tools i found for the colour.

  1. Adove Color: https://color.adobe.com/create/color-wheel, this allow to know and use the different categories of the colour that can be useful to decide which of them use in a web design. This is under the theory of colour. Therefore, is too more to learn that just pick a couple of colours and applied to a web page.
  2. Canva: https://www.canva.com/colors/color-wheel/, similar to Adove Color.
  3. ** COLOR SAFE: http://colorsafe.co/**, this page allow to contrast the background colour with the color of the words. The topic is more complicated that just pick a colour, this is under the Web Accessibility Initiative (WAI) that i found here: https://www.w3.org/WAI/ and the link that share @Roma.

So, that’s it. If i can improve in something else i really appreciate your perspective. Thanks for take your time and attentions. I hope you have a nice day and a nice life.

I everyone. I want to know if you can help me with a issue i found. At the bottom of the page, this don’t apply the border-radius that i put to all the container. It just applied to the top: right and left side, but not the bottom either left or right. Do you know why this happend?

HTML:

<div id="containerOfAllTheSections">

CSS:

#containerOfAllTheSections{
 margin: 25px 3px;
 border-radius: 5px;
 background-color: var(--forBackground);
 text-align:center;
 font-family: 'Philosopher', sans-serif;
}

The result at top:

The result at bottom:

Here is the page: https://juanpastencastillo.github.io/FCC-Challenge-TributePage/
CodePen: https://codepen.io/JuanPastenCastillo/pen/GRqbrKj
Repository: https://github.com/JuanPastenCastillo/FCC-Challenge-TributePage

Thanks a lot for your time and attention.

Your styles are working it is just that your footer is hiding the border radius at the bottom.

You can see it working if you temporarily remove the footer background color

Good job fixing those issues brought up earlier.
Two things that I noticed.

  1. The alt tags should have a descriptive text

  2. you are missing quotes at the end of your src attribute.

   <img src="https://i.postimg.cc/SJTwbdwW/moustache.png alt="">
1 Like

The instructions that have the user stories has this line;
“Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js.”

Good job on passing the user stories.

There are still issues you should address.

  • Run your HTML code through the aforementioned W3C validator and address the errors.
  • Read the links previously given about accessibility.
    • “here” is not accessible
1 Like

Thanks a lot @Roma and @jwilkins.oboe for use your time and attention to give me feedback. Since the last time i read your comments i learn some things about the accessibility, and i try to apply a few of them on the page. The topic of the accessibility on the web is deeply and complex. I will share here the improved i do to the page and code, the tools i found in the process and the reference from where i take all this information. In advance, thank you very much for your time and attention (i still have a eye if you have some commentaries, i want to improve).

Web page: https://juanpastencastillo.github.io/FCC-Challenge-TributePage/
Codepen: https://codepen.io/JuanPastenCastillo/pen/GRqbrKj
Repository: https://github.com/JuanPastenCastillo/FCC-Challenge-TributePage

Tools to WAI (Web Accessibility Initiative):

  1. VALIDATE HTML (Markup Validation Service)
    https://validator.w3.org/

  2. VALIDATE CSS (CSS Validation Service)
    https://jigsaw.w3.org/css-validator/

  3. CHECK HTML FOR ACCESSIBILITY (WAVE Web Accessibility Evaluation Tool. Have contrast ratio in “real time”)
    https://wave.webaim.org/

  4. a11y Color Contrast Accessibility Validator (you can put the URL of your page)
    https://color.a11y.com/

More tools to WAI:

And my references:

  1. How to make links accessible (Hint: colors are not enough) https://www.freecodecamp.org/news/link-accessibility-colors-are-not-enough/
  2. Font Awesome https://fontawesome.com/
  3. WebAIM’s WCAG 2 Checklist https://webaim.org/standards/wcag/checklist
  4. Easy Checks – A First Review of Web Accessibility https://www.w3.org/WAI/test-evaluate/preliminary/
  5. Understanding Success Criterion 1.4.6: Contrast (Enhanced) https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced
  6. Understanding Success Criterion 1.4.3: Contrast (Minimum) https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum
  7. Selecting Web Accessibility Evaluation Tools https://www.w3.org/WAI/test-evaluate/tools/selecting/
  8. Web Accessibility Evaluation Tools List https://www.w3.org/WAI/ER/tools/
  9. WCAG-EM Overview: Website Accessibility Conformance Evaluation Methodology https://www.w3.org/WAI/test-evaluate/conformance/wcag-em/
  10. Website Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0 https://www.w3.org/TR/WCAG-EM/ Here you have like a “Manuel User” for the tool.
  11. Template for Accessibility Evaluation Reports https://www.w3.org/WAI/test-evaluate/report-template/
  12. Authoring Tool Accessibility Guidelines (ATAG) Overview https://www.w3.org/WAI/standards-guidelines/atag/
  13. ATAG Report Tool https://www.w3.org/WAI/atag/report-tool
  14. Involving Users in Web Projects for Better, Easier Accessibility (part 1) https://www.w3.org/WAI/planning/involving-users/
  15. Involving Users in Evaluating Web Accessibility (part 2) https://www.w3.org/WAI/test-evaluate/involving-users/
  16. Using Combined Expertise to Evaluate Web Accessibility https://www.w3.org/WAI/test-evaluate/combined-expertise/
  17. Evaluation Standards Overview - ACT & EARL https://www.w3.org/WAI/standards-guidelines/evaluation/
  18. Learn “Guideline 1.4 Distinguishable” https://www.w3.org/TR/WCAG/#distinguishable
  19. 6 Surprising Bad Practices That Hurt Dyslexic Users https://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/
  20. ARIA https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
  21. E-Readers Are More Effective than Paper for Some with Dyslexia https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3776763/. I read only the abstract: “(…) Prior eye tracking studies demonstrated that short lines facilitate reading in dyslexia, suggesting that it is the use of short lines (and not the device per se) that leads to the observed benefits”.
  22. E-book reading hinders aspects of long-text comprehension for adults with dyslexia https://pubmed.ncbi.nlm.nih.gov/31313046/. I just read the abstract and is just expand a little the topic of the adults with dyslexia and e-books.

That’s a lot of reading @juanpastencastillo. Still, some things to revisit. These are easy to correct just using the W3C validator and reading the links about accessibility.

  • There is still an error in your HTML code. Running it through the W3C validator will show it.
    • Since you keep posting the same thing without correcting the error I’ll tell you where is it.
      • The scr attribute for img should be in quotes. You’ve missed the closing quote.
      • Also, only under certain circumstance should the alt attribute be empty. You should have something there.
  • “wikipedia” is NOT accessible.
    • reading the two links I provided should be enough. Briefly, if you take the link out of context it makes no sense. Someone using a screen reader will just hear “wikipedia” and it will mean nothing to them.

It’s a nit I’ve mentioned before. Your comments are not comments which is why W3C throws warning. You could do something like the following to make it valid (those are underscores);

<!-- _______________________________________
CONTAINER OF ALL THE SECTIONS
________________________________________ -->
1 Like

Thanks to much for all the comments @Roma . I apologise for the lack of corrections i was don’t do it, i’m starting in this industry: the focus on the correct things, the use of time and the comprehension of the english is something i have to improve. So, i appreciate the time, attention and patience to me.

Here i share the corrections of the work, i hope this time everything is alright. If it don’t i stay tuned for correct. Thanks a lot for all.

WebPage: https://juanpastencastillo.github.io/FCC-Challenge-TributePage/
CodePen: https://codepen.io/JuanPastenCastillo/pen/GRqbrKj
Repository: https://github.com/JuanPastenCastillo/FCC-Challenge-TributePage

Looks good @juanpastencastillo. Nice job cleaning things up.

1 Like

Thanks a lot! @Roma Have a beautiful day, afternoon or night.

1 Like