Help!My first FCC project

Hello people,
i have just started to work on my project for the tribute page but it appears i haven’t got anything right…
I managed to signup for codepen and did my project aside and the results were seemingly correct.
please follow these links to help out:
https://codepen.io/Cynthia7/pen/OJyrvyr , that is for the code
https://codepen.io/Cynthia7/full/OJyrvyr , for the full display of the result.

thanks in advance.

add this to your code

  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

it will help you fix the errors

Thank you. let me get to it

you have removed the test suite that was present in the forked pen

you need to keep that in.

also codepen expect only the content of the body element in the HTML box, so you should remove the html tags (and give the #main id to something else)

thanks ieahleen,
but when i add the script tag, there is no fault with the main.
May you please identify to what i should give the id attribute of main

One last problem please,
i have been challenged upon getting to center the image element within its parent element.
i have used the text-align: center; but still failed the task.
please follow: https://codepen.io/Cynthia7/pen/PoPXRBr

i have actually done it…
please follow to see the results: https://codepen.io/Cynthia7/pen/PoPXRBr

thank you

Hello @cynthia7,

Congratulations on completing your first project. It’s a great start :smiley:

Your page could use a little more styling. Currently, the content is not well aligned and there’s a vertical scroll at the bottom of the page.

You should try using the following styles

body {
   text-align: center;
}

#main {
  width: 90%;
  max-width: 1080px;
  margin: auto;
}

#title{
  font-size:45px;
  font-family: Algerian;
  color: #BA1F1F;
}

#image{
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}
#img-caption{
  font-size: 20px;
  font-family:elephant;
  color: #3A208A;
}
#tribute-info{
  font-style: broadway;
  font-size: 24px;
  color: #1A0D40;
}

Also, you should use the <figure> and <figcaption> tags to display images with a description.

<figure  id="img-div">
      <img id="image"src="https://geniusrevive.com/wp-content/uploads/2017/06/Jesus_Christ.jpg" alt="The King of Jews">
      <figcaption id="img-caption">Christ at the cross</figcaption>
</figure>

I noticed the id = "main" was on the <html> tag not the <main> tag. You should probably fix this.

Your page is currently not responsive. You can add responsiveness with this:

#main {
  width: 90%;
  max-width: 1080px;
  margin: auto;
}

Finally,

You can add some more styling to make it better. Happy coding!

thank you.
let me give it a go

@Lafen
I made adjustments as you suggested and the page looks great.
i also added adjustments to the link. thank you.
i have a question though, may you please explain the responsiveness of the page?

@Lafen
I APOLOGIZE…
Here is the link https://codepen.io/Cynthia7/pen/PoPXRBr

1 Like

Hello @cynthia7,

I must admit, your page looks great now. Congratulations!

It is currently responsive. You can make it better by adding responsiveness to the font-size of the page. There are several ways of accomplishing this but I’ll advice you use rem units instead of px for all font-sizes on the document.

You can proceed by adding a font-size ( in px) to the html element which all the other elements will inherit.

Lastly, use a media query to change the font-size of the html element on smaller devices.

You can get more insight on the topic here.

I hope I’ve answered you clearly, if not, feel free to post any of your queries here and I’ll respond to them accordingly.