Submitted over 2 years ago

Interactive comments section with React, responsive design and flexbox

#react

Mihailo Dilparic• 190

@TheDilp

Preview site View code

This is a solution for...

Interactive comments section

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

Any feed back is appreciated! More specifically: I've used recursion to find objects in nested arrays, is there a better way I'm missing? I tried getting as close to the provided designs as possible, this is something I'd like feedback on in particular.

Cheers!

Community feedback

AK• 6,700

@skyv26

Posted over 2 years ago

Hi! Mihailo, I just saw your work and test your responsiveness. You did it really cool and even it is fully functional too.

But your design is not fully responsive. I think you need make it responsive for more user accessible.

I can see you have 3 accessibility issue and the reason is just add main tag inside the App component at top or you can simply change div with main tag. It will solve your accessibility issue.

Overall Really nice.

Good Luck

Marked as helpful

Mihailo Dilparic• 190

@TheDilp

Posted over 2 years ago

@skyv26 Thanks for the tip, I've added the main tag and it fixed 2 of the issues, the last being the requirement of an h1 tag which is not part of the given design.

Regarding responsiveness, that is something I'd implement in the future if I were to continue with this project. The challenge was to replicate the designs at the given breakpoints that the style guide provided, which are 375px and 1440px so I stuck to those instructions. Though I completely agree with you, it would be something to work on further.

Cheers and thank you for the feedback

Rio Cantre• 9,710

@RioCantre

Posted over 2 years ago

Hello there! Awesome work with this project! As of the design, pretty impressive. You did well on implementing the components, all are on point! Maybe add a padding or margin around the body tag to eliminate the white space on the bottom.

Once again, Great work! Cheers!

Marked as helpful

Mihailo Dilparic• 190

@TheDilp

Posted over 2 years ago

@RioCantre Thank you very much!

Rio Cantre• 9,710

@RioCantre

Posted over 2 years ago

@TheDilp Tip: Click on "Generate Screenshot" to view updated solutions.

Kriyanshi Shah• 90

@kriyanshishah

Posted over 1 year ago

Hey, great work on the CSS of the project, It must be very challenging. but when we submit a reply it gets added to the wrong comment. Please check it.

Hamza• 30

@Muhammad-Hamza-Saeed

Posted over 2 years ago

how long did it took you to complete this?

Mihailo Dilparic• 190

@TheDilp

Posted over 2 years ago

@Muhammad-Hamza-Saeed Perhaps about 5-7 days, though the number of hours varied per day from 1 to 6+ hours. Most of that time (maybe 75%) was spent on the CSS to get all the padding and margins just right. The functionality was more or less straightforward.

Hamza• 30

@Muhammad-Hamza-Saeed

Posted over 2 years ago

@TheDilp thanks for replying, one more question How long have you been coding/learning?

Mihailo Dilparic• 190

@TheDilp

Posted over 2 years ago

@Muhammad-Hamza-Saeed No worries. At least 5+ years, though again there's lots of gaps in between, sometimes with months of not coding at all. It's been a hobby for a long time, only recently have I taken it more seriously and decided to pursue it as a career.

If I were to guess as to how long I've been coding consistently, that would be about a year.

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