Tribute page feedback :) - wavyhix

Code Feedback
1

Hi, could I please have some feedback on my tribute page please?

Also, I did have one question. At the very bottom of my page I have the text “If you would like to…”
How do I add space between this text and the quote above it? I tried using padding-top and margin-top but they didn’t do anything. In the end I changed the line height which seems like to wrong way to fix it.

2

Welcome to the forums @wavyhix. Your page looks good. 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.
    • 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. (among other things you have invalid HTML tags)
      Since copy/paste from codepen you can ignore the first warning and first two errors.
  • 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 issues are because of the invalid HTML tags you have)
      (The one for HTML misses things which is why I recommend W3C)
  • 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.
    • “click here” is not accessible
  • On smaller screens #title is a bit tight. Screenshot attached
    Screen Shot 2021-11-19 at 23.55.54

When you use valid HTML tags you’ll be able to style the way you want.

1 Like
3

Thank you very much!!! That is super helpful :). I’ll get to work on improving it

1 Like
4

Good work. Your project is just a little too packed. You can use position, margin, padding or br to adjust them so its easier to read.

1 Like
5

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