Portfolio Feedback - Thanks!

Hey Everyone,

I was wondering if I could get some honest feedback with the portfolio that I created. Please don’t be afraid to give me things that should be changed - I’d like to learn more and more every time I do a project!!

Link:

Thanks!
Laura :slight_smile:

1 Like
  • buttons on hover should change background colour (right now text is underlined)
  • images are low quality (looks bad on my screen) and there is too many of them (use just one at the top)
  • use container (instead of container fluid) as you don’t have enough content
  • your portfolio image screenshots need to be larger, perhaps use bootstrap card and provide some content

@lauracpope This is a great start! :slight_smile: Here are some thoughts for improvement, in addition to the suggestionns above from @michal9909:

  • Every img element needs an alt attribute (http://webaim.org/techniques/alttext/):

    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.

  • You’re using inline styles like (style="height:123px; width:200px; margin: 20px;") instead of putting these rules in the CSS file. Here’s a source with more info about not using inline styles.

  • I think you may be missing an ending </ul> tag around lines 26/27 of your HTML. I found this by pasting your HTML code into this HTML Validator. I use this validator all the time to find the errors I make in my HTML markup.

  • I added the FCC Beta test suite to your CodePen by adding https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js as an additional JavaScript resource. When I ran the tests, the code only passed one of the twelve tests. I know this isn’t mentioned in the current curriculum, but since the beta curriculum is going to be default relatively soon, I thought it might be helpful to suggest checking your code in the test suite.

  • You’re using name attributes like <a name="home">. I think that used to be the way to do in-page anchors in HTML4, but it’s since been updated in HTML5 to use the ID attribute like this <a id="home">:

    name HTML 4 only, Obsolete since HTML5
    This attribute was required for anchors defining a possible target location within a page. In HTML 4.01, id and name could be used simultaneously on a <a> element as long as they have identical values.

    Usage note: This attribute is obsolete in HTML5, use the global attribute id instead.

    (Source)

  • You have some missing and duplicate heading levels. Specifically, you have multiple h1 elements and you went from <h1> to <h4>:

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

    (Source)

Those are some of the bigger things I noticed. Maybe others can help with the rest. Keep working hard! :sunny: