All solutions

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. :)

Share Tooltip is interesting.

1. Tooltip arrow

Used Grid over flex for this layout.

What should be an ideal preference for this layout, CSS Grid or CSS Flexbox?

Please also reply with improvements or suggestions. Thank you.

Used the <picture> element for the first time. Loading different assets for responsive devices. Good challenge for learning.

Future Developments / TODO:

1. All illustrations in picture element as backgrounds to FAQ card and clip them off.

Implemented Background Pattern SVGs with Z-index and absolute positioning. Interested in knowing Alternate implementations, Please share.

Thanks for your review, Take care.

Implemented Responsiveness in Layout using Grid System.

Personal touches:

1. Added Button Shadows.

This challenge was difficult as there are moving pieces/elements for different viewports. Purple Overlay was yet another challenge, solved this with absolute positioning. Had fun, nonetheless.

Q. Is it too much to define image-sizes as CSS Custom Properties, and using them throughout, for overlays/explicit declarations, these definitions can be useful.

Q. Is there a better way or set of rules that can make overlays easier?

:)

Had fun coding this one. Very Elegant UX, Loved the colors and the NFT ㅇㅅㅇ. The Hover Preview-Eye Layer for NFT Preview was a trouble maker, but not for long. Thought of a JavaScript solution at first, but CSS is elegant in its own ways. ¯_(ツ)_/¯

Learned new stuff, Very glad.

Thanks for stopping by. Appreciate your review. :)

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

.

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

.

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

.

Few JavaScript challenges along the way, but had a blast building this. Clean and polished design, props to the designer, lovely work.

UPDATES:

1. Added missing pointing hand for hover
2. Added Disabled state for the button as it's a best practice and a visual cue.

Thank you.

I feel I have extensively and conveniently used Flexbox across this project.

Q1. Can any flexbox alternatives be more efficient in any of the scenarios? (Below is the list of places I used flexbox:

1. Alignment of Discounted and MRP prices.
2. Within the Call-to-action Button for the Icon and Text's Alignment.
3. In Desktop Design, Centering the Card Component vertically and horizontally.
4. In Desktop Design, Flexing Image and Description within card to Row direction.
5. In Desktop Design, Spacing a Column Flex of Card Description elements.)

Q2. Suggestions/Improvements to structure responsive bits in the code. (style.css)

Q3. I have not used img HTML elements for the Card image throughout this project, I used background-image CSS Rule instead, Will this impact SEO and Search results? And is my implementation considered as best practice in the industry?

Q4. Is there a more elegant way to Round corners of our divs, in this case. I had to repeat border-radius at 2 places, one for image div and the other for the card. Can this be improved?

Thanks for reviewing, in advance. Stay safe & take care :)