Submitted almost 3 years ago

CSS flexbox responsive 3-column card preview

Nebiyou Ersabo• 185

@NebiyouErsabo

Preview site View code

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Howdy there, I learnt HTML and CSS few days ago, and this is the second project I have finished. Checkout the web responsiveness and resizing part and let me know what I need to fix. I usually build the desktop design first and adjust it to mobile (which I found very excruciating).

Community feedback

Eric Salvi• 1,330

@ericsalvi

Posted almost 3 years ago

Hey Nebiyou,

Great job on completing your 2nd project. I didn't notice too many things off on the design itself. I would try on your next project to maybe include semantic HTML for your HTML markup, https://www.w3schools.com/html/html5_semantic_elements.asp and for your class names, try the BEM naming convention, https://en.bem.info/methodology/naming-convention/

Keep up the momentum!

Nebiyou Ersabo• 185

@NebiyouErsabo

Posted almost 3 years ago

@ericsalvi Thank you for the feedback!

Eric Salvi• 1,330

@ericsalvi

Posted almost 3 years ago

@Nebiyou12 I meant to also mention that you should give the mobile-first approach a try. I never did that and always struggled to design on mobile-first then trying to override styles and classes for mobile. It was a pain. If you design on mobile-first, you set min-width break points and you notice that you need less CSS for the desktop version versus the other way around.

Grace• 27,650

@grace-snow

Posted almost 3 years ago

I think you need to remove all the brs from this. Use margins for vertical spacing instead,this is not what brs are for

Nebiyou Ersabo• 185

@NebiyouErsabo

Posted almost 3 years ago

@grace-snow oh yes, I know. I was just looking for a quick fix 😂, using those helped a little with the spacings. When I used margins & paddings it messed everything up. Also, I haven't heard about vertical spacing, I guess I'll look more into it. Thank you!

Grace• 27,650

@grace-snow

Posted almost 3 years ago

@Nebiyou12 I just mean use margin to space stuff above and below instead of brs

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