In building a tribute page

HTML-CSS
1

please how should i do this task: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

2

What have you tried?

3

I think setting the image width property to a percentage value will do.

4

i’m so sorry i just realized that ive been doing everything wrong.

5

There’s nothing wrong with starting over.
Come back and ask questions if you have any. While we will not give out specific answers we will help guide you to finding a solution.

Happy coding.

6

ok. please how do i do this part: My tribute page should have an element with a corresponding id="main" , which contains all other elements.

7

What have you tried?
Please provide a link to your code.

8

https://codepen.io/David04/pen/XWeGYPv this is the link

9

@David2004,
There are three sections in codepen, the HTML editor, the CSS editor and the JS editor. Each one is labeled.

You write

  1. HTML code in the HTML editor
  2. CSS code in the CSS editor
  3. JS code in the JS editor

also note;
Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor
In the CSS editor you’d only write CSS code. <style> </style> are HTML tags and do not belong in CSS

Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
The instructions tell you to fork the sample project. If you decide to forego the instructions and start a pen then be sure you include the test script. The test script, with all tests passing, should be included when you submit your projects.

10

how do i center the img element within its parent element?

11

what do you mean by percentage value

12

@David2004, what have you tried?

13

this is my code so far:

Dr. Norman Borlaug

The man who saved a billion lives Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger. wikipedia entry
15

Please do not post code.
You can provide a link to your pen. It’s much easier to work with that

17

[https://codepen.io/David04/pen/XWeGYPv] this my link

18

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 test 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?

A couple of thing to note;

  1. you are using the style attribute incorrectly. Maybe search and find out how and why you would use it. As a hint, you should not use it in your code.
  2. you do have to replicate the sample projects. They show one way the project can be completed. The instructions say to make your “functionally similar” and to “give it your own personal style”. You can make this tribute page about anyone you’d like, an author, a band…even a potato.
19

yes but when i used the max-width property it was still showing the same thing

20
  1. Keep all your styling external. Do not use in-line styling
  2. "non" is not a valid value
21

my problem is what should be in the max-width property

22

That’s what you need to research.

It would be helpful if you didn’t rush through this. For instance, you have an img tag but there’s no src attribute.
Don’t you think it may be easier if you had something to work with?

You’re repeating questions, expecting answers, without doing any research.
We will not give direct answers. We will help guide you to a solution but you’ve got to be willing to do some of the work to get there.