Skip to content
OverviewSolutions
18
Comments
5
muhamad
@noheezybucket

All comments

  • Johandry López•220
    @DarKaRorSubmitted about 2 years ago

    Any feedback is appreciated!

    I focused a bit more in the functionality this time around, I'm s till new to React and learning!

    I'm not sure if my folder structure is the best, or if I'm sharing the data between components correctly. I'm also not sure if my control of the state is the best, I decided to use an object state due to the high amount of state variables I had to use, I had to create another state for the input validation though because otherwise it would update one single input at a time and delete the result of the others (if they were correct or not)

    Interactive Card Details Form | ReactJS, SASS, BEM

    1
    muhamad•360
    @noheezybucketPosted about 2 years ago

    Hellooo I checked the result you provided for this challenge.

    In my opinion :

    • You should check the position of the card it's not well centered on the Y-axis.
    • You should check the responsiveness of the page so it can adapt to all types of screen.
    • Check the report for your HTML code, seems like you did not used the max-length property the right way.
    • For the number input you did not limit the number of input to 16 I think it's stopping at 19 numbers.

    Except that you did a great work. Good job mate.

    Marked as helpful
    0
  • Oishik Biswas•70
    @pippal5536Submitted about 2 years ago

    Hi!! I have two questions that I can not answer. a) I messed up the background circle. I used position property. Is there any better or recommended method to code the background image? b) What is the correct method to center the avatar between two divs? I used negative margin but I know it is not the correct method.

    Thank you:))))

    Profile card with CSS flex box and mobile first approach

    2
    muhamad•360
    @noheezybucketPosted about 2 years ago

    Hi ,

    Your HTML code is clean. Seems like you project is looking great on all screen sizes:), but I think you can put some side margin at 320px, there's no space between the body and the borders of the card.

    I hope that you will find the answer of your questions right here :

    a- https://www.w3schools.com/css/css_background.asp

    b- to center the avatar between two divs you can try this in your css:

    .avatar img { position: absolute; top: 50%; transform: translateY(-50%); }

    .avatar { position: relative; }

    Keep coding man.

    Marked as helpful
    1
  • Travolgi 🍕•31,400
    @denieldenSubmitted almost 3 years ago

    Hi community :)

    In this challenge I used tailwindcss for the first time.

    Tailwind is very convenient but sometimes in the elements that need many classes I find the html too long and confusing.

    What do you think about it?

    NFT preview Card component with TailwindCss

    6
    muhamad•360
    @noheezybucketPosted over 2 years ago

    Woaw nice, Tell me, how did you do to make your site as close as the design ??

    1
  • Nick OD•270
    @NickODxyzSubmitted almost 3 years ago

    Hi all,

    Background images and how to move them around absolutely kills me. It would be great if I can get some tips on how best to do this. The two on this little project were a nightmare lol

    What is the go to way for getting a background image to appear? This time round I used padding but it was confusing and I had to use a random % number for it to work. Any tips would be great on this one.

    If you could let me know if I went he best way about adding them in to the HTML and then positioning them in the CSS, that would be great.

    Thanks, Nick

    Profile Card Component

    2
    muhamad•360
    @noheezybucketPosted almost 3 years ago

    Hi Nick,

    For the background images in this challenge, I've putted the images in the HTML and then use position: fixed; property in the CSS to make it stand in the background.

    1
  • muhamad•360
    @noheezybucketPosted almost 3 years ago

    Hello nice work !!! Can you tell me how you did to make your projects dimensions identical to the design ?

    0