Skip to content
OverviewSolutions
12
Comments
12
DaFlusher
@DaFlusher

All comments

  • DaFlusher•350
    @DaFlusherPosted 9 months ago

    Added a setinterval() to refresh the advice every 8seconds

    0
  • DaFlusher•350
    @DaFlusherSubmitted 11 months ago

    I tried using Reactjs this time around. Styling was done with sass. For the lightbox feature, I imported an open source lightbox from reactjsexample site. I look forward to customizing this further. The cart was nested in my navigation component, but had to be away of the cartNumber state. In order to avoid prop drilling, I used the useContext hook. Suggestions on how to improve, would be much appreciated.

    Responsive Ecommerce Product Page

    1
    DaFlusher•350
    @DaFlusherPosted 11 months ago

    I reviewed the code. Instead of using the lightbox component from reacjsexample.com, I imported the react-modal from their github repo and customized it. The lightbox now looks much closer in appearance to that of the design. I still have to work on the add to cart functionality.

    0
  • DaFlusher•350
    @DaFlusherPosted 11 months ago

    Hello Yadier! Nice job. The mobile version looks good. The web version though has the thumbnail images spilling over onto the product section, so the user cannot interact with the buttons. Maybe, you can check it out. It happens from a screen width of about 1035px. I would also suggest adding some padding to the navigation for the mobile view. Goodluck!

    Marked as helpful
    1
  • Muraddevp•20
    @MuraddevpSubmitted 11 months ago

    hello every one , this my first challenge on frontend mentor and it wasn't difficult i was enjoying while working on it . i would like ask professionals users about best practices and how to get a solid knowledge while practicing.

    grid section , flexbox ,CSS ,html

    1
    DaFlusher•350
    @DaFlusherPosted 11 months ago

    Nice job Muraddevp! It looks great. I just have a few suggestions : 1)adding semantic html like 'main' as a wrapper after the body element, instead of a div. 2)Using relative units for padding,font-sizes, 13px = 0.8125em/rem. 3) Not setting absolute values for grid template rows, I personally think using grid-auto-row: minmax(); is more responsive. 4)Finally, from my end, at a screen-width of 767px, the elements at the edge were clipped, maybe try increasing it to 1200px or more. Well done and goodluck!

    1
  • DaFlusher•350
    @DaFlusherPosted 11 months ago

    Nice work Jacob! I almost couldn't tell the transition between the hero section and the next section. The background was quite something. I noticed the mobile screen for the links(about us down to privacy) had a smaller margin/padding when compared to the rest of the footer so it was a bit to the left of the screen. Well done!

    Marked as helpful
    0
  • DaFlusher•350
    @DaFlusherPosted 11 months ago

    Good job LakryM. I noticed the mobile page was moved a bit to the right of the screen. The Bootstrap container-fluid class can help with that. Maybe you may have used different utility classes for the different sections. Using bootstrap to get the off canvas side navigation with a drop-down was a little tricky for me as well. Maybe you can look up the navbar section of bootstrap docs, there is an offcanvas solution there. Well done!

    0
  • DaFlusher•350
    @DaFlusherPosted 11 months ago

    I think it looks nice. Good job Marcel! I noticed the testimonial section breaks layout at about 700px width. Looks like you did not add the wave part, mine really gave me a tough time. Well done!

    0
  • DaFlusher•350
    @DaFlusherPosted 12 months ago

    Very nice work. I actually downloaded this challenge last week to help me practice sass. Your work has inspired me to get coding. Cheers!

    3
  • DaFlusher•350
    @DaFlusherPosted 12 months ago

    Really nice work. The dropdown shadows had a really natural look. I absolutely loved the glassy effect of the side navigation, it had killer transitions. Although, there is some malalignment once the accordion is opened. The Headline text appeared a bit squashed at about 805-1100px screen width. Finally, there were no hover effects for the learn more button, and navigation links on the left side of the page. In general, I think you really did a great job. Cheers and Goodluck!

    0
  • DaFlusher•350
    @DaFlusherPosted 12 months ago

    Great work. I loved the shadow effects for the dropdown menu, I completely forgot about that in mine. I equally liked the accordion style. I loved the button hover animation, but I noticed they were not the same. The 'register' button used the translate feature while the 'learn more' button changed its background color, personally I think it's always nice for similar interactive elements like buttons to have uniform animations. The side navigation also appears instantly from the right side of the screen, maybe you can try adding an animation transition property to ease it onto the screen. There's also a bit of an mal-alignment with the login link and register button at about 1006px screen width, you can check it out. In general, its a really nice work. Cheers and Goodluck !

    Marked as helpful
    0
  • DaFlusher•350
    @DaFlusherPosted 12 months ago

    Nice work Greg, I loved your mobile menu. I used bootstrap for mine so I could not easily make the dropdown items appear like an accordion, I might work on that later on. How about adding some hover effects? It would really improve accessibility for the interactive elements like nav links and the buttons. Your hero image also appeared a bit squashed at about 500-770px width. Finally, the transitions for the side nav appeared instant, maybe you can try the adding the animation transition property. Cheers and Goodluck!

    Marked as helpful
    0
  • DaFlusher•350
    @DaFlusherPosted about 1 year ago

    Nice job Muhammad! Bootstrap really makes styling easier. It looks quite nice on smaller screens, all well aligned. I noticed the headlines did not have hover effects, but the 'read more' button did. I also had issues with aligning the two grids(sidebar and footer). Maybe with more work on customizing bootstrap styles, we could try using grid-columns to assign particular gridlines. Good work with semantic tags. I noticed you used cards to section the different contents of the side-bar and the footer, I'll give that a try. Goodluck!

    Marked as helpful
    0