Article preview component master using Bootstrap and Vanilla JS

Community feedback

• 

  o-k-harmash•160

  @o-k-harmash

  Posted 15 days ago

  Hi! I’m not an enterprise-experienced front-end developer, so this is not a recommendation — just some suggestions and thoughts. 😊

  ---

  🔍 On the use of React and Bootstrap

  I’m not sure whether the solution is using React, even though the #react tag is present in the solution explorer. 🤷
  I see you’re practicing with Bootstrap, which is interesting! To explore more about your skills and improve readability, I recommend checking out some useful articles from the Future Learning Paths section:
  👉 Cube CSS — Frontend Mentor Learning Path

  📌 Semantic and Accessibility Notes

  Consider using <section> only for content that needs to be highlighted or segmented for Assistive Technology (AOT).

  In the case of the card's main content only need to have the semantic meaning, anouther — I think a regular <div> is enough and more appropriate.

  As for the "SHARE" label — I'm sure it should not be written in all caps directly in the HTML. It’s better to:

  • Use a <span> (or similar inline element)
  • Apply uppercase styling via CSS (e.g. text-transform: uppercase)
    rather than writing it in capital letters directly in the template.

  This way you keep content semantically clean, and styling logic remains where it belongs — in the CSS.

  If you style your elements with Bootstrap utility classes like pt-32, remember: using custom classes like pt-32 once in a DOM element doesn’t mean this should be the general approach. Balance is key use BEM class name for element like title and style padding: 32px.

  ---

  💡 About your Tooltip

  Your tooltip looks a little bit shifted. I haven’t checked in detail, but it could be solved with a combination of:

  • transform
  • position: relative/absolute
  • top, left, etc.

  These CSS properties used together can help you create universal tooltip positioning inside a relatively positioned parent.

  ---

  🎨 On Styling Methodologies

  I suggest combining:

  • BEM (for unique, structured element styling)
  • CUBE CSS (for repeatable styling of elements that appear once per page)

  You’ll find this combination pleasant and scalable.

  ---

  📦 On Footer Handling

  You use multiple views for the footer — similar to what I implemented.
  In your case, the footer is external and on the same node level as the card content, which is clean and simple.

  In my implementation, I used a small trick: I changed margins of my base card footer to preserve a more traditional layout. 😄

  ---

  🧠 UI State Management via JS

  You're managing UI states through JavaScript and tracking screen size. This approach is good, especially for controlling accessibility attributes like aria-hidden.

  In more complex scenarios involving multiple states (macro/micro frontends), I recommend looking into the State Machine pattern.

  It allows you to:

  • Define all possible UI states and their transitions
  • Support multiple flags and conditions
  • Improve maintainability and predictability

  Here’s a good read to get started:
  👉 Finite State Machines in Front-End — Medium

  ---

  Good luck! 🍀
  Looking forward to seeing your comments on my challenge too!

  10

  Marked as helpful