Feeback on my Tribute Page

Code Feedback
1

Hi, I would like to receive some feedback on my page. It’s the first project I’ve ever done, and I especially struggled with the grid and gallery since I wanted all the pics to be the same size but they appeared a bit distorted.
However, this is my final result!
Would love to hear suggestions.
Also, I’ve noticed it doesn’t adapt properly to smaller screens, even though I tried.

2

i don’t know why you’re not using the class (class=‘img-responsive’) in your image HTML’s and experimenting with centering/max-size/fr units etc.
but then i’m just a noob

3

Your page looks good @jcastem. 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.
    Mainly mentioning because you have elements out of order. Review this for an understanding of the HTML boilerplate tags.
    You will need to correct this before doing the next step
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
      If you’ve correct the issue with elements being out of order then since copy/paste from codepen you can ignore the first warning and first two errors.
  • Keep all your styling external. Do not use in-line styling.
  • 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.
    • “wikipedia page” is not accessible
  • As you’ve noticed you need to make your page responsive. Remember, the R in RWD stands for Responsive
  • There’s a horizontal scrollbar on smaller screens
    You can use a media query to style the grid for smaller screens
  • Some tips on responsiveness;
    • Do not use fixed dimensions on elements, use max-width/height and relative units like %, em, rem and vw to keep everything responsive.
    • Start by styling for a narrow view port first. Narrow your browser as far as it will go and style the page so it looks good at that narrow width. Then gradually widen your browser and use CSS media query break points to adjust the style for wider view ports if needed.
4

Thank you very much, that will help a lot!

5

Hi, I’ve been watching some tutorials and guides to make pages responsive, but I’m still struggling with it and I’ve applied some things and nothing seems to work. I was wondering if someone could help me with this specific page (my first project ever):
https://codepen.io/jomby/pen/NWvVNpQ[^]

If someone could tell me how to make this example responsive, or even want to write the elements on the CSS in the answer, I would appreciate it a lot.

Rather than an explanation I’m looking to how to make this codepen page responsive so that I can learn from this practice.

Thank you very much in advance for your patient.

6

It’s a good page and passed all the specs. I’d rather think you should move on to the next challenge.

7

The last two bullet points in my response when you asked for feedback gave some pointers as to what you’ll need to do. I don’t see where you’ve added a media query.
Essentially what you’ll do with the media query is stack the images in .container.

In your #tribute-info what if you didn’t have those large margins on either side?
You can see how you have the element set up by adding the following line into the #tribute-info selector;
border: solid 1px red;

8

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