Cleaning up My Landing Page

Just trying to figure out how to make the information in my individual flex boxes center up. it looks a bit off to me and i would like for my site to be uniformed. Also, I’m not sure why my video isnt popping up and I open to any tips for the code. This is only my third project so if you see something I’m doing wrong let me know. I don’t want to start any bad habits. heres the code

  1. Use an iframe tag instead of a video tag. Iframe works fine!.
  2. Codepen is very bad for beginners. use visual studio code instead you can debug better.
  3. Your fonts and colors are inconsistent. Always try to use consistent colors. Don’t change them too much.
  4. Do not use unnecessary margin, padding,left,top,right,bottom in css. Always try to use flexbox instead (edit: you haven’t used these unnecessarily my bad :sweat_smile:).
  5. You have two closing div tags below your body tag you definitely want to remove that.

There are many mistakes in closing flower brackets and html elements Visual Studio Code will help you find these type of errors.

Hi @TimDiggs26, some other 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.
    • mentioning because you have elements out of order. Everything the browser displays belongs in the body element.
  • It will help you to run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • I suggest switching the Syntax Highlighting on Codepen, it can help catch errors. Go to your Codepen profile settings (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working, the code highlighting will be using different colors. Errors should be marked in red now.