[Feedback] Build a Tribute Page

Project Feedback
#1

Hello everyone! I just complete my first project. I would like any feedback about my work.

https://codepen.io/afranio/full/YzXVGxW

Thanks!

1 Like
#2

Welcome to the forums @Afranio. Your page looks good. Just a couple of things to revisit;

  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    • A lot of the same warnings. Side note, all your styling should be external. Don’t use in-line styling.
    • There are a few accessibility warnings you should look into too.
  • Review the lesson about giving meaningful text to links
    • ‘Goodreads’ isn’t accessible
1 Like
#3

Welcome to the forum @Afranio

I’ve got to admit, I really like this layout. Super awesome job on the responsive design. A little jealous that I can’t make anything that looks as good as this!

When I shrink the width of my screen I notice that the books aren’t lined up centrally like the footer is and it kind of gets to me. Hopefully you can see what I’m talking about here:

image

2 Likes
#4

@Roma, Thank you a lot by all topics.

  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for ’ box.
    Done!

  • The link to your font would go in the box labeled ‘Stuff for ’
    Done!

  • Run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    Done!

  • A lot of the same warnings. Side note, all your styling should be external. Don’t use in-line styling.
    Done!

  • There are a few accessibility warnings you should look into too.
    Done!

  • Review the lesson about giving meaningful text to links
    Done!

  • ‘Goodreads’ isn’t accessible
    Done! (I removed the script and put “by hand” all referencial link --painful!)

#5

Hello @caleb-mabry,

Thank you by this nice observation. I tried fix putting min-width: 400px; into container’s grid of the books. CSS is very painful to me, I spend a lot of time to try align, adjust or justifying anything. I hope that this solution satisfies your observation.

1 Like
#6

Great job!
Your choice of fonts and colors immediately convey the context of your page. That’s a great UI/UX asset.

Adding the colorful palate of small images is one the main thing that makes your page pretty unique and sophisticated so good job on that. Center Aligning the content is also always a plus.

Good luck on future projects and keep up the good work :ok_hand:t4:

1 Like
#7

I’m pretty sure CSS will always be a battle! Keep it up though. Great work

1 Like
#8

Nice job! I see some of the things done but not all.

One thing, the script should stay in the HTML section. It’s a JS script and it would normally be placed right before the closing body tag. It’s not something that would go into head.
For codepen purposes it doesn’t matter if you put it at the top of the HTML section or at the bottom.

#9

@Roma, Thanks for reply!

If I understand well, would be like this:

<html>
   <head>...</head>
   <body>
   .
   .
   .
   <script>...</script>
   </body>
</html>

I put the CDN into JS > Add External Scripts/Pens, is this right? Or for best practice I should put CDN into <script></script>?

1 Like
#10

The picture is correct

#11