Skip to content
OverviewSolutions
20
Comments
115
Rayane
@RayaneBengaoui

All comments

  • Rayane•1,935
    @RayaneBengaouiPosted about 3 years ago

    안녕하세요 Nari Lee,

    Congrats for completing this challenge ! 🙂

    I'd like to suggest :

    • Add some CSS transition to make your hover animations smoother. For example It could be something like transition : all 0.3s ease where "all" is the CSS property you want to animate. This article is great also to understand how and when to use ease effects (especially ease-in and ease-out) : https://css-tricks.com/ease-out-in-ease-in-out/

    • I would personally try to break down the Calculator component into smaller pieces to make it simpler to read. Here I can see multiple useEffect hooks, thus they could be separated into other components that only do only 1 thing.

    • It's great that you took the time to handle non authorized values such as 0 persons or 0 dollars, but to push it even further you could handle the situation when there are too many people compared to the bill amount. If I put 3$ with 1000 persons the tip amount and total are equal to 0.

    Otherwise, well done for the challenge and it's also responsive, which is great !

    Have a nice day ! 🌞

    0
  • Rayane•1,935
    @RayaneBengaouiPosted about 3 years ago

    Hello Mehmet Can BOZ,

    Congrats for completing this challenge ! 🙂

    I'd like to suggest :

    • I don't think you are using the correct font from the design (Kumbh Sans)

    • Some text colors/weights are a bit off compared to the design

    • I would add object-fit : cover to your slider image to make sure the image isn't stretched.

    • When an image is opened from the slider, I think you should make the background darker for a better contrast.

    • On the mobile menu, I would add cursor : pointer instead of text here.

    Have a nice day ! 🌞

    Marked as helpful
    0
  • ApplePieGiraffe•30,545
    @ApplePieGiraffeSubmitted over 3 years ago

    Hello, everybody! 👋

    I finally completed another challenge! 🎉 I know it's been a while, but I'm happy to submit another solution after taking a little break. 😆

    This was a short, simple challenge that I created with Svelte. Svelte is such a joy to use and it worked out really well with GSAP (which I used to add the animations to the site). I also used ScrollTrigger and smooth-scrollbar to enhance the animation and scrolling experience just a bit! 😀

    And for a tiny surprise—scroll past the hero section and back again to toggle the avatars of some of your favorite Frontend Mentors! 😆

    Of course, feedback is welcome and appreciated! 😊 Do let me know of any issues you find (since I'm afraid I'm bound to have missed something somewhere)! 😅

    Oh, yes, and click on the giraffe for the attribution. 😉

    Happy coding! 😁

    Meet Landing Page | Svelte + GSAP | Surprise!

    18
    Rayane•1,935
    @RayaneBengaouiPosted over 3 years ago

    Hello APG ! 👋

    I'm a bit late on this one but as everyone already said this looks AMAZING and as always, the animation is so smooth 🤩.

    I wasn't ready to see me on the scroll back haha, nice easter egg, thanks a lot ! 😊

    Have a nice day ! 🌞

    1
  • Rayane•1,935
    @RayaneBengaouiPosted over 3 years ago

    Hello Lucas Pedro,

    Congrats for completing this challenge and trying out React! 🙂

    For a little project like this one, it's quite heavy, but when you'll do bigger projects with React you'll see how enjoyable is it to re-use components and manage state ! 😉

    Here I would just suggest to use mix-blend-mode: multiply on your image rather than filter to mix it with the purple background and thus get closer to the design.

    Overall, well done for the challenge and happy coding ! 😃

    1
  • Rayane•1,935
    @RayaneBengaouiPosted over 3 years ago

    Hello Kadheryna,

    Congrats for completing this challenge ! 🙂

    I'd like to suggest :

    • Your background-size property is invalid. Instead of having background-position: top-left, bottom-rigth; , it should be background-position: left top, right bottom;. There was a typo on "right" and there is no need to add "-" between values.

    • Add min-height : 100vh to your body. It will make sure that your body covers the entire viewport, thus, your second background image can position bottom right correctly.

    • Modify the font-weight property of your <h1> and the text in the reviews to match better the design.

    • Use the max-width property on your boxes so that they don't overscale on big screens.

    Overall, well done for the challenge and happy coding ! 😃

    0
  • SukiyakiFiend•115
    @josuke0227Submitted over 3 years ago

    It was the first time for me to build multi-background web site. The approach I took was to build the whole contents except background, then encapsulate them in the <ContentsWrapper> element, then put it into entire content container <Container> which has background element <Background > with "absolute" position like below. I'm appreciate if there are any good approaches to build multi-color background.

    <Container style={{ height: "total height of <ContentsWrapper>" }}> <Background /> // contains top BG and bottom BG

    // put the content onto Container which has background

    <ContentsWrapper style={{position: "absolute", top: "0", right: "0"}} >...contains whole content </ContentsWrapper> </Container>

    Finally, for signup page, I decided to give boolean attribute "signup" to elements which have similar style between homepage and signup page in order to make my code DRY, but it resulted in repetitive use of "signup={signup}" for elements, also I end up putting so much "${props => props.signup ? signupStyle : homepageStyle}" for styled components.

    I decided to take this approach because I didn't want to make similar components and I felt that Context API is a bit exaggerating because the "signup" prop drilling was just few levels down.

    If there are any questions or unclear points, feel free to ask.

    Thank you for reading :)

    Officelite coming soon site with React, styled-component, and Joi.

    1
    Rayane•1,935
    @RayaneBengaouiPosted over 3 years ago

    Hello Josuke,

    Congrats for completing this challenge ! 🙂

    It looks super nice ! I really like the animations on scrolling, I saw you used AOS, I've never tried it before, is it great ?

    I also love the way your form inputs behave with the label moving to the top ! How did you make this effect ? I'm curious about that ! 😁

    Have a nice day ! 🌞

    1
  • Rhona•60
    @rhonallSubmitted over 3 years ago

    Hi community,

    Not sure why but there is a scroll bar when I preview the live site, I have set the body as 100vh already :(

    Any feedback will be much appreciated :)

    3-column preview card component

    2
    Rayane•1,935
    @RayaneBengaouiPosted over 3 years ago

    Hello Rhona,

    Congrats for completing this challenge ! 🙂

    I'd like to suggest :

    • Add border: solid 1px transparent to your anchor tag to fix the "resizing" effect on your container during hover. You can read an article on how the box model works in CSS with content, padding, border and margin to understand better why it behaves like this.

    • You have a vertical because your .container is declared with a margin of 2rem while it is already 100% of the height. So you should remove this margin, but then, there is still a little bit of scrolling. It's because there is a default margin to elements in CSS, thus, your body has a default margin of 8px. To fix this, just add margin: 0 to your body and the Y scroll should be gone.

    Overall, well done for the challenge and happy coding ! 😃

    0
  • Rayane•1,935
    @RayaneBengaouiPosted over 3 years ago

    Hello Abhijit Paul,

    Congrats for completing this challenge ! 🙂

    I'd like to suggest :

    • Rather than playing with opacity of the image, here, the mix-blend-mode: multiply property will help you to get closer to the color of the design.

    • I think that adding line-height to your <p> tag also would be great to add spacing between lines.

    Overall, well done for the challenge and happy coding ! 😃

    1
  • TrakaMeitene•505
    @TrakaMeiteneSubmitted over 3 years ago

    I'm proud of my JavaScript solution, although it's from a tutorial, I've made a lot of effort to get it work and understood a lot of processes, how it should be put in the code.

    I focused on functionality and did not made the design perfect on all screens. Need some break from this one.

    FAQ card with JS

    1
    Rayane•1,935
    @RayaneBengaouiPosted over 3 years ago

    Hello TrakaMeitene,

    Wow ! Already another challenge completed ! 🙂

    In the FAQ section I have to click twice to get the answer displayed. The first click toggles a display: none and the second the display: block. Maybe it should be inverted ?

    Also, for some media queries, the cube is floating in the middle of the container and sliding on the X axis. Lastly, I think the font weight should be lighter to match the design.

    Overall, well done for the challenge, image positioning is not an easy one on this challenge.

    Happy coding ! 😃

    EDIT : I just checked you JS code. First it's better to make a separate file for the JS to keep things clean.

    1
  • Rayane•1,935
    @RayaneBengaouiPosted over 3 years ago

    Hello Tyler,

    Congrats for completing another challenge ! 🙂

    In addition to the great feedback of @tediko, I would suggest to add more padding to your buttons to match better the design and font-family: inherit to override the default font.

    Also, I would change the break point on the media query as the content overflow the screen between 500px and 1100px.

    Overall, well done for the challenge and happy coding ! 😃

    Have a nice day 🌞

    1
  • tediko•6,680
    @tedikoSubmitted over 3 years ago

    Hello👋!

    That was a simple and fun challenge, although there was room to try new things and learn something new.

    • Implement prefers-reduced-motion CSS media feature which is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. Prevent animations in brief. Spotted at @brasspetals solution 😅
    • Added lazy load animations for cards. I did it with Intersection Observer API.
    • Added sticky nav menu also using Intersection Observer API.
    • Tried to create more accessible mobile navigation. Used the aria-expanded and aria-controls attributes.
    • As for the Sass part. In the project i used @use since it's recommended to using this instead of @import Kevin Powell video about it. Thanks to @RayaneBengaoui i saw his comment about this.

    Thanks for @grace-snow for helping me with keyboard navigation. Since i change visible order of .creations I had to create other button to prevent firstly tab on last element and only then on first. No specific questions here but any additional feedback will be appreciated!

    Thanks! 😁

    Loopstudios - Sass, intersection observer API, mobile first

    6
    Rayane•1,935
    @RayaneBengaouiPosted over 3 years ago

    Hello tediko !

    Nice to hear that you found comment helpful ! 😄

    I really like all the animations you did on your solution, it looks super cool ! 🤩

    I will definitely study your code, your Sass structure looks really clean and I didn't know about Intersection Observer API.

    Have a nice day 🌞

    1
  • Anna Leigh•5,135
    @brasspetalsSubmitted over 3 years ago

    More animation practice! 😄 Hopefully the screenshot will be ok this time, as the animation is a bit faster than the stats card solution. The animations are only for the "desktop" layout. I think a similar but vertical, "slide down" animation for mobile would be lost on most users due to the smaller screen height and would also be too much movement for a small screen. Let me know what you think!

    prefers-reduced-motion was used to prevent the animations from occuring for those who prefer motion reduced. I also added aria labels to the card links to make them a bit more descriptive, but I'm unsure if this is actually helpful for screenreaders or comes off as redundant. Still learning! 😅

    3-Column Preview Card - SCSS, Grid, CSS Animations (Desktop)

    4
    Rayane•1,935
    @RayaneBengaouiPosted over 3 years ago

    Hello Anna,

    Once again you came with a nice idea on animations 🙂

    I really like the use of cubic bezier as a timing function to get this "coming back" effect at the end of the animation 😍

    Just on your SASS part, instead of using @import with SASS, it's recommended to use @use because the first one is now deprecated.

    You can find more information on the SASS official documentation (https://sass-lang.com/documentation/at-rules/import) where it's well explained. Also here is a great video of Kevin Powell that shows how to use it (https://www.youtube.com/watch?v=CR-a8upNjJ0).

    Happy coding ! 😃

    2