@starberries
@maina-yusuf
Submitted
What are you most proud of, and what would you do differently next time?
The outlay I was able to achieve.
What challenges did you encounter, and how did you overcome them?
Working with tables, list to achieve what was required.
@starberries
Posted
Hi @maina-yusuf, great work on the challenge! If you're open to a suggestion, one thing I could recommend would be allowing the content to be wider on larger screens for more comfortable reading. A couple common ways to do that would be with the max-width property which would let a container or element shrink to fit smaller screens but expand up to the specified width on larger screens, or using a media query which can be used to update properties on elements under specified conditions (such as the screen size of the user's device).
Looking great so far, keep up the great work!
Marked as helpful
@hanifanwary
Submitted
@starberries
Posted
Hi @hanifanwary, great work with the challenge! Since the text is otherwise centered throughout the page save for the anchor, I would suggest adding a text-align property to the ul tag in order to keep everything looking consistent. Otherwise, I was going to suggest using an external CSS style sheet via a link tag since it helps to keep things organized as a project gets more complex, but I can see you're already doing that with your most recent project which is great to see. Keep up the nice work and improvement!
(Also really sorry if this comment ends up going through twice - something really weird happened on my end website-wise and it didn't seem to go through, but I still wanted to see if I could give some constructive feedback, apologies on that)
Marked as helpful
@MisterWaner
Submitted
@starberries
Posted
Great work on the challenge, @MisterWaner! I really like the usage of the box-shadow transition, it looks really good. Since it snaps back to its original position/styling when the card is no longer hovered, it may look more natural if it instead transitions back to the original position, which you could accomplish if you add a transition property to the .card class itself as well as the one in the hover pseudoclass itself.
Looking really good, keep it up!
@Perry2004
Submitted
@starberries
Posted
Hey @Perry2004, great work! I learned a few interesting things about font properties from looking through your styling, I didn't even know font-optical-sizing was an available property, so that's really cool.
I did notice your container size has a lot of variability based on screen size. If you're interested in giving it a more controlled size range, I can suggest using max-width in place of width and utilizing rem units for measurement. Here's how I set up the container size for mine if you'd like a comparison:
.container {
max-width:20rem;
min-height: 31rem;
}
If you need any info on rem and em, I myself was just recommended this page on the subject, but essentially rem units are based on the root font size, so 1rem by default would be 16px.
Anyway, great work with the challenge, keep it up!