Submitted about 3 years ago

Article preview component using SASS & BEM

Adam• 430

@aemann2

Preview site View code

This is a solution for...

Article preview component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Fun project -- something that gave me trouble, though, was the photo. I had a hard time getting it to match the proportions of the design spec...seems like they're using some sort of Zoom property in the spec? If you have any suggestions on that I'd love to hear them.

Also, I'd be interested in any critiques of my JS code.

Community feedback

Samuel Palacios• 615

@samuelpalaciosdev

Posted about 3 years ago

Hi, Adam👋

Great job on this challenge. Your solution looks good and it scales pretty well👍

I only suggest some things 😉:

Scaling the card to make it look more like the original design, setting transform: scale(0.8); on the .card element.
Setting the furniture image as a background-image, it will help you, you can control it better than putting that img on the HTML Markup.

I hope you have a nice day, keep coding!💙

Adam• 430

@aemann2

Posted about 3 years ago

@samuelpalaciosdev thanks for the advice. I still have trouble figuring out when to set an img in the markup vs. when to use background-img.

Is there some kind of general rule on when you'd want to set an img in the html? It seems like it's usually better to just set images using CSS because you have more control, even though that seems counterintuitive to me...

Samuel Palacios• 615

@samuelpalaciosdev

Posted about 3 years ago

What a good question.

I suggest you to read this thread on Stackoverflow

Hope you have a nice day, bro💙

Agata Liberska• 4,015

@AgataLiberska

Posted about 3 years ago

Hi @aemann2, I don't think the photo needs to look exactly as it does in the design, but you could set it to as background-image of your div instead of putting it in your HTML, that gives you the option of adjusting background-size and background-position as needed. Just a suggestion :)

Also - it would be great if the social media icons had some hover states - you can achieve that if you add the svg file using <svg> tag.

And as per JS - you could separate your code into functions, like 'openModal' and 'closeModal' but I'm not sure that's necessary here, since it's only used once. Maybe someone more experience could advise, I'd be happy to learn, too :)

Adam• 430

@aemann2

Posted about 3 years ago

@AgataLiberska thanks for the suggestion, the other person to comment also suggested setting the img to background-image. I'm going to dig into the stack overflow thread he linked so I can understand in what situations to use which.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord