Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • uthmvn• 10

    @uthmvn

    Submitted

    Hello everyone. First, please excuse my somewhat stupid questions as I am a total beginner in web development.

    Here is my version of the QR code component challenge.

    Although the rendering seems pretty good, I struggled a lot when it came to center the #container div (horizontally and vertically). I noticed that if the element’s position is set to absolute and you directly apply margin: auto; on it, it’s not going to work. This article (https://programmersportal.com/fix-margin-auto-not-working-with-position-absolute-problem-in-css/?utm_source=pocket_saves) explains that to center horizontally a absolutely positione <div> using "margin: auto;", we should apply a width and specify "left : 0; right: 0;" to that <div> element. In the same way, to center vertically, we should apply a height and specify it a "top: 0; bottom: 0;". It did work, but I still don't understand why.

    Apart from that, since this is my first project, could you advice me better practices or other faster/easier ways to do that ? Take in consideration that I did not learn anything about Flexbox or Grid, yet.

    (sorry for poor english)

    Thanks in advance !

    QR code component using basic CSS properties

    3

    WondaBwoy Kelvin• 260

    @WondaBwoyKelvin

    Posted

    I think with the centering you can either display flex or use the margin property, where you set margin:4rem auto; this will put the container right in the middle, and the 4rem is for the top and bottom margin while the auto is for left and right. I hope this helps, if not you can hit me up on all social media platforms @wondabwoykelvin to help you out.

    Marked as helpful

    1
  • NBD• 240

    @bdal90

    Submitted

    Dear All,

    Here is my next challenge, still an easy one, but full of real challenges to me. The biggest one here is that I was starting to use percentages instead of fixed sizes, like width or height because I have been warned about avoiding the latter. However, I noticed that here, it worked better to add a fixed width to keep it responsive. Why is that? Is there a consesus on when to use percentage and when adding specified amounts is preferred?

    Thank you for checking out,

    Cheers to you all,

    Dalma

    Next Challenge, Still Learning...

    1

    WondaBwoy Kelvin• 260

    @WondaBwoyKelvin

    Posted

    Great work, there are some issues, it is not supposed to be scrollable. The head of your container cannot be seen. I think these videos can help you out with the measurement. https://youtu.be/N5wpD9Ov_To?si=q2eqvPSuNNglebKz https://youtu.be/IWFqGsXxJ1E?si=JqRX_wak1mZ73vk2

    0
  • Sachin• 30

    @SinniS1

    Submitted

    • QR-CODE-COMPONENT-MAIN
    • Project is on CodeSandbox
    • Made with vite + typescript + tailwindCSS

    QR-CODE-COMPONENT-MAIN

    1

    WondaBwoy Kelvin• 260

    @WondaBwoyKelvin

    Posted

    Top notch, superb .Can you share where you got your images ?

    0
  • Univer4219• 40

    @Univer4219

    Submitted

    • What I found difficult was the positioning and mobile responsiveness, I only did the desktop preview.
    • I am very sure of my codes.
    • I would love to know more about best practices but I currently don't have any questions

    Desktop Design Product Card

    1

    WondaBwoy Kelvin• 260

    @WondaBwoyKelvin

    Posted

    The container needs border-radius as well as the image, check out the style guide in the folder you downloaded to get the right fonts as well as the colors. I haven't got much experience but you can check out my code and website. Site https://app.netlify.com/sites/astonishing-frangollo-1c7ae2

    code on GitHub https://github.com/WondaBwoyKelvin/product-preview-card

    it is not perfect but could help you out a lil

    Marked as helpful

    0
  • WondaBwoy Kelvin• 260

    @WondaBwoyKelvin

    Posted

    upload picture using the img element in html, also when you create the container then you put the image right before any content. < img src="you can use a backslash to get folder paths" alt="a word about the image">

    Marked as helpful

    0
  • WondaBwoy Kelvin• 260

    @WondaBwoyKelvin

    Posted

    everything thing is fine on ma end but when i upload everything seems not to work out

    0
  • WondaBwoy Kelvin• 260

    @WondaBwoyKelvin

    Posted

    You need to increase your border-radius a lil bit more and also check on the font for the improve text.

    1