Anyone interested in reviewing my Tribute Page?

Project Feedback
#1

Tribute Page (fCC) (codepen.io)

I completed and polished recently my Tribute Page regarding Antonio Luna. I got inspiration from other Tribute Pages, then made the design through Figma, and translated it to VS Code.

I also experimented in making the webpage responsive without media queries, while using BEM in naming classes.

What do you think? Did I do it right? Are there areas I need to improve on? Suggestions are welcome…

#2

Hello @NyeverGator I am very happy to looked your project. and I think your project looks nice. but just now I put this on top the code:

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

It shows you didn’t pass the test yet. Do you like to check that again? have a nice day and happy coding :slightly_smiling_face:

1 Like
#3

Really good, solid project.

  • Good job making it responsive. Not just the text, but I noticed the photo and title flow well

  • Good job on semantic use of the <h1> tag. Many people don’t realize semantically there should only be one <h1> tag per page, and that one shouldn’t skip from an <h1> to an <h3>, etc. You didn’t make either mistake. Good job.

  • I noticed in your CSS you had made the following comment:


/* Colors: 
#deb26f - Side Background
#f2d6a4 - Main Background
*/

I used to do the same thing so I could build a color scheme and then remember the hexidecimal colors I need. I just discovered the other day you can also do this:


:root {
  --side-background: #deb26f;
  --main-background: #f2d6a4;
}

where root defines base values on the root of the project, the -- states that this is going to be a CSS variable, followed by the name of the variable, then the : indicates a separation between the variable name and it’s value, and then finally the value follows the ;.

Then, when you want to use it you can do something like this


.class {
  color: var(--side-background);
}

or possibly


.class {
  background-color: var(--side-background);
}

I have found for me that this helps make it a lot easier since I just have to remember the name of the color and I don’t have to keep going up to the top of my CSS page to copy and paste the hexadecimal number.

2 Likes
#4

I actually intended to not include the attributes needed to pass the test yet, but I will once I have the time to do so. Thank you for the reply :grin:

#5

Thank you for the compliment. I am actually taking the new Responsive Web Design (Beta) course, and I have not reached CSS variables yet.

But from your suggestion and what I researched, I think this could be useful later on when I build the other projects needed to complete this course.

I will make sure that I remember this and as always, thank you for the reply :grin: