Skip to content
Submitted 10 months ago

QR Code Component

#accessibility
Andres Rios•20
@rivers07-maker
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

This is the second time I do the QR Code Component Challenge and I've notice I done it quicker and better at this attempt.

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

Never used Figma as design files and I'm wondering how we can take advantages from the measurements and translate that into code. Because for me I just used the hexadecimal number for colors, nothing else. My code was based purely from a visual approach.

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

The challenge suggested us to use Pre-Processors as Sass, Less, etc... My question would be if is better to use Tailwind CSS and what opinions do people have about that ??

Community feedback

  • Brian Michael Poblete•490
    @Brian-PobPosted 10 months ago

    Hi there Andre! Great job on your solution!

    To answer your question about pre-processors vs Tailwind and which is better, the only correct answer is "it depends."

    First, if you are learning CSS, I would personally recommend starting out with plain CSS and familiarizing yourself with the properties and features that you will regularly use.

    Once you feel comfortable with plain CSS, you can look into pre-processors and what they offer. The biggest advantages of pre-processors (IMO) include being able to write CSS faster and programmatically by making use of things like loops and lists.

    For Tailwind, it's more like an alternative way to writing CSS. It's slightly more detached from regular CSS compared to using pre-processors, but using it will still give you a better understanding of CSS properties compared to using a component library or framework like Bootstrap or Material UI.

    Either way, pre-processors and Tailwind (and even component libraries) are useful tools when used in the right situation. There is nothing wrong with either decision and you will end up learning useful skills and gaining more knowledge no matter what you choose.

    I hope this helps!

    Marked as helpful
    1
    Andres Rios•20
    @rivers07-makerPosted 10 months ago

    Hi there Brian!

    Thank you for taking the time to write and clarify my doubts.

    Following your suggestions I'll continue practicing plain CSS and then look into pre-processors.

    My only request would be if you can hand me some step by step resources, approach or tecniques to have a learning process and improve my skills in both plain CSS / pre-processors. Because you know that when tackling the Frontend Mentor Challenges one need to have previous knowledge in order to successfully go through them.

    Thanks again and hoping for some help in this regard!

    0
    Brian Michael Poblete•490
    @Brian-PobPosted 10 months ago

    @rivers07-maker Of course!

    I personally like to read official documentation first so a good place to start is the official sass/scss docs.

    If you also like videos, here's a couple good ones by Fireship and Kevin Powell.

    Marked as helpful
    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