Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

I’m stuck on trying to add a display block, and max-width on image

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="title">Tribute Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <main id="main">
      <div id="img-div">
        <div id="img-caption">
         Tribute Page
        </div>
        <div id="tribute-info">
          Information
        <div>
        <img id="image">
       <a id="tribute-link" href="tribute-link" target="_blank" value="_blank"> 
      </div>
  </main> 
</body>
</html>

/* file: styles.css */
img {
max-width: 100%;
}

#image {
  display: block;
  height: auto;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Tribute Page - Build a Tribute Page

2

Hi there!

You didn’t have img source value with the href attribute within the img element.

Edit: Your anchor element didn’t have any content and also it’s missing closing tag.

3

What should I put in the anchor tag, if I might ask?

4

Hi @AKIBEH22 and welcome!

These certification projects are a chance to showcase your outside interests. The demo is a tribute to Dr. Borlaug. If I were to do this project, I might choose Dr. Marie Curie and use the anchor element to link to her Wikipedia section.

I hope this helps with ideas. Happy Coding!

1 Like
5

@ablairmorris

Appreciate the help, but should I put the link into the href attribute?

6

Your anchor element should look similar to the following pattern:

<a href="https://freeCodeCamp.org">freeCodeCamp</a>

If an anchor element does not have an href attribute, it will not work.

I hope this helps.

1 Like
7

Hello AKIBEH22 :vulcan_salute:

I see you need help and I will try to be of some assistance!

According to the assignment, your anchor element in this project should have:

  • An a element with an id of tribute-link . :white_check_mark: (You got this :+1: )
  • Your #tribute-link should have an href attribute and value. <— Yes, your href attribute within your a element should include the URL :link: to the external webpage which you got your information from.
  • Your #tribute-link (i.e., the anchor element with the id=“tribute-link”) should have a target attribute set to _blank. :white_check_mark: (You got this already included in your code as well :+1: :+1: )

:rotating_light: And, do not forget to add the following:

  • The closing tag for the a element! Since, this element has an opening and closing tag.
  • Between the opening and closing tag of the a element, there should be textual content which your opening and closing tags wraps around. An example of what you could write is “Original Source”, since it indicates the information is from the webpage which your a element links to as an outside site. As a reminder, your href attribute has a value that is the external URL :link:
8

Ok, I will try to update my code, appreciate the help

9

I added an element with an id of tribute-link, added a href, , redid the whole project, added an image, watched a tutorial for this project, followed it the exact same way, and it’ s still saying the display and max-width is incorrect?

10

Post your update code here. Remember, use three back ticks on a separate like line above and below your code block.

11

HTML:

Tribute Page

Katherine Johnson

The first black mathematician to work for NASA 
<ul id="tribute-info">
  <li>1937 - Graduated summa cum laude with a degree in Mathamatics and French</li>
  <li>1939 - Left her teaching job and enrolled in a graduate mathematics program</li>
  <li>1952 - Gets hired by NACA for a mathematician job offer</li>
  <li>1953-1958 - Johnson worked as a computer, analyzing topics such as gust alleviation for aircraft</li>
  <li>1958 - Started working as an aerospace technologist</li>
  <li> 1961 - She also calculated the launch window for Alan Shepard, the fist American to go to space</li>
  <li>1969 - She also helped to calculate the trajectory for the Apollo 11 flight to the Moon</li>
  <li>1970 - Johnson worked on the Apollo 13 Moon mission, helping create backup procedures and charts to help the crew return to earth when the mission was aborted</li>
  <li>1986 - She would retire, and spend her later years encouraging students to enter the fields of science, technology, engineering, and mathematics (STEM)</li>

</ul>

<p> <a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Katherine_Johnson">Click Here</a> to find out more information about Katherine Johnson</p>

CSS:
img {
display: block;
max-width: 100%;
height: auto;
align-items: center;
}

12

Remove space after p element.

Use margin property to center the img. align-items works with display flex.

13

is it margin auto?
Also, for the CSS: is the max width and display block correct for the image, or is it something in the HTML?

14

for centering any element, you need margin top and bottom value 0, margin left and right auto.

hieght and width is correct.

html of your image is not visible on your post. you did not added the back ticks on corrrect place.

you only nested the above html code within the back ticks.

15

This was the video I used for the updated code, I tried to follow it step by step, but it’s still incorrect, you mentioned back ticks nested in the above code is not correct, but where should they be placed instead?

16

when you post your code here. first add three back ticks then add code in and then add three back tiks.
example:

(```)

your code should be placed between the pair of three back ticks like this text. ignore the round brackets.

(```)

if you watch that video 1000 times, but you did not fullfil the test requirments. then the test will not let you pass the project.

17

I added to the whole html code and it is still not excepting it

18

i can not see your computer screen. need your updated code to help you. post whole html and css code.

19

Screenshot 2024-08-07 115850
Screenshot 2024-08-07 115850943×905 60.9 KB

20

Back ticks is not the solution for your code. Back ticks are used for visibility of your code here within the forum post.
You need to post your html and css code here. Screenshots are not useful to mention the error in your code.