Product landing page- Wheelhouse coffee

Code Feedback
1

Hi,
Here’s my product landing page- https://codepen.io/athena20/pen/LYpdLGb

Please share your feedback on things i can add/improve on.

Thanks!

2

The website is not fully optimised for mobile. Try loading it on your phone and you will see what I mean. Other than that, the colour scheme is nice and is a great start.

1 Like
3

Thank you! yes i will check that out.

4

Your Project Is Awesome but you should complete all the User Stories Given By freeCodeCamp

1 Like
5

Your page looks okay @Athena20. 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 6/16 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’ve got elements messed up. Everything the browser renders should be in the body element and you’ve got the header element outside of it. Also, that’s an odd doctype.
  • When you’ve cleaned up the above, run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.
  • Check that a correct email addr has been entered when clicking the submit button. Throw an error if not.
    • you learned how to do that when you did the survey form
  • change the cursor to a pointer when hovering over the submit button
6

Hi,
Thank you for all the feedback. I’ve made most of the edits and passed 15/16 tests.
I don’t understand why I’m not passing:-

5. When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.’

The .nav-link with href="#source" is not linked to a corresponding element on the page : expected null to not equal null

the href=“source” is linked and i am able to click on the link and go to the location.

Lastly, can someone tell me why my flexbox at the bottom is showing on the next line?

Thanks!!!

7

@Athena20, I don’t see any edits in the pen you have linked. Did you create a new pen? If so, please give the new link to it.

8

Hi ,
Here is the link- https://codepen.io/athena20/pen/KKVdwzg

9

It’s because you’re not telling it where to go…none of your nav-links go where they’re supposed to go. Review this lesson

As an aside, you can edit the pen. You don’t have to create a new one each time.

10

Yep got it!!! thank you!!!