Skip to content
OverviewSolutions
2
Comments
4
James Niemerg
@JamesN-dev

All comments

  • James Niemerg•40
    @JamesN-devPosted 4 months ago

    Nice work! looks pretty spot on.

    Only thing i could suggest is wrapping your div attribution into a footer and center it with your page. But the attribution is optional so i'd say overall you've nailed this one. Success!

    0
  • Mohammed Ismail•110
    @Mohammed-App-createrSubmitted 6 months ago
    What specific areas of your project would you like help with?

    Thank you for your feedback

    Blog-preview-card

    1
    James Niemerg•40
    @JamesN-devPosted 4 months ago

    Nice work!

    Everything looks pretty spot on I don't see anything that you really need to change up.

    Maybe generate a new screenshot. The screenshot is missing the border, but i see you did add it in your preview site.

    I'd call this one a success!

    Marked as helpful
    0
  • Abdirahim Ali Mahamoud•380
    @asad102Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Since it is basic and relatively simple, there is not much difficulty in dealing with it except for positioning the card in the center.

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

    adjusting the card center horizontally and vertically

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

    I am waiting for your feedback, thanks in advance

    Designing QR Code Component Using Tailwindcss

    1
    James Niemerg•40
    @JamesN-devPosted 4 months ago

    Not bad ! Your html is perfect and your CSS is very close. Your CSS template has a lot of options. I feel like using it for this simple design might have contributed unnecessary complexity. Is it possible that tweaking all of those classes and making sure your inheritances don't mess with each other caused your title text to not match your sub text? Trying to go through the Tailwind CSS template to see what went wrong with your top and bottom padding was difficult.

    Other than those couple tweaks it looks pretty good!

    Edit: i just looked at your site and its much more spot on! I was commenting only on your screenshot. Looks like you fixed it in your live site. Nevermind my comment then. Nice work. Update your screenshot is the only thing i could offer

    1
  • LeikoRed•10
    @LeikoRedSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Completing the challenge was an achievement despite it being my first time doing this on my own. I have only used HTML and CSS, so I'd consider to use some frameworks to simply my process.

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

    I am not get used to CSS, so it was a little difficult as I went along. However, while researching, I found some properties that helped me a lot.

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

    When moving forward, I consider that I should observe the use of the percentage in the width or max-width, since I would like it to be adaptable to different screen sizes.

    QR Component Challenge using HTML and CSS

    1
    James Niemerg•40
    @JamesN-devPosted 4 months ago

    Not bad for your first time. Pretty good! It’s great that you're diving in head first.

    Here are a few thoughts and suggestions that might help you refine things a bit:

    1. Layout Structure:

      • I noticed you’re using Flexbox, which is perfect for centering elements. One thing you might consider is wrapping related items in <div> containers. It can give you a bit more control over the layout and make it easier to manage styles.

    2. Responsiveness:

      • It looks like you’re using percentage widths, which is a good start. To make sure the card looks good on all screen sizes, you could try adding max-width and min-width. That way, it won’t get too small or too big, depending on the device.
      • Media queries might be something to look into next as well. They let you tweak styles for different screen sizes, like maybe bumping up the font size on larger screens for better readability.

    3. Styling:

      • The box shadow gives the card a nice depth. Great job on that.
      • Your colors match the original perfectly. Great job on that as well.

    4. Image and Text Styling:

      • The rounded corners on the QR code look a little flat on one side. You could fix that by using the same border-radius value instead of different values for each corner.
      • The text looks good and is easy to read. Maybe try playing with the font sizes or weights to create a bit more hierarchy between the heading and the paragraph.

    Overall, you’ve done a fantastic job. You have a solid base here to improve upon. Keep experimenting and having fun. Thats really what its all about.

    Cheers, JamesN

    0