Tribute Page Revision - Feedback Appreciated

Here is my revision of Project 1 in the Responsive Web Design Course. All feedback is much appreciated.

Note: I will be changing element id's to pass tests. This post is covering the overall design and html/css structure.

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

  • The test script, with all tests passing, should be included when you submit your projects.
    Your page passes 3/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.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
      Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    Reference MDN Docs
  • 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.
    • follow this link for more information” is not accessible
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    There’s a horizontal scrollbar on smaller screens

When asking for feedback it’s best to post in the #project-feedback subforum.
I’ve taken the liberty of moving this for you.

1 Like

I need help with tasks 8 and 9 on the Tribute Page Project for Responsive Web Design

Im having trouble making my header image responsive. Everything on the page resizes properly except the header image and every time I try and do this, the image loses the alignment id want. I also would like to have the header text stay in the same place in relation to the image.


After receiving feedback on my post, Ive noticed this problem when viewing my website with different screen sizes and zooming in and out. Hopefully my webpage looks similar on your screen as mine, but I want the webpage to look how it does when you full screen it and are on 100% zoom.

Besides this I have ran my code through an html validator, so everything else seems to be fine and all my other tasks are passing.

project link

When a test fails 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.

The full failing message says

 The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Try using the "max-width" style property : expected 'none' to not equal 'none'
AssertionError: Try using the "max-width" style property : expected 'none' to not equal 'none'

Do you understand what the test is looking for and why it is failing?

1 Like

yes I understand. I added:
max-width: 100%;
to my image which passes the tests but the thing is, I think something else is overwriting its ability to actually be responsive. Could it be because I am using position: absolute and position relative in parts of my header? If I change these things, Im not sure how to get my page back to how it’s designed now.

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.

To have the text stay alongside the image on a smaller screen would more than likely make the text too small to be seen.
More than likely to be visually appealing on a smaller screen you’d have his name and the p text on top and the image below.

On smaller screens currently you have a horizontal scrollbar because the guitar image does not resize responsively.

I see what you’re saying. By the way, I think I have revised everything you have previously suggested on changing. Thank you for taking the time to help. I guess Im going to need to revisit media queries to complete this. I also understand what you are saying about how the page will look on smaller screens if I am going to keep the same layout, and I think you are right about having the image below. I may try doing this but I have spent so much time attempting to keep this layout, that itd suck to change it. Im pushing this project to a github repo so I think I will definitely give the structure you are talking about a try (with the text above the image). Finding a way to have the image take up the top portion of my website and have the rest of the page flow beneath was surprisingly hard for me to figure out. I initially tried CSS grid but I dont feel confident with it yet.

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