Tribute page project - seeking feedback please

See the Pen Tribute Page (freeCodeCamp Project) by xavieryeung (@xavieryeung) on CodePen.

There are a couple of things I think I did it bad.

  1. The border of the info-div on the left hand side is taller than the content which I have no idea how to fix it.
  2. I cannot make the info-div disappear when the width of the page is lower than 480px. I tried the media query stuff, but I screwed it up so I just deleted it.
  3. When I look at the html or css code, I find that it is relatively hard to understand compare to other people’s project. How do I fix it or avoid it in the future project?

Thank you so much!! Sorry for my bad English.

Your page looks good @xavier.yeung. Some things to revisit;

  • 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.
  • 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)
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • 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.
    • DJT” is not accessible

To help you visualize how you have your elements on your page you can temporarily add the following universal selector

* {
  border: solid 1px lightgreen
}

Is there a reason you’ve set the CSS preprocessor to SCSS when everything is straight CSS?
To help with responsiveness it will be better if you use relative units rather than hard coding pixel values.

2 Likes

Thank you for your feedback! I will try edit it!

I actually don’t know what SCSS is, I set it to SCSS because the codepen ask me to at the very beginning? or maybe I’ve done it wrong. I will change it back to CSS. Thank you!!

@xavier.yeung , is it alright for forum users to have access to your codes? I checked and realized your editor was basically accessible meaning your codes could be tampered with. Kindly look into that, except if it’s normal for people to have access to it. Not sure because I’m yet to share mine for feedback.

I think everyone can edit it but only the owner can save it.

1 Like

I really appreciate the feedback. Just discovered the ‘save’ option isn’t available. Thanks and happy coding!

1 Like

yeah! enjoy! happy coding!

1 Like