Skip to content
Submitted over 4 years ago

Mobile first, flex-box, react

Shahar Levy•85
@monodonBrand
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

  1. Lighthouse gives this a really bad score on optimization because I use unpkg to get react and babel but actually npm this for a project like this seems a real overkill since you get so many MB in the node_modules folder when this whole thing takes up like 500kb on my drive. So is this a legit practice in this scope of a project?

  2. The way I use components? Ok for this scope?

  3. My flexbox solution, works but should I have given more thought to scaleability and flexibility?

Community feedback

  • Matt Studdert•13,611
    @mattstuddertPosted over 4 years ago

    Nice work on this challenge, Shahar. If you're wanting to use these projects to practice React then it's fine. But I'd typically just use pure HTML and CSS for a project like this.

    Your components look fine. I'd recommend just using an img tag and changing the src for the icons though. It would reduce the code quite considerably. The way you've used Flexbox to position your cards is perfect!

    Let me know if you have any other questions. Keep up the great work 👍

    1
    Shahar Levy•85
    @monodonBrandPosted over 4 years ago

    @mattstuddert First, really appreciate the feedback. I can only imagine how busy you are with the growth of of Frontend Mentor. Of course React is total overkill for something like this.

    Just a question about the icons, my best practice has always been to include svg inline so as to lower the number of requests as I got the impression that even if the img is only a few kb the request itself is worse performance wise compared to the extra code on the markup. Was I wrong to think so? Am I overthinking this?

    0
    Matt Studdert•13,611
    @mattstuddertPosted over 4 years ago

    @monodonBrand no problem! Either way would be fine, to be honest. Reducing HTTP requests is generally a good practice. Although it's becoming less important with the latest version of HTTP.

    Another way of going about this would be to include the SVG code in a separate file and import the content into the file with the component. This would separate it out a bit so that you don't end up with one very large file.

    1

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