Tribute page Challenge - Maria Montessori

Code Feedback
1

Hi, I just finished the Tribute Page and I would really love if you can give me some feedback. I’m at the beginning of my coding journey and different point of view about my cod would help me allot. Thanks allot
Here is the codepen link:
https://codepen.io/Iza94/pen/eYdJQpq

2 Likes
2

Hi @tina.timofte94!

Welcome to the forum!

I think your page looks good.

A few things.

  • Please keep the test suite in the project.
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

  • You are currently failing one of the tests. Open up the test suite in order to fix the issue.

  • There is some repetition in your code.

#main{
  margin-top: 10%;
  margin-right: 10%;
  margin-bottom: 10%;
  margin-left: 10%;
}

You can cut down on this by using the margin shorthand property. https://www.w3schools.com/css/css_margin.asp

  • Do not use br tags for force line breaks.
 </div><br><br>

br tags should only be used when line breaks are significant like in a poem or address. If you want space between elements use css instead.

Hope that helps!

3

Hey @tina.timofte94 Your page looks Good!! It is responsive and clean but just a few things that i noticed

  • As @jwilkins.oboe you should not use <br> like you have used it. Using <p> to wrap a paragraph is much better way to do it, it makes your html more readable and also adds the nextline space without using <br><br>.
  • When the screen size is smaller the text written in the article is hard to read because of the left and right margins only 2-3 words are getting space in each line. You should reduce the margin of main when the screen size is smaller using media query.

Everything else looks good.
Good Job!

4

hi Jwilkins, Thanks allot for your answer.
I changed everything as you said, but I do not know how to fix the error .
The test tells me this: “The element should responsively resize, relative to the width of its parent element, without exceeding its original size.”, and I use max-width: 100%; height: auto; , so the image resizes itself. What do I do wrong?

5

Two things needs to be added inorder for this to work.

Always read the full error message not just the first line. The answer is in the line below that first sentence.

After you make that change, the test will now want you to center the image. How To Center an Image

Once you change the display and center it properly for that new display then the test will pass.

Hope that helps!

1 Like