My tribute project completed

Hi all,
this is my very first project in anything. i’m so new to the coding game but so excited. Feedback is welcome. thanks.

why is my pen saying screenshot coming soon, it did it before.

Hi @marciab21,

<a href="https://www.freecodecamp.org/marciab21" target="_blank">Marcia Burgess</a>
  • Target blank vulnerability

MDN documentation:

<a>: The Anchor element - HTML: HyperText Markup Language | MDN

Note: When using target, consider adding rel=“noopener noreferrer”
to avoid exploitation of the window.opener API.

About rel=noopener

TL;DR If window.opener is set, a page can trigger a navigation in the opener regardless of security origin.

Target="_blank" - the most underestimated vulnerability ever

People using target=‘_blank’ links usually have no idea about this curious fact:
The page we’re linking to gains partial access to the linking page via the window.opener object.
The newly opened tab can, say, change the window.opener.location to some phishing page. Or execute some JavaScript on the opener-page on your behalf… Users trust the page that is already opened, they won’t get suspicious.

How to fix
Add this to your outgoing links.

rel="noopener"

Update: FF does not support “noopener” so add this.

rel="noopener noreferrer"

Remember, that every time you open a new window via window.open(); you’re also “vulnerable” to this, so always reset the “opener” property

var newWnd = window.open();
newWnd.opener = null;
  • Do not use lower levels to decrease heading font size:
<h1>Xena</h1>
  <h5>Xena the Lesbian Warrior</h5>

MDN documentation:
<h1>–<h6>: The HTML Section Heading elements - HTML: HyperText Markup Language | MDN

Do not use lower levels to decrease heading font size: use the CSS font-size property instead.Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.

HTML Standard

h2–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. Instead use the markup patterns in the §4.13 Common idioms without dedicated elements section of the specification.

Common Idioms
HTML Standard

  • You can use an address element (more descriptive)
<footer>
  <p class="text-center">coded by .... Marcia Burgess ...</p>
</footer>

MDN documentation:
<address>: The Contact Address element - HTML: HyperText Markup Language | MDN

The HTML <address> element supplies contact information for its nearest <article> or <body> ancestor; in the latter case, it applies to the whole document.

Usage notes

  • To represent an arbitrary address, one that is not related to the contact information, use a <p> element rather than the <address> element.
  • This element should not contain more information than the contact information, like a publication date (which belongs in a element).
  • Typically an <address> element can be placed inside the <footer> element of the current section, if any.

Example

 <address>
    You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
    If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
    You may also want to visit us:<br>
    Mozilla Foundation<br>
    1981 Landings Drive<br>
    Building K<br>
    Mountain View, CA 94043-0801<br>
    USA
  </address>

Cheers and happy coding :slight_smile:

thanks for the feedback, I’ll go ahead and fixed this.

1 Like

okay its done, did i do it correctly?