Tribute Page - Victor Jara

Project Feedback
#1

Hi guys,

I’m seeking feedback for my first FreeCodeCamp project. It’s a great feeling to have completed a project on my own and I welcome your constructive feedback to help me learn more.

https://codepen.io/Nathanbfox/pen/gOwGLeL

I k now it’s not the most colourful page (in fact there is 0 colour!) but black and white felt right given the subject matter.

Thanks in advance.

#2

Congrats on finishing your first project. The first thing I am noticing is that the text is breaking out of the bottom of the boxes. I think you will definitely want to fix that.

#3

Thanks for taking a look. I thought I had sorted that with a media query and I couldn’t get them to break when I was inspecting it- was it just the bottom right box that was breaking?

That was something that I struggled with - I wanted the boxes to be the same height when they were in a row but they all had different amounts of text in. So I set a height for them and then added a media query so that when they changed column display on a narrower display the height was set to auto-fit content. There was probably a better way to do that.

#4

There is a very simple way to solve this, just don’t set a height on the tribute-text divs. Once you remove the height I think you’ll see that they automatically adjust to the same height (and that will be the height of the tallest box). That’s a benefit of using flexbox.

#5

:sweat_smile: There really was a better way to do it. Thanks again.

#6

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

  • Run your HTML code through the W3C validator.
    • There is an HTML coding error you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links. For a more thorough explanation read Web Accessibility in Mind.
    • “wikipedia entry” is not accessible
  • Side note, your font-family is a serif font. More than likely you’d want your backup to be serif, not sans-serif.
  • There are two media queries with a max-width: 550px. These should be combined.