Portfolio Project Round 2!

Code Feedback
21

Different version actually, I went into your codepen and search for the latest one but this one is completely different.

Munch more visually appealing :slight_smile:
Iā€™d just add more vertical space between the elements and the containerā€™s margins. Also on the left hover links, the freecodecamp logo is difficult to see due to the background (on the darker one is better).

io_pleeseno_pen_XONpqq
io_pleeseno_pen_XONpqq1920Ɨ979 140 KB

if you reduce your screen to 930px, the menu item ā€œcontactā€ is hidden on the right, you should increase the query to something like 1000px

1 Like
22

Iā€™ll definitely change those both. Thank you for nothing them! I decided to do the mobile-first, but instead of doing one huge section of mobile and one huge section of media queries, I blocked them up section by section with their own queries. I actually got a lot more work done that way

1 Like
23

Because you said multiple media queries, I recall that they may have an impact on the performance of the page. Hereā€™s homework for you and me:

24

The new version is pretty nice. I will say personally Iā€™m getting a bit of sensory overload from the page. I feel like there are too many things competing for attention.

I would tone down the color usage. Maybe just use the yellow as an accent color, on headers and links, not all the text.

I would drop the extra color on the header and only use the yellow.

I would see if you can find a different hover color for the buttons. I actually do like your use of that same color for the hover on the social links, but not for the big buttons hover color. Colors are obviously a matter of taste and very subjective

Be mindful of the colors your images have and how they work with the colors on the page. The second image is really good because it has both similar and contrasting colors but the first image is not that great, color wise. It is competing for attention more than complementing. Maybe desaturate it a bit. You can also try giving it a slight blur to put it more in the background.

Staying with color, using transparency to make colors is great. But, I would color pick them so you know what colors they actually are (like the light gray made from transparency is #859AA5).

rgba goes from 0 to 255, if you give higher numbers the computed style will just clamp down the numbers to 255 (you have background-color: rgba(999,999,999,0.5);).

I feel you need more vertical space, things are a little too squished together. Remember whitespace is your friend.

I would increase the font size on the headers. More contrast in sizes gives better hierarchy, there is a reason why headers have the default sizes they do.

Sorry for the wall of text.

1 Like