Tribute page - some general questions

I’ve been up to creating my first tribute page, but I lack some good strategies to make it look proper.

Could you give me some tips?

So, the tribute page passed the tests by the script, but it still looks like crap.

For instance, when viewing the picture of Heisenberg on my phone (P40 lite) the picture doesn’t resize proper and the <‘figcaption’> stacks up to 3 columns.

Is there a better way than using em’s to resize it to smaller or bigger screens? I might look into viewports?

Here is the link: https://codepen.io/sebastian-mayregger/pen/zYwJvyb

Also thanks for showing me the w3-validator which accelerated the whole project huge time.

Hello.
let’s talk about your image first.
for your <img src="" alt=""> tag to work
you have to past in a link that show the actual image.jpg.
then you copy/paste the link in src=" ".

what you have pasted in src is not an link that would show an image.

for this you could put the Heisenberg class element right before the image element,
and use the float property to float it to the right.

float: right;

or use flexbox or grid
make a container and child items.

1 Like

The link you’ve provided is a link to a page with different images of Heisenbergs. Click on the image you want to use then right click and select the “copy image address” link and paste that into your code.

You have quite a few errors you need to clean up. Run your HTML code through the W3C validator.

1 Like

thank you for helping me out. Now the page runs almost all tests positive except for the ‘img needs to be centered’ (#layout 2.). What shall I do? Is it referring to #img2 ?


Did you perhaps made a mistake?

1 Like

could be as I’m executing it on my smartphone, because of the em’s? Anyway, thank you! :slight_smile: Now I can start on the other challenges with some background-knowledge I aquired

No. partly yes.
you are not quit done yet.
It is showing the image layout error only on small viewport.
Your website is not Responsive.
for that you have to use @media rule in media queries.
or use flexbox and grid.

I’ll work on that then before starting into new challenges, I guess.

yes. it won’t take too much of your time.

1 Like

@sebastianmayregger, you’ve marked this as solved. I’d suggest you as for feedback in the #project-feedback subform. There are things you should revisit such as;

  • 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.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
  • 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.
    • der berühmt ist für…” is not accessible
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

On a side note, this is HTML5. You should use flexbox rather than float

1 Like

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