Tribute Page for Q. Larson

Hi campers,

I have completed my first FCC Project & would like your feedback on my Tribute Page:

Any constructive criticisms would be appreciated :smiley:

Thank you for your time and consideration,
Dan Stachlewski.

1 Like

I love it!
Quincy is my hero and I am glad you made a tribute to him.

There are a couple of issues.
Uncaught SecurityError: Failed to construct ‘PresentationRequest’: The document is sandboxed and lacks the ‘allow-presentation’ flag.(4) chrome-extension://pkedcjkdefgpdelpbcmbmeomcjbeemfm/cast_sender.js

codepen.io/:1
Refused to display ‘https://www.quora.com/How-does-Quincy-Larson-make-a-living-if-Free-Code-Camp-charges-no-tuition-and-he-is-not-doing-his-software-development-consulting-work’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

I’m not certain why this is happening, but it wouldn’t let me follow the links.

KoniKodes,
Thank you for your quick response & User Testing! Quincy Larson is a saint. I wish there were more people like him in the world! :smiley:

It was strange that the Quora Links weren’t working, I made sure I used the URL’s that were available to the public. It turns out I needed to add target="_blank" on all links due to the iframe sandboxing codepen uses to keep their pen’s secure! Ref: https://blog.codepen.io/2014/02/06/opening-links-pens/

I have updated all the relevant links so they all behave the same way! :smiley: They are operational now!

Thank you for your time & consideration,

Dan Stachlewski.

@dan-stachlewski Great layout and design! I like that you’re not selecting IDs in your CSS. Good use of HTML escape codes (&). Do you know about HTML5 Semantic Elements?

For me, the mobile view doesn’t work. I’m on a mobile device now so I can’t troubleshoot it. Could be my browser and may have something to do with the viewport meta tag:

<meta name='viewport' content='width=device-width, initial-scale=1.0>

Out of curiosity, why did you separate your header selectors like this?

h1 {
  font-family: 'Roboto Slab', serif;
}

h2 {
  font-family: 'Lato', sans-serif;
}

h1 {
  background-color: #005900;
  color: #FFF;
  padding: 25px;
  border-radius: 3px;
}

h2 {
/*   background-color: #FFF; */
  color: #000;
/*   padding: 25px;
  border-radius: 3px;
  border: 1px solid #EBEBEB; */
}

I think it’s more efficient to combine header selectors into one h1 and one h2.

For valid HTML, you’ll want to look at the Doctype and the Head and Body sections of FCC Beta. All HTML markup should have these elements.

Paste your HTML into this HTML validator. This will help you find some of the errors in your HTML markup.

Your <img> element needs to have an alt attribute. This element is technically incorrect without an alt attribute. Alt attributes are also very helpful for people who use screen readers. Here’s a wonderful resource where you can learn more about the importance of alt attributes.

Those are the bigger things I notice. :sunny: