Frontend Mentor | simgrant's profile

Latest comments

@Taylor-McNeilSubmitted 12 days ago

What are you most proud of, and what would you do differently next time?

Figuring out how to invert the images when the user hovers over them.

Next time, I think I won't add images. Im not sure they add to the design.

What challenges did you encounter, and how did you overcome them?

Reusability in styles. I learned about the :root selector and CSS variables to reduce copy and pasting.

If anyone is curious: CSS Variables (Custom Properties) CSS variables allow you to define reusable values in your stylesheet. They follow this syntax:

Declaration: --variable-name: value;

Usage: property: var(--variable-name);

So then you can do things like this:

:root {
    --main-color: #ff6347;
    --secondary-color: #4682b4;
    --padding-standard: 1rem;
}

.card {
    background-color: var(--main-color);
    padding: var(--padding-standard);
}

What specific areas of your project would you like help with?

Hmmm, from a design perspective, are the icons a good addition?

Should then everything have been justified to the left?

Maybe the icons should have been bigger.

Social Links Profile

simgrant•30

@simgrantPosted 12 days ago

Your css is very organized and readable. The style guide is a nice touch! I also like that you experimented with the icons, it’s an interesting addition.

Mateusz Matysiak•60

@Mater9Submitted about 1 month ago

What are you most proud of, and what would you do differently next time?

Creating responsive card layouts using Flexbox
Implementing hover states and transitions
Working with CSS custom properties
Using box-shadow for depth effects
Proper HTML semantic structure

What challenges did you encounter, and how did you overcome them?

The bigest challenge for me was: using box-shadow for depth effects

Blog preview card

simgrant•30

@simgrantPosted about 1 month ago

Your code is very organized and easy to read. I like your use of z-index to position the card behind the image. Just a quick note, you have a small typo in your css file for card_image.