Togo Tribute Page

Code Feedback
1

Hi everyone!
I’m looking for feedback on my tribute page on Togo. I wanted to practice using CSS grid and fulfill the project requirements. Let me know what you think.

1 Like
2

I didn’t look at your code, but to me it looks great. One thing that might help would be to increase the space between your right-most text and the edge of the screen. It would be more balanced if it was the same as the space between the left side of the screen and your image of Togo.

By the way, I loved the movie!

3

I like your color scheme and the topic you are presenting! I learned something new today.

As for your code:
There are a few stray elements. You could use codepen’s built-in “analyze code” function to find some (it doesn’t always find all) and then use “w3c validator” (paste your code).

Good start!
Sebastian

4

Welcome to the forums @crjett01. Your page looks good. A couple of minor things to revisit;

  • There’s a stray ending div right after your unordered list. You should delete it.
  • The text on your page and the text in your link look exactly the same. It’s not clear that it’s a link.
  • 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.
    • In CSS you have an extra semi-colon. Delete it. But also know that clicking on the ‘Format CSS’ will get rid of it too.
    • I’ll also mention that the one for HTML gives false positives and misses a lot of errors. I tell people to use the W3C validator. Since you copy/paste from codepen you can ignore the first couple of errors. You don’t have any issues, just so you’re aware of it.
5

I hadn’t given much thought to the space on the right side in a desktop view. Thanks for pointing that out!

I’d never even heard of Togo until the movie. I’ll probably never watch it again though-- way too sad. Thanks again for your feedback

1 Like
6

Thank you! I hadn’t figured out where the analyze code function was until Roma explained it. But I’ll definitely use those two tools for future projects.

7

@Roma thank you so much for the detailed feedback. I have removed the extra ending div and will try to make the link stand out more. One thing that I don’t understand when I use the analyze code is:

<div class="footer-like">You can learn more about Togo from the <a id="tribute-link" href="https://www.nps.gov/people/togo.htm" target="_blank">National Parks Service</a>.</div>

The value of the href attribute [ https://www.nps.gov/people/togo.htm ] must be relative.

What does that mean?

8

You’re welcome @crjett01.
That’s from codepen’s validator. I’m not sure which validator they’re using but I’ve noticed recently that it puts out false positives and misses legit errors. That’s why I point to the W3C validator. The validator for CSS seems to be good.

1 Like