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