Hey I finished my first 5 first projects!

hey guys just finished my 5 first projects i’ll leave my portfolio here any criticisim would be much appreciated(on any project) thank you so much!

2 Likes

I don’t have time to look at your portfolio page and all four projects, so I’ll just comment on the portfolio.

  • As I narrow my browser window I get a horizontal scroll bar before I get to the break point.
  • When I reach the break point for narrower widths the projects get real small and only take up about 66% of the available horizontal space. They should take up almost all of the horizontal space so you can read the content in them.
  • The default font size at the narrow width is way too small (on my browser it is 10px).
  • Manually increasing the text size causes a few issues, such as the links at the top start to break out of their container. It also causes a horizontal scroll bar when there is no reason for there to be one. Make your page responsive to changes in view port width AND in text size by using ‘em’ values for your CSS break points.
  • The brown text on blue background doesn’t quite have enough color contrast with the background to be accessible. You can check this at
    https://webaim.org/resources/contrastchecker/

ohh wow i will start fixing them asap! thank you so much for the help. i had trouble understanding 2 things you said if you don’t mind guiding me a little bit more.

Manually increasing the text size

how do you do this?

The default font size at the narrow width is way too small (on my browser it is 10px).

i don’t understand very well what you are trying to say here. the default font-size is 10px for the html but then i changed everything in the code. i’m sorry i’m still learning a lot of stuff but i’m struggling to understand what this part means.

thanks for your help and i hope you are able to answer thanks!

Using Firefox, you can manually increase the text size by going to the ‘View->Zoom’ menu and activating ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button. There is a zoom text only extension for Chrome that will do the same thing.

Yes, you do have the font-size set to 2rem for wider view ports but you have a CSS break point at max-width: 600px that sets the font-size for #all-projects to 1rem (which would be 10px).

got it im working on it! thank you so much! i appreciate the help so much!!

Your survey form projects looks awesome, my suggestion is to give some left padding to the input field and also the text area (maybe about 10px).

input {
  padding-left: 10px;
}
1 Like

@tdozerogames, some things to revisit;
tribute

  • The test script should be included, with all tests passing, when you submit your projects.
  • Don’t use <br> to force line breaks or spacing. That’s what CSS if for.
  • Review the lesson about giving meaningful text to links.

survey

  • same thing re: test script
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for HTML misses things which is why I recommend W3C
    • The one for CSS is good. Use it, there’s something to clean up.

product

  • Same thing re: test script
  • Same, don’t use <br> to force line breaks or spacing
  • Same, use codepen’s analyze tool in CSS

tech doc

  • same re: test script
  • same re: analyze tool in CSS
  • Since you coded the same two line code but it came out one line I suggest you nest multi-line <code> snippets in <pre> </pre> tags in HTML to preserve whitespace and line breaks. Or you could do
code {
  white-space: pre;
}

in CSS and skip the <pre> tag in HTML.

portfolio

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 11/12 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There’s a small HTML coding error you should address.
1 Like

awesome ill start doing this tomorrow morning! thanks!!

ohh wow this is very thorough i appreciate the help and i’ll get down to this ASAP. Thank you so much!