Project 1: Build a Tribute Page

Code Feedback
1

Hi! I finished project 1 a couple weeks ago then I finished 2, but before I move on to project 3, I wanted feedback from you guys.
I’m having trouble centering my images on my iphone. If I change my image max-width to 100%, the image on mobile looks better, but then it looks way too big on laptop screen.
Be a brutally honest as you can, thanks!
https://codepen.io/mastercoder92/pen/jOVWwvm

2

Your page looks good @Stampflmail92. 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)
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links. For a more thorough explanation read Web Accessibility in Mind.
    • “wikipedia page” is not accessible
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

To help you visualize how you have your elements defined try adding this as the first line in the CSS editor

* {
  border: solid 1px red;
}

You can also move the value: property; pair to any of your selectors to see how they’re set up/defined

3

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