My Portfolio Page - Steal It!

Code Feedback
2

@dayashton This is really nice! :tada: The design looks great. The content looks great. The code looks great. Overall, I think this is an impressive portfolio! I know you may not be ready for this level of feedback, given that you might not be finished with the project yet, but I wanted to share these thoughts with you in case they help as you continue working.

  • In your homepage.css file, you have these selectors: hr.style-two and h2.display-4. These are qualified selectors (Source):

    Another way to increase portability is to not qualify selectors. A qualified selector is one like ul.nav {} or a.button {} or div.content {}.

    Qualified selectors are bad because they reduce efficiency (more checks than we really need) but—more importantly—because they tie us to specific elements. We can’t now use that .button class on an <input> or a <button>, for example. We can’t apply .nav to an <ol> to make a breadcrumb.

  • I see some inline styling (style="width: 20rem;"). This is generally something to avoid, when possible.

  • Your img elements have alt attributes, however, they’re not descriptive of the images so they’re not helpful to search engines and screen readers. Here’s an excellent resource on alt attributes if you want to learn more:

    The alt attribute should typically:

    • Be accurate and equivalent in presenting the same content and function of the image.

    • Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.

    • NOT be redundant or provide the same information as text within the context of the image.

    • NOT use the phrases “image of …” or “graphic of …” to describe the image. It usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

  • On the portfolio page, you skip heading levels going from <h1> to <h4>. Here’s some info on why that’s not the best practice:

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

    I think having a different <h1> for each of your pages is a good idea. You may want to add other heading levels to your Contact and About pages.

  • I’m not sure if this site will pass the FCC Beta test for the portfolio project. I can’t edit the code on CodePen, so I can’t test to see if it passes. However, you can link to the following script in your page(s) to test it yourself: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js

  • As @Diego_Perez points out (rightfully), there’s a current vulnerability using target="_blank" and an easy fix:

Your work is really impressive and I’m learning a lot from it. Thank you for sharing! :sunny: