Webpage Feedback and tips needed

Code Feedback
1

Hello everyone!
I made my first webpage on CodePen. Please review this webpage, any feedback is highly appreciated.
https://codepen.io/darecoder/pen/OJRWaeb

I am new to web development so I would love to read any tips on making it better

2

Hi @Dare!

Congrats on finishing your first web page.

Two main things.

  1. Keep your css out of the html section. You want to get in the habit of keeping your html, css and javascript all separate. It makes it a lot easier to read that way.

  2. The text is a little hard to read because you have a bright background and white text. I would either choose a darker image or add a linear gradient over the image you already have.

Also do not use inline styles style="text-align:left;"

Hope that helps

3

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

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 1/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • 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.
  • All your styling should be external. Do not use internal styling and do not use in-line styling.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • Do not use the <br> element to force line breaks or spacing. That’s
    what CSS is for.
  • As mentioned, the contrast between the background and the text makes it hard to read.
4

Thankyou very much! I will look into gradient backgrounds.

5

Thankyou roma! Really appreciate it. The validator really helped me.