Technical Page (WiP!)

Hey guys,

TL:DR; Here’s my technical page. It’s not quite finished. I welcome all feedback.

First forum post here. Let me start by saying I’m hooked. I’ve been coding for exactly 2 weeks now! With COVID I have been fortunate enough to be working at home and practice coding every chance I get. I really feel like my knowledge grows each time I get behind the keyboard.

I have been plucking away at the projects but haven’t been too impressed with what I’ve come up with aesthetically so far (don’t judge my ugly stuff!) but with the technical page I wanted to try a little harder.

It is definitely a work in progress as I haven’t added any media queries or custom fonts and I’m not set on the design just yet.

Without further ado :

I welcome ALL feedback. Like I said I’m brand new and have a thick skin. I think being so new at this means I need to stop any bad habits before they form!

Thanks in advance for the feedback.

1 Like

Hey, I’m glad you’re having fun. This can definitely be addictive!

Just a few suggestions:

  • It looks like the entire page is covered in a haze and thus hard to read (at least for some people). It’s because the contrast between the font color and background color is not big enough. You can check the contrast at
    https://webaim.org/resources/contrastchecker/
  • Right now your page requires a mouse to navigate through the menu items (i.e. you have to mouse over the red bar to get the menu to pop out). One of the things to keep in mind is that some people don’t use a mouse but rather the keyboard, so your page needs to be able to function for keyboard only users. In this case, there needs to be a link/button (perhaps the white arrow) that allows a keyboard user to open the pop out menu so they can see the links as they are tabbing through them. I would argue that it would help mouse users as well because it is too easy to move your mouse out of the menu and have it close back up when you didn’t intend to.
  • It sounds like you haven’t worked on responsiveness yet, so I won’t critique that right now. When implementing it my suggestion would be to narrow your browser as far as it will go and style the page so it looks good. This will be your base CSS. Then slowly widen the page and find a good spot where you feel you have enough horizontal room to rearrange the elements on the page for a wider view port. That will be where your first media query break point goes, and then style on that break point for a wider screen.
1 Like

I didn’t consider the keyboard only user. I’ll definitely try to implement your solution to that problem today. As far as the color scheme goes I would have to agree as well. I saw the one I’m using on a sample website but it just doesn’t work well with this project. I’ll definitely take that one back to the drawing board.

Thank you for the feedback. Much appreciated.

Hi @martzehh, some feedback;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • Your page passes 2/16 user stories.
    • The test script should be included, with all tests passing, when you submit your projects.
  • Run your HTML code through the W3C validator.
    • There are some coding errors you can address. Catch 'em early.