Skip to content
Submitted about 3 years ago

Order component card using vanilla JS/CSS - first FEM attempt

Alistair•20
@agarioch
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  • How could I better share CSS across my classes?
  • Am I using BEM correctly? This is the first time I've tried it
  • Are the more effective ways to make this responsive? Cheers :)

Community feedback

  • Ken•4,915
    @kens-visualsPosted about 3 years ago

    Hey @agarioch 👋🏻

    I'll try to answer to your question as good as I can and also give a couple of suggestion.

    1. The fact that you're using BEM convention is already good, and I'd suggest reading this article, and I'm pretty sure you'll find the answers that you're looking for.
    2. I'd say yes, but there are some minor things to fix. For example this class order__plan__icon, I'd write it like this order__plan-icon. Usually you separate a block and a model with these lines __ and the rest with just one line -, unless if it's modifier than with two lines --. You'd see the real power of BEM when you get to this project.
    3. Since this is just a tiny card, there's not much to do with responsiveness, the best you can do is to make it shrink. When you get to a bit more complex project, then you can think about responsiveness and how to make it more efficient. I'd suggest taking this free course by Kevin Powell called Conquering Responsive Layouts. I took this course, and it helped me a lot, it gives a strong foundation of how to code better responsive layout

    Now let's get to my suggestion 🙃

    • For the music icon, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here.
    • Also, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.

    I hope this was helpful 👨🏻‍💻 All in all, you did a superb job, your code is semantic and responsive, keep it up. Cheers 👾

    Marked as helpful
    3
    Alistair•20
    @agariochPosted about 3 years ago

    @kens-visuals thanks a lot for taking time to review my solution. Your feedback is great 👍 Transition on hover and aria-hidden on icons makes a lot of sense. Also really appreciate the links you shared on BEM, responsive layouts and aria ... very helpful! Cheers

    0
    Ken•4,915
    @kens-visualsPosted about 3 years ago

    @agarioch no problem, I'm glad I could be helpful 😇

    0

Please log in to post a comment

Log in with GitHub

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