Any recommendation for cleanup/best practices

So I just completed the Responsive Web Design course and I want to be solid with HTML and CSS before moving on to JS. This is the first project “Site” I put a lot of focus on to familiarize myself with Flex and Grid. Any recommendations for Styling, Code Structure, ETC. is very appreciated. I do plan on working on the responsive aspect here shortly as well.

Here’s my code: https://codepen.io/PretzelDracula/pen/wvMwxaB

Is this the FCC personal portfolio?

  • 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.
  • 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.
    • mentioning because you have elements out of place. The head element does not belong in the body element.
  • 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.
  • 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 HTML misses things which is why I recommend W3C
    • The one for CSS is good. Use it, there’s something to clean up.
  • you have a link to a picture in the header. img should most always have the alt attribute. You don’t, I see a broken link with nothing to tell me what it is. Also, none of us have access to your Google acc’t so the picture will not display. You need to find somewhere else to host it.
  • Don’t use in-line styling. All you styling should be external.
  • instead of running your projects in the portfolio, provide a link to them and let users see them full screen
    • Codepen creates large and small screen shots of your pens that can be used in your portfolio.
      Access them from;
      https://codepen.io/userName/pen/slug/image/large.png (for the large screenshot)
      and
      https://codepen.io/userName/pen/slug/image/small.png (for the small screenshot)
    • where you replace userName with your codepen userId and slug with the id of one of your codepen pens and then copy that link into your portfolio
  • at a minimum you should be checking that the user has filled in the name and email fields correctly when clicking the submit button. If they are not an error should pop up. You learned how to do this when you created the survey form.
  • the cursor should be a pointer when hovering over the submit button