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?
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.
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.
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 ?
could be as I’m executing it on my smartphone, because of the em’s? Anyway, thank you! 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.
@sebastianmayregger, you’ve marked this as solved. I’d suggest you as for feedback in the Code 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.
You have elements out of order. Review this for an understanding of the HTML boilerplate tags.
Now I can start on the other challenges with some background-knowledge I aquired