Project feedback: Tribute page - German Bobadilla

Hi my fellow campers…
I would love to hear from you on this one. My first project: https://codepen.io/germanbobadilla/pen/RwWMXyO
Personally, I think it’s lifeless. I need to add some animation, or a transition of sorts.
What do you guys think?

1 Like

Hey there. Site overall looks good. Very clean. Don’t worry about life in it. It’s your first project. Just supposed to fulfill the conditions and look mostly decent. I would say if you want some more life to at least change the fonts. Google Fonts are free and easy to add and there are tons. Also, some stuff about the code. You have a star tag in your CSS, but not in your HTML that I can see. There is no alt text for your image. There is a break after your first li but not your others, and it looks good when on mobile, but just turns into a rectangle when the screen is expanded. And lastly, I think for the main tag you’d want to use that around the content of the page, so it would replace the section tag since that’s the main content really and use a div where the current main tag is if you want to group that stuff. But not necessary I guess. Anyways, overall pretty good work! Keep at it!

1 Like

Thank you Codecory, for your feedback. It’s greatly appreciated.

Nice work @germanbobadilla.

I love how you made use of spacing and alignment. Just one issue, the font-size is currently quite little especially on large displays.

I suggest you try using relative units like the “rem” to control the font-size on different displays.

1 Like

Thank you for taking your time to review my project.
I’m on it. Working on converting everything to rems and ems.

1 Like

Nice one :+1:
I like the hr-li display
And you box shadow hover effect looks cool but I feel you should reduce it a little am viewing it on my phone
You did a cool job

1 Like

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

  • Your page passes 9/10 user stories.
    • The test script should be included, with all tests passing, when you submit your projects.
    • Click on the red button to see which test is failing with text that will help you resolve it.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • Use the CSS one. You have a selector that has nothing to do with your page as far as I can tell.
1 Like

Wow, thank you so much for you comment. I’m working on it right now.

Thank you Roma. I did just that. I have a 10/10 now. To tell you the truth, I hadn’t seen the dropdown to select Tribute Page, to run the test. So, all I did was display: block, and voila.

On another subject,
You guys have been crazy inspiring. I feel like I’m studying at the university a CS degree. So much feedback with just one project. Amazing.

Glad to help. Happy coding!