Just finished my first ever project, any feedback would be great!

Code Feedback
1

I don’t have any outside experience with code or anything so I definitely still have a lot of things to patch up. If anyone could help me find those holes to fix that would be appreciated!

1 Like
2

Hi @Gonzalo07!

Welcome to the forum!

Congrats on finishing your first project.

A few things.

  • Remember to include the test suite in your project. You are not passing two of the tests
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

  • Run your code through the html and css analyzers. There are a few errors that need your attention.

  • You are hard coding everything in pixels but the page is not responsive. Try using percentages for width and rem or em for font sizes.

  • The boxes for the content are really large and creating a horizontal scroll.

    resize
    resize2552×1100 391 KB

I would resize these boxes to be smaller.

Hope that helps!

Happy coding!

3

Hey @Gonzalo07. This looks good. But, this project is creating a horizontal scrollbar as @jwilkins.oboe said. Also, I noticed that your project is not responsive. Remember, this project is for RESPONSIVE Web Design.

Anyway, good job. The overall style is good. Keep it up!

4

Welcome to the forums @Gonzalo07. Your page looks good. Some things to revisit;

  • 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 8/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • mentioning because you have elements out of order. Everything the browser renders belongs in the body element.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • 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 CSS is good. Use it, there are some duplicates to clean up.
    • (The one for HTML misses things which is why I recommend W3C)
  • Do not use in-line styling. Use external styling for everything.
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links.
  • Make your page responsive. Remember, the R in RWD stands for Responsive.
    • Your page starts out excessively wide
  • Side note: You’ll have an easier time with responsiveness if you use relative units like percentages, em and rem units.