HTML Coding Problem. Can Anyone Help?

HTML-CSS
#1

Hello,

Here is a link to my tribute page project in the Responsive Web Design curriculum.
https://codepen.io/EmeraldRaven/pen/poevywJ

Two of the tests failed, and I’m not sure how to fix them. Can someone explain to me what to do?

HTML: <img> Elements
#2

You can’t just have CSS in the HTML file like that.

It either needs to be inside a <style> element in the HTML. Or better yet moved to the CSS code box (without the <style> element).

Also, your image link is not correct. Use this.

https://upload.wikimedia.org/wikipedia/commons/2/22/AmyLee2003BillboardAwards.jpg

When trying to get the link to an image it is always best to right-click it and use “Open image in new tab”, then copy that URL.

Edit: Forgot to mention. You likely do not want width: 100% on the image, and you can use auto margin to center it.

#3

Hello,

Can anyone explain how to center an image within its parent element and how to make an element responsively resize without exceeding its original size? I can’t figure out how to do either one.

#4

It sounds like you’re working on the tribute page project. We don’t want to just give you an answer. Some things,

  • 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.

It would also be helpful if you provided a link to your pen.

#5 
<div> <img > </div>

div {
align : center}

Always apply align settings on container of image and not on image element. Only then, it will work.

To make an element responsive, use % and such other techniques that you might have learnt while going through the lessons and not the absolute values like px. Revisit lessons. Believe me, this is very important. We forget a lot of details as we go through lessons as fast pace. It’s always good to revisit sections you are having trouble with.

#6

@Keelz96, the HTML code looks the same as the sample project.

Make the project from scratch, with your own code, style and content. Don’t take code from the sample project.

  • The projects are not just another challenge. Each one is meant to be a significant step in your progress. Every project you do will require research, planning, trial and error, and strengthening your skills beyond what you gain from the incremental challenges.
  • The hardest part of coding is looking at a problem and coming up with a plan to solve that problem. Starting out by looking at someone else’s code completely bypasses that step.
1 Like
#7

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