How can I improve my landing page please

Code Feedback
1

https://codepen.io/OscarineB/pen/OJRdXxW
thanks, very much appreciate any feedback.

2

Hi there,

Nice work. Here are a few things I saw:

  1. If you run your html and css through a validator, you will see some errors you can fix. w3schools has a good validator.
  2. When you narrow the viewport, the Mini Guitars image isn’t responsive. It covers the text.
  3. You menu items in the navbar nicely stack when you narrow the screen. But it hides the image. You can use a media query to fix that.

I like the hover effect for your “enter your email address” button.

3

Hi cherylm,
thanks so much for the feedback. i very much appreciate it. Just how do it run my css through a validator please? thanks in advance for your help.

4

Here is the html validator
https://validator.w3.org/

The one in codepen for css is pretty good so you can use that one.
It is called css analyzer.

5

Thank you so much. :heart:

6

Hi jwilkins.oboe,
sorry to be a pain, how do i get the css analyser in codepen please. Thanks. I have tried the w3.org but it’s displaying error message.

7

For the css codepen analyzer

Screen Shot 2021-01-31 at 2.18.31 PM
Screen Shot 2021-01-31 at 2.18.31 PM986×582 56.3 KB

For the html validator you should see these errors.

Screen Shot 2021-01-31 at 2.20.29 PM
Screen Shot 2021-01-31 at 2.20.29 PM2454×1180 326 KB

You can ignore the messages for doctype,html and head because that is not required for codepen.

You would start with number 6
Element a not allowed as child of element ul in this context.

1 Like
8

Thank you very much. Very grateful for your help

1 Like
9

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

  • 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.
  • 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
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.