Skip to content
Submitted 5 months ago

QR code component with Astro, Tailwind CSS, Bun, and Netlify

SmartAce•170
@Smart-Ace-Designs
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?

Using Astro and my own Astro template to implement the solution. However, using an Astro component within the project might have been a bit overkill for getting to the desired outcome. Frameworks like Nuxt/Vue and Astro seem to be component-centric, so I am try to get into the habit of using components.

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

I struggle with CSS layouts. I had to "cheat" a bit to get started - but then was able to finish the rest on my own.

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

Sometimes I am not really sure where to put margins. Do I use it on the upper element, to add space between it and the lower element? Or vice versa? Or does it not matter? Same for left vs. right elements.

Using hard-coded widths seems "restrictive". Is there a better way to set the width that is more dynamic instead of using a hard-coded width of "360px".

I have several issues with Frontend Mentor itself:

  • The screenshot does not match my live solution. For example, my paragraph has three lines but the screenshot of my solution only shows two lines. This seems to be a bug with the screenshot process. I tried creating a second screenshot and got the same results.

  • Code blocks in this section are not being saved if they are at the very bottom. I tried using both of the options as described in the markdown help but neither worked. It shows it in the preview correctly, but when I hit submit or update solution, the content within the code block is lost. I have tried several times. Here is an example - you will see it is blank after I update solution:

``

Community feedback

  • Alex•3,130
    @Alex-Archer-IPosted 5 months ago

    Hi!

    About margins. Specifically in this project there is not a much difference whether you are create spaces between elements with margin-top or margin-bottom (also you can use flex to create gaps if you are familiar with it). And you did right thing by making gaps on the edges with padding =)

    About width. Again you are already did it right with max-width property. When the screen size became less than 360px your element will take 100% of it. You can add width if you want change those percentages.

    .container {
    width: 95%;
    max-width: 360px;
}

    Oh, and I suggest you not to use role for the main tag. It already have all necessary semantic and using role could override it. Add this attribute only in rare cases when you can't use semantic tag for some reasons.

    Well, those were more confirmations than advices, but hope it could help =)

    0
    SmartAce•170
    @Smart-Ace-DesignsPosted 5 months ago

    @Alex-Archer-I

    Excellent - thank you for the feedback. I will remove the "role" attribute.

    1
    Alex•3,130
    @Alex-Archer-IPosted 5 months ago

    @Smart-Ace-Designs

    You're welcome. Feel free to ask something if need =)

    0
  • henryapm•120
    @henryapmPosted 5 months ago

    I ran into the same question when it comes to hard code width, I was trying to used max width but it was not working so I decided to go with hardcoding the width and height!

    If you found a better solution after all hit me up.

    Btw did you get the pro version? I'm still sticking with the free one to see where it takes me!

    0
    SmartAce•170
    @Smart-Ace-DesignsPosted 5 months ago

    @henryapm

    Thanks for the comment. I noticed my height does not match the design when the screenshots were compared side-by-side. Not sure if that is because I messed up with the margins and font size or I need to hard-code the height as well (I just did width).

    Yeah - I am sticking with the free version for now too. I am not a professional developer (I work in infrastructure by trade supporting Windows servers, AD, email, etc.) so this is just a hobby for me for the time being. Empty nester :)

    0
    henryapm•120
    @henryapmPosted 5 months ago

    @Smart-Ace-Designs

    Yeah no problem I'm glad to do it, and yes that's what I ended up doing, the bad thing about the free version is that you can only do so many screenshots retake of your site.

    I'm not a professional developer either but I'm considering getting the paid version since I want to work with the more complex challenges, they look pretty interesting and real life problems, probably once I start in the field I won't get to build any of this but is worth to learn how to do it in case you have to participate in a part of a large project.

    And is very interesting, so you work with servers, networks and stuff, are you planning on switching careers to being a developer?

    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