Submitted 6 months ago

Blog Preview Card with React and BEM styling

merwhite11•20

@merwhite11

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I am proud of the way I used the Figma preview more effectively to understand design specifics. I also figured out how to make the image responsive using object-fit and a container with a fixed height.

I also discovered a good work flow. First building the skeleton. Then making it responsive, then filling in the detailed css.

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

I couldn't figure out the deployment. I'm getting an error on GitHub pages and Vercel. This is my first time using create-react-app for a project, so there's something in the boiler-plate config or file structure that's throwing it off.

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

Deployment! The index.html is in the build folder and I'm running npm deploy. The command is running in the terminal and returning 'Published' , but I'm getting a 404 on GitHub pages and a syntax error with vercel.

Community feedback

takinabradley•100
@takinabradleyPosted 6 months ago
I like the project! Everything seems pretty neat and the code is easy to follow.

Since it seems like the learner has figured out deployment, I only have a couple comments:

To do the font-size challenge without media queries, they likely could have used something like clamp(). It seems like they used a media query anyway.

There may have been a chance or two to add another component, or at least "BEM blocks" with unique class names here (perhaps a "Tag" component and a "Profile" block?). I like the SCSS, but continuing nested styles like this could become quite long, and you may lose it's readability benefits. An alternative to adding more block names/components might be big obvious comments that draw your attention to where styles for certain parts of the card start, like the card footer.
0

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