Skip to content
Submitted almost 2 years ago

Responsive 4 Card Layout for 3 viewports, sm, md, lg using React

Rizwan Khan•130
@mdrizwanfk
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

First FEM Challenge using Reactjs Library.

The Card layout is done in React.

Reactjs Development toolchains used: None, just added React components to website

Challenges:

  1. Inability to modularize react code.
  2. TODO: Javascript modules to achieve 1.
  3. Used CSS Absolute positioning for the layout, would appreciate alternate best approaches for the Card layout.
  4. TODO: Try out CSS Grid for Card layout.

Notes:

  1. Use Industry standard React Toolchains for future challenges. :)

Community feedback

  • jaysonalfie•60
    @jaysonalfiePosted about 1 month ago

    Great work and nice use of props. Keep up the great work.

    Happy coding.

    1
    Rizwan Khan•130
    @mdrizwanfkPosted about 1 month ago

    @jaysonalfie Thank you!

    Happy coding :)

    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