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

  • Nícolas Gabriel• 140

    @Nick-Gabe

    Posted

    I was going to suggest you to put a space between the text and the button, but you already made that so yeah, I have to agree with you, wow awesome! :D

    0
  • Nícolas Gabriel• 140

    @Nick-Gabe

    Posted

    Hey Luca, what's up? Your solution is really good, the spaces between buttons, the width of the boxes, everything perfect! :)

    I only have a few suggestions for you:

    • On this case, instead of flex, try using grid. It will not change the visual itself, but for me its a good opportunity to train it while making everything responsive.
    • The boxes have borders on every side, but on the design they should appear only in the corners of the boxes. You used the border-radius shorthand right, but by adjusting the values you would get a better result.

    That's it, see ya Luca 👋

    0
  • Arthur Roberts• 410

    @arfarobs

    Submitted

    This is the first time that I have intentionally made one of these challenges responsive, so any feedback would be great.

    Getting the colour on the images was a little tricky.

    I got a little impatient with this towards the end so I may refactor the code in the upcoming days.

    It took me much longer than previously expected.

    //Updated my accessibility errors. Corrected typos. 04/02

    Responsive stats preview card component using flex-box

    2

    Nícolas Gabriel• 140

    @Nick-Gabe

    Posted

    Hi Arthur! Your solution is really responsive, good job.

    But I would suggest you to use landmarks inside your body, they are super important for accessibility. You can see about it right here: W3schools - Landmarks

    And at least for me, the stats tab makes more sense to be an unordered list instead a div.

    Nice solution, see ya Arthur👋🙂

    Marked as helpful

    0
  • Nícolas Gabriel• 140

    @Nick-Gabe

    Posted

    Hi Ibrahim! Great you completed the challenge. I couldn't see your code, because the link may be wrong, but by looking at the website I have some suggestions:

    Im on mobile right now, and the qr-code container is really tiny. To make it responsive, one of the approaches is making a variable width (using % or vw) and a fixed max-width so it doesnt stretch forever. The same can be applied to height.

    If you have any questions, feel free to ask.🙂 See ya

    0
  • Nícolas Gabriel• 140

    @Nick-Gabe

    Posted

    Hi Adithya, good solution! Im on mobile and it looks pretty responsive.

    One suggestion I give you is to use landmarks, they are really helpful for accessibility purposes, making easier for a screen-reader user to navigate through your page.

    I reccomend W3schools to learn that topic.

    0
  • Travolgi 🍕• 31,420

    @denielden

    Submitted

    Hi there :)

    This challenge was to build the QR Code component, but it has become something more complex than a simple component!

    Inspired by another project, I wanted to add features to this challenge using React:

    • On load, it shows the default basic QR Code
    • Added a form that allows the user to enter a website URL to generate a QR Code for it
    • Dynamically update the QR Code as you type the URL
    • Dynamically update the color and background of the QR Code based on the customization input entered by the user
    • When the form is sent, the .png of the generated QR Code is downloaded

    I am eager to further evolve this project and learn much more connecting a serveless database! For now I'd be happy to have some feedback ;)

    Special thanks to @Remus432, he have really inspired me to create this dinamic component!

    Thank you for taking the time to check out my project! And Happy coding ;)

    React QR Code Generator

    8

    Nícolas Gabriel• 140

    @Nick-Gabe

    Posted

    Im really impressed with your result, you surely took the challenge even further. 👏👏

    1
  • Nícolas Gabriel• 140

    @Nick-Gabe

    Posted

    Amazing result! great responsivity aswell

    1
  • Sandra Ise• 20

    @sandraise

    Submitted

    Here's my attempt at the design. I would like some feedback on how to make this mobile responsive, I'm not sure the media query I used is quite right. Thanks!

    Desktop-first QR code component

    2

    Nícolas Gabriel• 140

    @Nick-Gabe

    Posted

    Good work, very organized html! :)

    I noticed your qr-code is on the upper left. A tip I give is that to center the container on the screen, one option is using flexbox on the body and defining a height (100vh is good for desktop, but doesn't work well for mobile) and a witdh (100%).

    body {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    Links if you want to see more: Flexbox, Css Units(vh, vw...)

    Marked as helpful

    1
  • Patrick Cuentas Mariano• 260

    @PatrickCuentas

    Submitted

    Please do not forget to leave me your feedback by taking a look at the code and if you did not understand something let me know as it is always good to be improving.

    Thank you very much ❤

    QR code component with HTML and CSS

    3

    Nícolas Gabriel• 140

    @Nick-Gabe

    Posted

    Awesome implementation and good semantic, congrats! But I would suggest to define a max-width in the .container, because for some screen sizes below 1024px like 1000px, it stays at 89% of the screen because of the content:

     ​.​container​ { 
 ​  ​padding​:​ ​1​rem​ ​1​rem​ ​2.6​rem​ ​1​rem​;
   // max-width: ...
 ​}
 
 ​.​content​ { 
 ​  ​width​:​ ​89​%​; 
 ​  ​margin​:​ ​0​ auto; 
 ​}

    Cheers✨

    1