Skip to content
OverviewSolutions
17
Comments
97
Steve
@peanutbutterjlly

All comments

  • Steve•1,170
    @peanutbutterjllyPosted 10 months ago

    although that looks like a tasty omelette (and easy recipe), it doesnt look much like the QR code in the design

    0
  • ThanHtike（テンタイ）•110
    @CGM-ThanHtikeSubmitted 10 months ago

    Thank you for taking the time to review this

    -I'm focusing on practicing 3D animation, particularly the creation of card rotation animations with a 3D perspective in this challenge.

    Additionally, I've implemented error handling using JavaScript:

    -Now, if you attempt to submit without selecting a rating, an error message will be displayed.

    -Also, if you inspect and modify the rating value to be less than 0 or greater than 5, an error message will appear.

    If you have any suggestions for improving my code, I would greatly appreciate your feedback.

    Thanks in advance!

    Interactive rating component solution (with 3D animation & vanilla JS)

    1
    Steve•1,170
    @peanutbutterjllyPosted 10 months ago

    that 3D animation looks SLICK! i like it!

    good job

    1
  • Steve•1,170
    @peanutbutterjllyPosted 10 months ago

    It may not be pixel perfect, but i think it looks great!

    good job

    1
  • JanAbe•230
    @JanAbeSubmitted 10 months ago

    I used an empty cell in css grid to push a column more towards the center. Is this considered bad practice? It felt wrong doing it. But I didn't know how to achieve the same result otherwise.

    Feedback is welcome.

    1
    Steve•1,170
    @peanutbutterjllyPosted 10 months ago

    I've seen people do layouts where they'll have small cells on the left and right side and put all their content in the middle, then when they want something to take the full width, have it use all three columns, so i wouldnt say your fix was 'bad'.

    A different solution probably wouldve been to use justify-content or margin/padding.

    good job on getting it figured out!

    1
  • Ynotlocin1•80
    @Ynotlocin1Submitted 10 months ago

    Hello! On this project, I encountered an issue with the image. I used 'display: block, width: 100%, object-fit: cover' on the image, but when switching from mobile to desktop format, the image does not fill the div. Additionally, I had another question: for code readability, is it better to use as many .class and .id as possible, or is the goal to use as few as possible? Thanks in advance!

    Stats preview card, problem with the image width !

    3
    Steve•1,170
    @peanutbutterjllyPosted 10 months ago

    I can't recommend styling based on #id's, they're WAY too specific and can be a pain to override on bigger apps/sites.

    Regarding classes, it depends on what your teams preference is - if you're coding solo, do what you like best.

    0
  • Guerinik Abderrahmane•480
    @AbderrahmaneGuerinikSubmitted 10 months ago

    Hello everyone👋

    • Here is my first project using react🥳

    • Fully responsive and functional age calculator app 👨👴

    • I used react counter library for the animation of the numbers 🔢

    • Open to any feedbacks, Thank you!😊

    Age calculator app.

    2
    Steve•1,170
    @peanutbutterjllyPosted 10 months ago

    i like the animations.

    looks nice

    0
  • cmdarcy•90
    @cmdarcySubmitted about 1 year ago

    The only difficulty I had was figuring out the color scheme for some of the containers, specifically the number buttons and the star image at the top. Also for some reason I couldn't get the star correctly centered in the img container so if anyone has any advice on what to do there it would be greatly appreciated!

    Interactive Rating Site Using JS,CSS,HTML

    1
    Steve•1,170
    @peanutbutterjllyPosted about 1 year ago

    cheers on getting the challenge done.

    if you want to get that star centered, you can give your div with a class of 'img-container' a display of grid and use the property and value of place-items: center:

    .img-container {
display: grid; 
place-items: center;
}
    0
  • sophie.•150
    @sophie-mc-devSubmitted over 1 year ago

    This is my solution for the Single Price Grid Component.

    • With this challenge I got to practice more responsive design but still feel unsure about it and that I still have a lot of room for improvement.
    • In terms of layout implementation, that is something I really enjoy and feel like my skills are being put to good use.
    • O̶n̶e̶ t̶h̶i̶n̶g̶ t̶h̶a̶t̶ b̶o̶t̶h̶e̶r̶e̶d̶ m̶e̶ w̶a̶s̶ t̶h̶e̶ f̶a̶c̶t̶ t̶h̶a̶t̶ t̶h̶e̶ f̶o̶o̶t̶e̶r̶ d̶i̶d̶n̶'t̶ r̶e̶m̶a̶i̶n̶ c̶e̶n̶t̶e̶r̶e̶d̶ w̶i̶t̶h̶ t̶h̶e̶ p̶a̶g̶e̶ l̶i̶k̶e̶ o̶t̶h̶e̶r̶ p̶r̶o̶j̶e̶c̶t̶s̶ I̶ h̶a̶v̶e̶ i̶m̶p̶l̶e̶m̶e̶n̶t̶e̶d̶. I̶ t̶r̶i̶e̶d̶ t̶o̶ f̶i̶x̶ t̶h̶i̶s̶ b̶u̶t̶ u̶n̶s̶u̶c̶c̶e̶s̶s̶f̶u̶l̶l̶y̶. I̶ w̶o̶u̶l̶d̶ r̶e̶a̶l̶l̶y̶ a̶p̶p̶r̶e̶c̶i̶a̶t̶e̶ i̶t̶ i̶f̶ a̶n̶y̶o̶n̶e̶ l̶o̶o̶k̶e̶d̶ a̶t̶/t̶e̶s̶t̶e̶d̶ m̶y̶ c̶o̶d̶e̶ a̶n̶d̶ c̶o̶u̶l̶d̶ h̶e̶l̶p̶ m̶e̶ f̶i̶x̶ t̶h̶i̶s̶ m̶i̶n̶o̶r̶ i̶s̶s̶u̶e̶. [FIXED]

    I'm happy to hear any feedback and advice to help me improve!

    Single Price Grid Component

    1
    Steve•1,170
    @peanutbutterjllyPosted over 1 year ago

    hey 👋,

    I would change the display on the body to grid (and you can then remove flex-direction, and position: relative), and add grid-template-rows: 1fr auto; that'll make your content take up the majority of the page and the footer (which is set to 'auto') will only take up its size as a row.

    also, in the paragraph of your footer, you can remove the position: fixed; and bottom: 0; from your .attribution class.

    those small details will get your footer on the right track.

    your solution looks great overall 👍

    Marked as helpful
    0
  • Michael Lei•150
    @michaeleiiSubmitted over 1 year ago

    In addition to the main challenge I used the useEffect hook to fetch data from Random User API

    The most difficult part was using learning how to use the before pseudo selector with tailwindcss. Not sure I did the background with the svgs correctly. I still have no idea how to get the top circle in position of the top left corner without it moving :(

    Profile card component (React + Tailwindcss)

    1
    Steve•1,170
    @peanutbutterjllyPosted over 1 year ago

    I love the fact that you used the random user api to generate a new person on each page load!

    your solution looks good too.

    job well done

    1
  • 00YellowLemon•440
    @00YellowLemonSubmitted over 1 year ago

    Hello Front-end friends. I have some trouble on the mobile part. The error message overlaps with button. Can anyone tell how to fix this. Feedback will be highly appreciated

    Responsive Ping

    1
    Steve•1,170
    @peanutbutterjllyPosted over 1 year ago

    hey 👋,

    to give space from the error message to the button below it, you can get your button and add some margin to the top of it on mobile styles, maybe about 2rem;

    good job with your solution!

    0
  • Steve•1,170
    @peanutbutterjllyPosted over 1 year ago

    hey,

    the image doesn't load for me either;

    it looks like in the markup(html) your referencing the image in the images folder but in your repository you dont have an images folder, you have the image in the same directory as your html page.

    you can fix that by changing the src of the image tag to:

    src="./image-qr-code.png"

    hope that helps!

    2
  • MHAA•50
    @MHA2001Submitted over 1 year ago

    In this challenge, I noticed that the appearance of the website is slightly different in different browsers. In my solution there is a gap between the bottom of the page and the content in Chrome but not in Edge. How should we solve these kinds of problems?

    nft preview card

    1
    Steve•1,170
    @peanutbutterjllyPosted over 1 year ago

    hey 👋,

    each browser has default styles for different things that (unsurprisingly) look different across each browser.

    to help with that, you can put a css reset in there and adjust the styles that you want; I really like to use Josh Comeau's reset (I've tweaked it a little bit for my own purposes) as it serves as a good base.

    Josh Comeau: custom css reset

    your solution looks great! and good eye on catching it on a different browser too

    Marked as helpful
    0