My Chuck Norris Tribute Page

Code Feedback
1

Hey, y’all. I just finished my Tribute Page. I’m clearly not a designer, but I think it turned out pretty alright. I welcome any feedback. Thanks!

1 Like
2

Welcome to the forums @TabCamp. Your page looks good. Some things to revisit;

  • Verify your email addr with codepen so we can see your page full view
  • 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.
    • For instance, links to fonts go in the box labeled ‘Stuff for <head>’
  • 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 warning and first two errors.
  • In addition to being used incorrectly in the element, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Keep all your styling external. Do not use in-line styling.
  • Get rid of the style tags in the CSS editor. The CSS editor in codepen is like having an external stylesheet. And you would not put HTML tags in a CSS stylesheet.
    They will cause issues if you leave them there.
  • In your CSS code, can you think of a shorter way to write this
    margin: 0px 500px 0px 500px; (it’s line 16 in your code)
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • “wikipedia page” is not accessible

From the little bit of your page that I can see, is your margin doing what you expect? (This isn’t the only instance where there’s one word per line) See screenshot.

Screen Shot 2021-08-30 at 17.06.17
Screen Shot 2021-08-30 at 17.06.171217×649 81.8 KB

1 Like
3

Weird! No, that is not what I expected. Also, thank you for all of the feedback (like my email apparently needing to be validated). That’s my bad.
I’ll fix everything in the morning, beside the margin bit. I’ll have to look up why it’s doing that in the first place.

4

Hey, I’m still working on converting the in-line styles to CSS and a couple of the other things you mentioned, but I’m really focusing on the margin thing.

I think I’ve fixed the issue, but I now have a horizontal scroll bar. If it’s not too much trouble would you mind helping me figure out why? I’ve read that usually a horizontal scroll bar is due to elements being larger than their containers, but I don’t see anything that is sized badly. Maybe I’ve missed it or I’m too green to see what’s wrong though.

If you can’t help, I totally get it. I can always ask elsewhere. I appreciate your time. Thanks.

5

@TabCamp, in your body selector add the following line
border: solid 1px red;

You should be able to see why you have the horizontal scrollbar.
If not take a look at the hint
hint;

look at your html, body selector

6

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