Personal Portfolio done!

Code Feedback
1

Hi guys! I have finally finished the last project for Responsive Web Design Certification. Would love to have some feedback!
Here is the link: https://codepen.io/rreiso/full/XWNGWmL

2 Likes
2

I like the look of your portfolio. Overall, it is very nicely done. A few little suggestions to tighten it up.

  • The hamburger menu needs to be a <button>. Right now it is not keyboard accessible. Make it a <button> and it will automatically become keyboard accessible. Also, because it controls the expansion of the menu, you should also be toggling the aria-expanded attribute.
  • It is awesome that you have screen reader only text for your social media links at the bottom. But don’t include the word “link” in that text. Screen readers will already announce that it is a link, so putting the word “link” in the text is unnecessary duplication.
  • The color contrast of the white text on light blue background is not quite enough to meet AA accessibility standards. Use the WebAIM Contrast Checker to make sure you have enough contrast.
  • I think you should make the keyboard focus outlines stand out more instead of relying on the browser defaults. I can barely see them for the social media icons as my browser (FF on linux) is using a light blue color that is very similar to your light blue background.
  • A big shout out for using em units in your media queries.
1 Like
3

Your page is good @RReiso :+1:

2 Likes
4

@anon38330656 thank you!

5

@bbsmooth, thank you for your as usual great feedback! I implemented the things you mentioned, the only problem I have is with focusing social media links. I set an outline on them, but I don’t want the outline to be visible once the links have been clicked. I tried:

.link:active,
.link:visited {
	outline: none !important;
}

but it does not help. I also tried using box-shadows but they were also visible after click. Any suggestions?

6

You can use :focus-visible to keep the outline from showing up when using the mouse (it will only show up when using the keyboard).

1 Like
7

Looks professional compared to mine.
https://codepen.io/DKPK/pen/QWEoKQv

1 Like
8

@amejl172 Your portfolio doesn’t pass all the user stories

See this:
Screenshot (79)

1 Like
9

Try it now, don’t know if this is correct

#welcome-section {
text-align: center;
font-family: arial;
color: WHite;
background-color: rgb(52, 38, 15);
height: 58px;
padding: 154px;
}

Need some automatic hight on it, only works when I look in editor view, then if I look in a different size it changes.

10

It’s still not passing all the user stories @amejl172

See this:

Screenshot (80)

1 Like
11

Somehow can’t get it to be

expected 388 to be close to 366 +/- 1

12

Try it now, it should work.

13

It’s working now

See this:
Screenshot (81)

1 Like
14

Hi @anon38330656 and @amejl172 !

I am glad you were able to resolve your issue but please remember to stay on track with the OP’s original post.

Thanks!

1 Like
15

@bbsmooth, awesome, thanks!

16

@amejl172 thanks, it just takes some practice, I’m still learning myself, you’ll get there!

1 Like
17

Congratulations ! It is very nice! I enjoy colors and layout very much ! Well done :ok_hand:

1 Like
18

@Beatrice , thank you!

19

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.