1st Assignment -- CHECK--would love your thoughts

Hey y’all, I put the finishing touches on my Tribute Page assignment today. The project took on a bit of a life of its own when I realized this person who’s YouTube videos I’d been bingeing on recently doesn’t seem to have a personal website. So I thought I’d make it more like an “official website” type of thing so I can maybe use it for my portfolio later on.
It looks fine on my laptop and my tablet, but when I asked a family member to take a look apparently it looked busted. I’d love to hear from anyone on here…
What do you guys think? Thanks for your time!

Your page looks good @natalieb-k. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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.
  • Keep all your styling external. Do not use internal styling.
    Just place the @import for the fonts in the CSS editor at the top. No need to have the style tags.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first two error messages.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron 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)

There’s a lot of white space on the page. On the sides, between sections.

Something that may help;

  • As a suggestion switch the Syntax Highlighting in Codepen to 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 will now be marked in red.

congratulations and well done, very cool images and quite neat design, looks simply nice :slight_smile:
btw, why is there so much space in between segments?! unless it was intentional and happy coding, good luck!! :slight_smile:

You have built a good base to work with. Well done. I think your font-sizes a bit small. There’s also so some big white space gaps between elements I would reduce.

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