Tribute Page HTML and CSS Projects

I have 9/10 questions but can’t figure this out -

1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

And…

Try using the “max-width” style property : expected ‘none’ to not equal ‘none’

I haven’t got a clue - Please help!

It would help to see your codepen so we can see the issue better.

Thanks!

Ok. How would I do that?

Copy the codepen link you find at the top of the browser and paste it in the forum here so we can see your code.

OK. Thank you. Here it is -

Tribute Page for Malcolm X (codepen.io)

Ok cool.

The first thing you want to do is get rid of these style tags in the html.

<style>
  body {
   text-align: center;
    background-color: gray;
  }
  li {
    text-align: justify;
    font-size: 100%;
  }  
  a {
    font-family: arial;
    font-color: orange;
  }
</style>

Delete the style tags and move all of that css into the css section.

Your css should now look like this

img 
  max-width: 400px;
  text-align: center;
}
p {
  text-align: center;
  font-family: arial black;
  font-size: 50px;
}
a {
  font-family: arial;
  font-color: orange;
}
body {
   text-align: center;
    background-color: gray;
  }
li {
    text-align: justify;
    font-size: 100%;
  }  

Now that you are building projects, you want to keep your css and html seperate.

Once you fix that, then you should draw your attention to this error here

img 
  max-width: 400px;
  text-align: center;
}

You are missing something important there.

Once you fix that then you will need to clean some of the html because there are a few errors.

The first thing I would do is fix the img div to only include the image, and figcaption.

  <div id="img-div">

    <img id="image"  src="https://www.thetimes.co.uk/imageserver/image/%2Fmethode%2Ftimes%2Fprod%2Fweb%2Fbin%2F7c8f440a-0e41-11eb-ac14-2688f9fd3309.jpg?crop=1147%2C765%2C0%2C0" alt="picture of Malcolm X smiling">

    <figcaption id="img-caption">Malcolm X was a civil rights advocate and one of the most influential, honest and inspiring persons of the civil rights era. 55 years after his assassination, movies and books are still be introduced to generations of people who are fascinated and intrigued by his life and untimely, violent and suspicious death.</figcaption>

  </div>

Then you will be able to pass the max-width test but continue to read the error messages for the missing margin and display properties.

Once you pass that test, then you will need to clean up the rest of the html.
Codepen has an analyzer you can use to fix the errors.

Then you should be able to pass all of the tests.

Hope that helps!

Ok. JWilkins, I have to admit I copied what you sent me and now my text is blue and underlined. It’s because I’m getting tired and frustrated. This is my first attempt at writing code and I’m confused because I watched a lot of Tribute Page tutorials to guide me. Everyone does something different and some showed putting the style section in HTML. I even changed pictures and I’m still getting the same error message. I think I’ll go to bed and work on this tomorrow. So frustrating!!

Tribute Page for Malcolm X (codepen.io)

Building your first few projects is hard at first because you are still new to this.
It is completely normal to struggle and most people go through this as beginners.

That is because you have the opening anchor tag wrapping all of your text content.
For now, I would suggest moving the anchor tag all the way to the bottom of your html so it is out of the way.
When you do that, then the text will no longer be blue.

When it comes to style tags, there is a time and purpose for them.
The reason why the lessons are using style tags is because you are only working with about 15-20 lines of total html and css code.

For small demo purposes or teaching purposes using style tags is fine in my opinion.

But when you start to build out projects, it is going to be difficult to read and maintain if all of your html and css is in one section.
Especially since these projects will become more involved down the road.

You want to practice separating out that logic to make it easier to read, debug and maintain for you and other developers reading your code.

Taking breaks when learning to code is good.
It will help you recharge and start fresh tomorrow.

The good news is that you are much closer to passing then you think.
There are just a few things that need to be fixed and cleaned up.

Hope that helps!

1 Like

Thank you so much! I didn’t know what to think as to why this project is taking me so long to finish! It’s comforting to know that it takes a bit longer to complete my first project. I moved the anchor tag and it did remove the blue font and underline. I’m still at 9/10 but I will not give up until I get 10/10!

Thank you so much again!

Hello! I just wanted to tell you that I finally scored 10/10 to pass the test! Onward and upward! Thank you again!!

1 Like