Tribute Page - Commander Shepard

Project Feedback
#1

Hello Everyone!

Here is the link to my tribute page. Let me know what you think :slight_smile:

#2

Suggestion

  • Try to use some spacing between words.

  • Play with some other fonts because heading and paragraph look used the same font and it’s not suited for reading.

Feedback

  1. Looks absolutely beautiful.

  2. Everything is well structured.

hope I helped happy coding✌🏽

1 Like
#3

Thank you for the suggestions and the feedback :).

Good point on the word spacing and changing up the font - definitely more aesthetically pleasing.

Happy coding to you as well!

1 Like
#4

Your page looks good @bbs2527. Some things to revisit;

  • The test script, with all tests passing, should be included when you submit your projects.
    • Your page passes 9/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
    • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
  • 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>’
  • 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.
    • “here” is not accessible
#5

Thanks so much! I figured out why there was an error - the below specified to have the element to be responsive but when I changed the id (#image) to max-width 100%, it made it pass. This is what confused me because I misconstrued what the error wanted. Everything should be good to go now :slight_smile: .

Thanks again!

Error Problem:
Layout

    1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Try using the “max-width” style property

/* Main Image */

#image{
  max-width: 100%;
  background: transparent;
  margin: auto;
}

#image img{
  height: auto;
  display: block;
  max-width: 100%;
  margin: auto;
}

#img-caption{
  text-align: center;
  background-color: white;
  color: black;
  max-width: 100%;
  margin: auto;
}

#img-div{
  margin: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  max-width: 80%;
}
#6

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