Skip to content
OverviewSolutions
6
Comments
9
Nícolas Gabriel
@Nick-Gabe

All comments

  • Nícolas Gabriel•140
    @Nick-GabePosted almost 3 years ago

    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-GabePosted almost 3 years ago

    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
    @arfarobsSubmitted almost 3 years ago

    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-GabePosted almost 3 years ago

    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-GabePosted almost 3 years ago

    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-GabePosted almost 3 years ago

    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,400
    @denieldenSubmitted almost 3 years ago

    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-GabePosted almost 3 years ago

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

    1
  • Nícolas Gabriel•140
    @Nick-GabePosted almost 3 years ago

    Amazing result! great responsivity aswell

    1
  • Sandra Ise•20
    @sandraiseSubmitted almost 3 years ago

    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-GabePosted almost 3 years ago

    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
    @PatrickCuentasSubmitted almost 3 years ago

    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-GabePosted almost 3 years ago

    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