My Portfolio by Josue Guerrero

[camper]

@Yiosh Great work! I like that you’re hosting the site on GitHub Pages, that you only used native HTML and CSS, your HTML structure is valid, and you’re using HTML5 semantic elements. I also like your font choice. Here are some thoughts for improvements:

• Looks like you accidentally left in some Git merge conflict text on lines 137 and 141. That’s probably a common mistake (I can see myself making that mistake more than once in the near future), however it shows that you’re using and understanding version control.

• I see that you have two <h1> heading elements within the same section. Generally, it’s best to only have on <h1> per page (Source):

  • Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

  • 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.

  • You should consider avoiding using <h1> more than once on a page. See “Defining sections” in Using HTML sections and outlines for more information.

• You may want to add the following script just before your </body> tag in order to see how the page does with the FCC Beta test for this project:

  <script type="text/javascript" src="https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js"></script>
  

• As @Diego_Perez correctly points out, there’s a vulnerability visitors are open to when using target="_blank" and a relatively easy fix:

  @Diego_Perez

  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

You’re using relatively complex CSS selectors, so that shows you have a strong understanding of CSS. I learned from them. I also learned about <meta http-equiv="X-UA-Compatible" content="IE=edge">. Thanks for sharing!

EDIT: I noticed some of your CSS uses a naming convention that’s also used by BEM. Is that intentional or coincidental? I don’t know anything about BEM, but I’m curious to know if that’s the CSS methodology you’re using.