Project landing challenge

This challenge was kind of tough and i will really appreciate your feedback

https://codepen.io/jude-create/pen/LYZqXvJ

thanks

1 Like

Hey @jude-create!

I think your page looks good.

A few things.

  • Right now you are only passing 5 test out of 16. So I would first focus my attention on passing the rest of those tests.

  • There are a couple of errors in the html and css. Run your code through the html validator to fix those issues.
    https://validator.w3.org/

  • In codepen, you do not need to include the doctype, head or html tags. If you need to include stuff for the head then place it in the html settings.

1 Like

@jwilkins.oboe thanks really appreciate

Your page looks good @jude-create. 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.
  • 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 and address the issue(s).
    • (The one for HTML misses things which is why I recommend W3C)
  • overflow-x: hidden; will completely hide anything that extends outside its container element horizontally. It’s recommended to not do this, and refactor your CSS to be more responsive otherwise it is possible for your site to appear to be missing content.
    • see the screenshot of missing content. there is more than just this one where content is missing
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

At the first instance, your html skills are good but you need to work hard on your css skills.

@Roma and @IAmRC1 thanks currently working on it