@elaineleung
Posted
Hi Lily, first off, welcome to Frontend Mentor, and congrats on completing your very first challenge! It's a huge step when you go from tutorials to actually writing your own code, and I must say that for your first challenge, you've done an excellent job!
About your question on centering items, it kind of depends on how you want things to look. Some people want their attribution as a footer pushed all the way to the end of the page, and some people might want it close to their component, which might be somewhere in the center. In your solution, you had your attribution within the component. Each of these cases could have slight variations in how the CSS is written, but regardless what the case is, the key thing that most people tend to forget is the height, which is very crucial because the browser needs to know how much space there is so that it knows where to place the component with even spacing around it. Even when people do remember to add the height, the mistake that most of them make is that they they use height: 100% or height: 100vh instead of min-height: 100vh.
In any case, for the most basic kind of centering where you want everything in the center, here's what you can do:
// centering everything in the middle using flexbox:
body {
min-height: 100vh;
display: flex;
flex-direction: column; // this is needed if you have more than one child in the body selector
align-items: center;
justify-content: center;
}
// centering everything in the middle using grid:
body {
min-height: 100vh;
display: grid;
place-content: center;
}
I encourage you to play around with both flexbox and grid so that you understand how they work because I also struggled a lot in the beginning with how to use them for centering things, especially when there are other components involved, like a footer and header.
Anyway, aside from comments on centering, one suggestion I have for your solution is to add a 1rem margin around it so that for smaller browser widths, the sides of the component won't be touching the browser. I really think you did a great job on the whole, and the real challenge will come when you need to work with responsive design (as in building a mobile view and desktop view), but no worries, I think you'll be learning lots when you put your skills to the test!
Marked as helpful
@lily-oliver
Posted
@elaineleung Thank you so much for your encouragement and for taking the time to write all of this! Your explanation of centering is much clearer to me than what I was finding before. I get discouraged frequently, but your feedback really helps. 😊
