Which areas of your code are you unsure of?
Handling the container border-radius, I made sure I applied the same to the image container, the container and then when I swicthed to desktop, I had to remove and add some.
Do you have any questions about best practices?
How to organize CSS file content, in order of appeareance? an entire element and its child first?
Hello!
Although I'm a bit new myself to development I hope I can help with some tips I've learned myself.
Handling the container border-radius, I made sure I applied the same to the image container, the container and then when I swicthed to desktop, I had to remove and add some.
What I find easiest when handling border radius is using the border-radius property on the card container so that it applies it to every corner without having to declare each corner individually. When it comes to images corners that stick outside the container, you can also apply overflow: hidden; which will in turn hide the bits flowing outside the container.
How to organize CSS file content, in order of appeareance? an entire element and its child first?
When it comes to CSS I like to declare variables at the top in the :root so that I keep most of the commonly used ones in one place such as color, font-size, etc. After that I like to declare most of the general styling I can in the body so it cascades down into the rest of the content which helps with not having to declare styling to every component.
Hope that helps! Happy coding!
-Aaron
Hello 👋,
I had quite a time learning how to position the icon on the image :hover 🙃.
I am unsure of the quality of my CSS, but as I continue learning, I will revisit these first few projects.
Any tips on where to improve my work would be greatly appreciated.
Going to keep doing the challenges to improve my skills.
Thank you for taking the time to view my solution!
Hello!
Although I'm pretty new to web dev, I think your project looks great! One tip if I may suggest is centering your card using something like flex or grid instead of setting a margin-top on the body so that it remains responsive.
The method I use is setting a html, body { height: 100%} on a css reset. Next is setting the body { display: flex; align-items: center; } to center it vertically on the page.
The issue I've come across using an attribution and flex is that it centers both the content and attribution together. To combat that I've been setting mine as a footer with the following
.attribution {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
the bottom: 0; and left: 0; pushes it to the bottom, and left with width: 100%; allowing it to take the full width of the page. Lastly text-align: center; to allow it to center within the width. This resource has helped me in learning how to use flex CSS Tricks - Flexbox
Hope that helps some. Happy Coding!
-Aaron
Centring the area was the difficult topic.
Hello!
Although I'm new to web dev myself, the method I've been using is to set the html, body to a height of 100% in my css reset to ensure the parent takes the full height of the page first. Next on your code, you can set the body to
body {
display: flex;
flex-direction: column;
justify-content: center;
}
That should center your card in the middle of the page. This resource has helped me lots in learning how to use flexbox CSS Tricks - Flexbox. Hope this helps! Happy Coding!
-Aaron