Please provide your suggestions about my Portfolio page

[debu2code]

I just finished my Portfolio page project. Took me almost 25 days. Though I had a trip to Dalhousie, Dharamshala for 10 days, still I feel I should’ve finished sooner.

Anyway, dear campers, please take a look at my page and suggest any improvement you think is worthwhile.Here’s the link-

FCC Project - Portfolio Page

[dumbsurfer]

looks great! how many hours per day did you work on it?

[debu2code]

Thanks @dumbsurfer. I’m learning to code after my day job. So I could not manage more than 1 hour a day, maybe.

[debu2code]

Do you mean the navbar buttons @camperextraordinaire ? I’ll try to stop it.

[dumbsurfer]

thats great work! glad you where able to keep it up and see the project through. I think that says alot about you. Its easy to get frustrated with coding. Your page came out great!

[camper]

@debu2code This is great! I like the design and layout. I also like that you comment your code as it makes it easier to see what’s going on at a glance. Here are some thoughts:

• One thing you may want to do is add the FCC Beta test script (https://rawgit.com/freeCodeCamp/testable-projects-fcc/master/build/bundle.js) to your pen’s JavaScript section to see the changes you’ll need to make in order to pass those tests. Even though it’s technically a different project, I found it helpful to see the way FCC wanted me to structure my markup compared to the way I chose to do it.

• You’ll want to paste your code into the HTML Validator as there are a few errors you’ll want to know about. Most notably, in my opinion, is the error concerning nesting a button element within an anchor element. Here’s a StackOverflow answer that goes into this in more detail.

• Looks like you skipped headings from <h1> to <h3>. Here’s what Mozilla says about that:

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

• @Diego_Perez likes to point out (rightfully) that there’s a current vulnerability using target="_blank":

  @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

I think, overall, you did very well on this page. When I think about someone being able to go through FCC and create a page like this, I am impressed.

[debu2code]

That’s a ton of new information for me. I’ve clipped the links to evernote for reference. Thanks @camper.