My Tribute Page about Nikola Tesla

Code Feedback
1

Hi campers! I’m new here and I just wanted to check that I am on the right path.

I viewed the works of different people out there and they have used different techniques to implement the same concepts that were required by the task.

In addition, after I finished the task, I checked the original code of the task as well and I noticed many differences between mine and the default one.

So… I’d love to hear your reviews. Overall, I spent 4 hours on the task.

2

Hi @gantoleba,

  • Do not use lower levels to decrease heading font size:
<h1 class="text-center">Nikola Tesla</h1>
   <h3 class="font-italic text-center" style="margin-bottom: 20px">The greatest geek who ever lived</h3>

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

----

Is better not use the style attribute:

<h3 class="font-italic text-center" style="margin-bottom: 20px">

Because, you have multiple styles sources (That’s make the page more difficult to review.):

  • The CSS tab
  • Every element on the html with the style attribute

MDN documentation:
style - HTML: HyperText Markup Language | MDN

The style global attribute contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes.

---
  • Target blank vulnerability
<a href="https://www.freecodecamp.org/gantoleba" target="_blank">

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;

Cheers and happy coding :slight_smile: