Product Landing Page & Technical Documentation Page Feedback

Code Feedback
1

Hi guys, kindly check out my product landing page https://codepen.io/chizycodes/full/jOqbLZp

and technical documentation page https://codepen.io/chizycodes/full/jOqbobX

Do give your feedbacks.

Thanks.

2

Hi!

Generally your page looks nice (Product Landing Page), I just have to mention couple of things :slight_smile:

  1. At the moment there is one test failing, did you find it?

  2. Inside the footer where you using © you need to terminate it with a semicolon, like so ©

  3. In the pricing section:

button element cannot appear as a child of the a element

<a href="#" ><button>BUY NOW</button></a>

Use either a element and style it like a button or use just a button :slight_smile:

  1. In CSS, line 71, padding-bottom doesn’t have auto property.
    padding-bottom: auto;
    Here are all the available properties of padding-bottom.
1 Like
3

Your pages look good @Chizycodez. I would say try and come up with something original rather than trying to duplicate the sample pages.
Some things to revisit;

Prod Landing

  • Don’t use <br> to force spacing or line breaks. That’s what CSS is for.
  • Check that the user has entered a valid email. Throw an error if not. You learned how to do this when you did the survey form.

For both of your pages, 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 be aware of and address.

tech doc

  • 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’s something to clean up.
    • The one for HTML misses things which is why I recommend W3C
2 Likes