Hi, this is my first time posting so I hope I’m doing it right. I’m working on my tribute page and I’d like some general feedback as well the answer to some questions. I think the page looks okay, but I think my code looks like a mess. I struggled a lot with the code, specifically with CSS more than HTML. One thing I think I still don’t understand super well is how to center elements on the page. It felt like sometimes “text-align: center;” would work, but sometimes I’d adjust width or margins and then the picture would realign to the left. I also don’t fully understand the difference between ID and Class.
ID pertains to one specific element. Classes can pertain to many.
So #img-div will style that one particular element with that ID while .img-div (note the # versus the . ) can style many elements. It will become clear after you practice a while.
Thank you. This makes it make more sense. I think I was getting tripped up by the # and . and assigning them incorrectly.
This does makes me wonder why would you ever opt for an ID over a class, even if you were only going to assign the class once? Are there any other differences between ID and class?
You could use a class just once if you wanted to. But if you intended it to only be applied to one element then using an ID would probably make your code and your intentions clearer. It’s good to write code as if someone else in the future will be looking at it. When you see an ID selector you know right away that the rules within are applied to one specific element. That’s useful information.
Welcome to the forums @elijahelz. Your page looks good. Some things to revisit;
Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
The test script should be included, with all tests passing, when you submit your projects.
Your page passes 7/10 user stories. 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.)
Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
The link to the font goes in the box labeled ‘Stuff for <head>’
Also, elements are out of order. The title element belongs in the head element, not within the body.
font-family names containing whitespace should be quoted
Make your page responsive. Remember, the R in RWD stands for Responsive
There’s a horizontal scrollbar on smaller screens, elements do not resize correctly
In general, an id is typically used when you want to target HTML elements with JavaScript. A class is used to style the page. You can use an id to style the page if you want but know that it has more weight than a class does and the id will override a class targeting the same element.
In your own personal projects that you create outside of freeCodeCamp some people recommend only using a class to style the page and an id if using JavaScript in your project. However, JavaScript can target a class too, so you may not need id’s that much in your personal projects.
Thank you for your feedback. This actually helped a lot. One thing I’m not understanding is when I add a max-width and a “height:auto;” to my img, it realigns it to the left, even though I have a “text-align: center”. I don’t really understand why this is happening or how to circumvent it.