Product Landing Page Feedback project

https://codepen.io/yellesh/details/ZEBmxWQ
Can you give feedback on my project

Your page is good @kumar7 but few things to revisit

  1. Run you through W3C validator
  2. Change your page’s font to sans-serif

Thank you very much.
First time i am using W3C validator. It if useful to identify mistakes.

Yes, it is useful and did you change your page’s font to sans-serif

And I recommend using validate by direct input feature because codepen doesn’t allow to access pens by other websites you can simply copy & paste your html code into the validator

Thanks
I just changed font family to sans-serif in css
here is the code
*{
font-family: sans-serif;
}

https://codepen.io/yellesh/pen/XWNBvXG

Now its looking good :+1:

thanks
can you check one more problem that i am not able to rectify
When I click on the internal page links navigator it is not showing 10%off only today, which is going behind the nav-bar. Actually i added this line (10%off only today ) otherwise cycle name is going behind the nav-bar.

I don’t know why it’s happening

May be because i did not use position : relative / absolute values
i think

Try it and see what happens

Use position: relative; or position: absolute;

In a large viewport the horizontal lines become too wide.

Screenshot is Edge on MacOS running fullscreen on 5k retina.

@cehrlich not only on Mac even the lines become too wide on windows and android and it looks your screenshot is about the old link see the new link also but still the line is extended in the new link also


Windows 10
display: Ultra HD

Your page looks good @kumar7. 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, with all tests passing, should be included when you submit your projects.
    • Your page passes 15/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
    • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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.
    • For instance links to fonts go in the box labeled ‘Stuff for <head>’
  • 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.
  • Change the cursor to a pointer when hovering over the subscribe button
  • Check that the user has entered a valid email addr. Throw an HTML5 validation error if not.
    • You learned to do this when coding the survey form

Thank you very much @Roma

1 Like