New to this and need some help please

Code Feedback
1

Hello -

I am VERY new to all of this. I have never coded in my life (I actually enjoy it so far) and decided to teach myself through free code camp.

Anyways, I thought I’d reach out and get some feedback for my technical documentation page. Here’s the link: https://codepen.io/sarahchris/pen/gdQBjX .

All the test passed, but I still have to refer back a lot to the sample projects, and do a lot of research to understand better (especially for CSS). HTML I am picking up a lot quicker, but CSS is a bit of a challenge.

Anyways, any tips, feedback, help, etc is appreciated. Thanks!

2

Good job with:

  • having the menu as a side bar when the screen is wide, and having the menu on top when the screen is narrow.
  • Having the wiki link open in a new page
  • having code show in code formatting.
  • passing all the tests!

One suggestion I would have is taking the Flexbox class on Udemy to improve your CSS for the Navbar even more: https://www.udemy.com/share/10004WA0Med1xRQXg=/ or even just playing the Flexbox coding game at https://flexboxfroggy.com/ . My CSS for my FCC projects felt much easier after taking that class.

3

I completely agree with you. I still refer back to sample projects, but not as much as I used to before. I think you just need to practice after practice.
For me, I try it with the knowledge I have and if I get stuck, I look up on google instead of going to sample projects. But, if I get completely stuck, I kind of get an idea from the project to make my own.
Your page looks very neat! GJ

4

I will check these out. Thank you!

5

Thank you! Appreciate the the tips and feedback.

6

Look pretty good, here are some things i found.

  1. Check your semicolons on the html/body selector.
Summary

You have two semicolons after font-family and are missing the semicolon on background-color.

  1. On the code selector you have an invalid display value.
Summary

You have declared display: in-line block; it is display: inline-block;

  1. You need to bring in the Roboto font, remember to select the extra font weights you want to use (you are using thin/100 for your header).
Summary

Click “Select this font”, click the black header of the box that appearers, go to customize and select the font weights you want to use. Now go back to embed and copy the link. Go to codepen, click the settings button and paste the link into the "Stuff for " box.

  1. The font-weight: thin; on your header isn’t actually working, font-weight: 100; is the equivalent (this will only work after you have imported the Roboto font).

  2. Personally I’m not super crazy about the pointer for the links. It may seem kind of cool, but from a UX perspective it can confuse the user. The crosshair really implies a marquee tool, i.e. a box selection tool.

  3. I would really like to see at least one “code box”, look at some of the other campers projects for examples of how they might look and can be implemented.

Anyway, good job on finishing the assignment.

7

This is helpful feedback. I will work on these.

Thank you!