Animated Technical-Documentation CSS+HTML

I Built This
1

Hi guys, Please check out my Technical-Documentation page, I certainly took my time to make the design responsive.
Feedback are always welcome.

2 Likes
Technical documentation page scrollbar not appearing
2

Hi @skyeparagon!

I think your page looks good.

Remember to keep the test suite in the project.
Right now you are passing 7/16 user stories.

3

It was 16/16, But after I added media queries the test result changed so I removed it entirely, lol. Thanks for the feedback @jwilkins.oboe.

4

But you need media queries, remember RWD R stands for Responsive

5

You got it wrong codely, I removed the test not the queries, queries are my babies mate.

6

Oh!

Sorry for the misunderstanding.

7

lol, its all good codely.

1 Like
8

That looks cool! Well done! I would work a bit more on your footer.

The FB separation bar is bigger than the others:
image

The hover effect seems to collapse on the separation bars
image

1 Like
9

thanks for the feedback @eldave

10

Your page looks good @skyeparagon. Some things to revisit;

  • As mentioned, 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 7/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.

The tests failing have nothing to do with adding a media query. The same tests fail with and without a media query.

  • 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 and address the issue(s).
      • There are invalid hex colors in a few places
    • (The one for HTML misses things which is why I recommend W3C)
  • You should validate the form is filled correctly and throw an error if not
    • you learned to do this when you made the survey form
  • The submit button is not part of the form and therefore wouldn’t submit the user info
  • Change the cursor to a pointer when hovering over the submit button
  • Do not use in-line styling, all your styling should be external
  • There’s no focus when navigating with the keyboard. User’s cannot tell where they are on the page.
  • overflow-x: hidden; will completely hide anything that extends outside its container element horizontally. It’s recommended to not do this, and refactor your CSS to be more responsive - otherwise it is possible for your site to appear to be missing content.