Beta Personal Project Complete

Personal Portfolio

Ive switched over to github for making my site but just copied and pasted it into codepen to make sure it passed the tests.

If anyone has any input I would appreciate it. Its fairly bare at the moment.

1 Like

I think the Contact section has too much padding, and the projects section could use just a little more padding on the bottom so the show all button isn’t resting against the section change.

A couple of the images aren’t loading for me in your projects section. Also those images could use a lot of optimization. Since they wont ever be displayed larger than 180x280 resize them to that size and save them as jpgs that should bring you from hundreds of KBs each to 10-15kb each. You could run them through an image optimizer but I’m guessing at that size it wont be worth the hassle.

If you do find yourself needing quick image optimization there are online tools you can just drag and drop the file in like tinyPNG.

Strange it does for me both on codepen and my github.

I have found you have to click towards the right of the About link as the Test Suite selection menu covers the majority of it but is often hidden. If you click on the “t” in About, it works perfectly and I would assume it would normally, without the test suite selection

1 Like

@angelinalblyth This is a great start! :sparkler: I like the colors and the “Show All” button linking to your CodePen profile. Here are some of my thoughts for improvement:

  • Color Contrast: Even though I like the colors, they don’t meet the accessibility standards for sufficient color contrast. I use Firefox and the WAVE and the aXe extensions to test for color contrast and other accessibility issues.

  • Document Outline: It’s my understanding that it’s still best to only use one h1 element per page. I think this has something to do with browsers not implementing the document outline algorithm that takes into account the new HTML5 sectioning elements. Here’s MDN’s statement about this problem at the top of their Using HTML sections and outlines page:

    Important: There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.

  • Qualified Headings: According to CSS Lint, it’s not a good idea to qualify headings like .about h1:

    Heading elements (h1-h6) should be defined as top-level styles and not scoped to particular areas of the page. The headings are considered to be built-in objects in Object-Oriented CSS, and their appearance should be consistent across an entire site. This allows those styles to be reused across your site for better visual consistency and performance and easier maintenance.

    I think the goal is to create standard heading styles for your pages so they can be reused as needed. I’ve also qualified heading elements in the past. Instead, if I need a specific styling for only one heading element among many, I’ll add a new class for that one heading element, something like .section-header and add the styles I need to that class.

  • Contact Links on Narrow Viewports: The contact links aren’t fully responsive:

    This can be fixed by adding display: inline; to the .contact-details class in the max-width: 367px media query.

  • Semantic HTML5 Elements: Even though what you currently have works well, the About, Projects, and Contact sections are excellent candidates for the <section> HTML5 element. Using <section> helps to make the HTML markup a little easier to read and understand for those who may be looking at the code. HTML5doctor’s post on the section element has some good information to consider.

Those are the big things that I see. Nice work here! You successfully completed the final project for the Responsive Web Design certificate. :sunny: