Product Landing- page

Code Feedback
1

Hello everyone.

Here is my product landing page. All feedback is greatly appreciated. https://codepen.io/berubenic/pen/LYGwvvg

Thank you!

2

Hello @berubenic!

Good job on your project. A couple things on the mobile side you could look into fixing.

  1. the navbar link and title are out of place. Here’s what it looks like on my iPhone.

    image
    image1242Ă—2688 326 KB

  2. The video stretches down the screen. To keep its aspect ratio I would change max-height:auto; to just height:auto;.

    image
    image1242Ă—2688 435 KB

  3. The pricing are seems to have a bit too much padding causing the content to appear squished towards the middle. This may be what you were going for however if the bullets were single words. If not maybe remove some padding.

    image
    image1242Ă—2688 375 KB

Also all of the <head> data should go in the head section of CodePen. It is located under settings>html. There will be a block call “stuff for head”. In CodePen the html box you are typing into is actually the <body> which also means body tags aren’t required.

Overall it’s a really nice page.

1 Like
3

Thank you for taking time to review.
I made the mistake of making the page for desktop first and only thinking of mobile at the end. I will fix these issues.

4

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

  • 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.
  • Check that the user has correctly entered a valid email addr, give an error if not.
    • You learned to do this when you did the survey form.
  • 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. You’re doing HTML5.
5

@Roma Thanks for the feedback. I got lost on CSS on this one… I put it up for feedback before reviewing it myself properly. I’m revisiting my first projects before heading in the portfolio.

I should take the habit of running my code through the validator.

Are you saying I’m not suppose to use html5? :thinking:

6

No, I’m saying you are using HTML5. Running your code through the validator will show you an error. It’s because that’s now obsolete in 5 and you need to do it in CSS.

7

Oh okay. Thank you for pointing that out. I’ll have to read up on that.

8

Just to be clear, I’m talking about the frameborder attribute error. It’s an easy enough fix.
I didn’t look at the aria warnings. I’ll leave those to you if you want to investigate. You can probably ignore them for now.