Asking for Tribute Page project feedback

[susseh]

THANK YOU for looking at my Tribute Page project. I am a COMPLETE beginner, so please be patient with my questions and my lack of knowledge for the correct jargon. Thank you!

Link to project at the bottom.

Some questions I have/problems I encountered:

I do not know if there’s a particular order in which to list the properties under the id names. Does the order affect the way it all works at this level? I read that it matters when using properties that override each other, but does it matter with these particular properties?

I could not get all properties to work with all elements and don’t know yet what the rules are around this.

For example: I was not able to style the body of the page under the #main id. I was not able to make the ‘background-color’ property work.

For some ids, I was able to make the ‘text-align: center’ property and value work - but not for all. I ended up using the ‘padding’ property to center others, but I felt like that might not be correct (?), since I don’t know if it is truly centered. Also - I looked up and used the ‘display: block’ property and value to center the image. Was that OK? I couldn’t find where that was in our lessons. I don’t really understand exactly how that works yet.

I’m not sure if the image caption is linked to the image. I could not enlarge the text of the image caption, because it kept wrapping to the next line. I’m not sure if I created a container, and if the text is hitting the wall of that container (?).

Thank you again for any feedback you are able to give!

https://codepen.io/KHenry8/pen/PobrpeR?editors=1100

[miku86]

@susseh

I do not know if there’s a particular order in which to list the properties under the id names. Does the order affect the way it all works at this level? I read that it matters when using properties that override each other, but does it matter with these particular properties?

Most of the time, you’ll see overwriting just for short-forms like padding and margin.

@susseh

For example: I was not able to style the body of the page under the #main id. I was not able to make the ‘background-color’ property work.

I think this is specific for codepen, because you build a website inside a website and codepen implicitly adds a body around all of your code.

So in practice, you just can add all the content of a normal body to the codepen html box. Currently, your html tags don’t work (but they also don’t break anything).

@susseh

For some ids, I was able to make the ‘text-align: center’ property and value work - but not for all. I ended up using the ‘padding’ property to center others, but I felt like that might not be correct (?), since I don’t know if it is truly centered. Also - I looked up and used the ‘display: block’ property and value to center the image. Was that OK? I couldn’t find where that was in our lessons. I don’t really understand exactly how that works yet.

text-align doesn’t work for every html element:

The text-align CSS property sets the horizontal alignment of a block element or table-cell box.

Source

For example, a is an inline element, meaning it flows inline with the stuff around it.

You can layout your a by creating a (full-width) container around it (e.g. a div) and make this container a flexbox (don’t know if you already learned flexbox). It’s mostly not a good idea to center with padding, because this will break a lot of times on different devices (e.g. a smartphone) or will be hard to maintain (many different paddings for different device sizes).

---

You can add the FCC test suite for your project by adding this code to the top of your html box:

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

[susseh]

Thank you very much for your help!