Product Landing Page Feedback - wavyhix

[wavyhix]

Hi :),

Could I please have some feedback on my product landing page please?

Specifically, I’m looking to improve the structure of my code and I’m wondering if I could have done anything more efficiently.

Also, I’m not sure how to pass the test ’ The navbar should always be at the top of the viewport.’ Because it already is but its not passing

Thanks.

[DrantDumani]

In times like these, your dev tools come in handy.

While your <ul class="nav-list"> element is fixed to the top, your nav element is not.

In the CSS for your image element, you’ve made use of the left and top properties. However, left, top, bottom, and right have no effect on non positioned elements and you haven’t set any positioning for your img element at all.

When you notice that you’re repeating selectors and properties in CSS a lot, you have two options. You can either group your selectors together, like so:

.class-1, .class-2, #id-1 {
   font-family: 'Bebas Neue', cursive;
}  

Or, since most child elements inherit CSS properties from their parents anyway, you can simply attach the property to be a parent element and let it trickle down into said parent’s child elements.

body {
   font-family: 'Bebas Neue', cursive;
}

[Roma]

@wavyhix

I’m not sure how to pass the test ’ The navbar should always be at the top of the viewport.’ Because it already is but its not passing

• 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.
    The failing message says

The navbar should always be at the top of the viewport.
#header or one of its children should be at the top of the viewport : expected 140 to be close to 0 +/- 15
AssertionError: #header or one of its children should be at the top of the viewport : expected 140 to be close to 0 +/- 15

• While visually it looks like the the nav is at the top you have code that prevents it.
  • in the body declaration you have padding-top: 140px;
  • there is nothing in your code that makes the header stick to the top
  • when I correct these all tests pass
• Run your HTML code through the W3C validator.
  • There are HTML syntax/coding errors you should be aware of and address.
    Since copy/paste from codepen you can ignore the first warning and first two errors.
• A user tabbing through your page will have a hard time telling what’s in focus. This is a bad UX.
• Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Reference MDN Docs
• You code h1 through h6 but then code to make font-size the same. You can make do with h1- h3 so you don’t have to change every time.

[wavyhix]

Thank you! That is incredibly helpful stuff. Everyone’s comments on this and my previous projects have already made me feel a lot more confident :).