Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions20Comments115

All comments

  • Rayane• 1,935

    @RayaneBengaoui

    Posted

    안녕하세요 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

    @RayaneBengaoui

    Posted

    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
  • P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Submitted

    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!

    #svelte#gsap

    18

    Rayane• 1,935

    @RayaneBengaoui

    Posted

    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

    @RayaneBengaoui

    Posted

    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

    @RayaneBengaoui

    Posted

    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

    @josuke0227

    Submitted

    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

    @RayaneBengaoui

    Posted

    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

    @rhonall

    Submitted

    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

    @RayaneBengaoui

    Posted

    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

    @RayaneBengaoui

    Posted

    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

    @TrakaMeitene

    Submitted

    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

    @RayaneBengaoui

    Posted

    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

    @RayaneBengaoui

    Posted

    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
  • P
    tediko• 6,530

    @tediko

    Submitted

    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

    @RayaneBengaoui

    Posted

    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

    @brasspetals

    Submitted

    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

    @RayaneBengaoui

    Posted

    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
  • Rayane• 1,935

    @RayaneBengaoui

    Posted

    Hello E.N.M,

    Congrats for completing this challenge ! 🙂

    I'd like to suggest :

    • To place your boxes, use a display flex or grid instead of trying to position them manually with transform: translate(). If you use flex, you could flex your section and then have 3 children containers, with the middle containing 2 boxes that has display: flex with flex-direction: column. With grid, you could use a 2 rows 3 columns grid and then use transform: translateY() to put side boxes in the middle. You can look my solution if you are curious about how I did it with flex but I hope this explanation could inspire you.

    • I would reduce a little bit the width of the boxes to match better the design.

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

    1
  • Rayane• 1,935

    @RayaneBengaoui

    Posted

    Hello Amir Afshar,

    Congrats for completing this challenge ! 🙂

    I would like to suggest :

    • Add background-repeat: no-repeat and background-size: cover on your header to make the background fill the entire container and avoid duplication of the image.

    • Add something that shows it's processing during the loading time for the user experience. On my solution I used a classic spinner, but also something else.

    • Handle invalid input. You could use a try/catch or even a Regex to filter invalid inputs and display an error message to the user.

    • On mobile view, move the Zoom in/out buttons to the bottom because it's hidden between the info container. If you are blocked, I've made it on my solution to this challenge. Also, you can read the official documentation of leaflet where they explain it.

    • Add some more padding and spacing to match better the design.

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

    0
  • Sara• 180

    @saravdberg

    Submitted

    Hey everyone, I'm pretty new to coding, so any feedback is welcome and appreciated!

    HTML, CSS, JavaScript

    2

    Rayane• 1,935

    @RayaneBengaoui

    Posted

    Hello Sara,

    Congrats for completing this challenge ! 🙂

    Your solution matches well the design and responses well on screen resizing.

    I would like to suggest :

    • Take a look at semantic HTML tags for better readability. Instead of using elements only, there are plenty of other tags that describe your code better.

    • On tablet view (~940px) the text of the class p-blue-box is smashed on the border. So you could handle it in your media query.

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

    1
  • Estèlle• 40

    @meijerestelle

    Submitted

    Hi! I used this challenge to return back to learning coding after a period of not doing it.

    Some things I had trouble with, but would like some feedback on:

    • The rounded corners thing. Couldn't get it to work on the container, so I put them on the individual cards and played with negative margins. Must be a better way to do this I think? Any suggestions?
    • The rounded corners - but vertical. Due to the margins applied on the desktop view, the two bottom cards where slightly shifted to the left. Tried to overrule this with @media, but didn't really work. So I put negative margins on all cards and compensated it with 10px padding in the @media.

    Thanks in advance for feedback!

    HTML/CSS Card Component Challenge

    3

    Rayane• 1,935

    @RayaneBengaoui

    Posted

    Hello Estèlle,

    Congrats for completing your first challenge ! 🙂

    For rounding the corners I think you could proceed this way :

    • Remove these margins and border-radiuses from the cards.

    • On your body, add min-height: 100vh, display: flex, flex-direction: column, justify-content: center and align-items: center. It will center your container in the middle and make sure your body covers the entire viewport.

    • On your container , remove min-height: 100vh because you want your body to cover the viewport, not the container. Also you can remove both width: 960px and min-width: 100vw because you declared a fixed width on your flex items (230px) so the container will be too wide and thus, we won't see the corners.

    • Last, add border-radius: 15px to your container and also overflow: hidden in order to see the border radius.

    Let me know if it helped and if you have any questions.

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

    1
  • Adilson Gabriel• 95

    @adilsongb

    Submitted

    I know a little bit of javascript (I'm still at the beginning of my studies), but until I managed to make it work 😊📚

    FAQ accordion card

    1

    Rayane• 1,935

    @RayaneBengaoui

    Posted

    Hello Adilson Gabriel,

    Congrats for completing this challenge ! 🙂

    It looks great and it responds nicely on screen resizing (which is not easy on this challenge with these images 😁)

    Well done for the challenge and happy coding ! 😃

    0
  • Rayane• 1,935

    @RayaneBengaoui

    Posted

    Hello OK169,

    Congrats for completing this challenge ! 🙂

    I would like to suggest :

    • Add box-shadow property on your containers. I'm not sure about this point, but it seems to have a little shadow on the design image.

    • Handle cross browser compatibility for the slider input. For me, it works well in Firefox, but in Chrome and Edge the value of the slider goes to 100 instead of 81.5.

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

    0
  • Jay• 695

    @Junjiequan

    Submitted

    I couldn't complete this one without searching through everything from stackoverflow😂

    Although, it seems like everything work just fine. I am still not so secure about the javascript part.

    If anyone find issues with my solution, I kindly ask you to drop a comment here.

    Also, if there are any logic deficient part with javascript that needs to be improved , pleeeeeease let me know.😉

    ip-address-tracker-master

    1

    Rayane• 1,935

    @RayaneBengaoui

    Posted

    Hello Jay,

    Congrats for completing this challenge ! 🙂

    Nothing much to say about your solution except that I really like it ! Very nice idea to fade opacity from the text container when it's not hovered !

    Plus I see that you are handling invalid input and the spinner is great to know if "something" is happening 😁

    Well done for the challenge and happy coding ! 😃

    1
  • Jen• 1,230

    @En-Jen

    Submitted

    I would love feedback on this challenge! This is my first multi-page challenge and I am still fairly new to React, therefore any React-related feedback would be highly appreciated. What do you think of the file structure and the way the code is organized? Am I splitting up my components appropriately? How is my use of styled-components? This is also my first challenge where I tried to focus a lot on best accessibility practices. Please let me know about accessibility areas I could improve on.

    I wrote a detailed README for this project so feel free to check that out, but I'll just summarize a few of the things I implemented:

    • a skip link
    • smooth scroll animation
    • a sticky Sidebar in the plan page (only on laptop breakpoint and up)
    • a responsive Spacer component to add whitespace between components instead of using margins

    Coffeeroasters Subscription Site | React | Styled Components | a11y

    4

    Rayane• 1,935

    @RayaneBengaoui

    Posted

    Hello Jen,

    Congrats for completing this challenge ! 🙂

    Your link doesn't work because it's https://focused-panini-ea6dd0.netlify.app/plan instead of https://focused-panini-ea6dd0.netlify.app. It's because React Router is not correctly loaded. You are hosting on Netlify so you can specify a redirect file to handle this, I've done that on my last challenge so you can check. However, I suggest you to read this article (https://ui.dev/react-router-cannot-get-url-refresh/) which explains it very well !

    I don't have much experience in React to give you advice on the structure, but looking at your code I'm also doing more or less the same. On React official documentation (https://reactjs.org/docs/faq-structure.html) they don't have a strong opinion on that point, but their article could give you ideas.

    Overall, well done for the challenge it looks good and a really like the smooth scrolling, happy coding ! 😃

    2
  • Luis Colina• 1,043

    @Comet466

    Submitted

    Hi, just completed this challenge i think it hits pretty close to the mark even thou the image doesn't have the background color (it has it but with opacity, i put a colored screen to give color to the image) pretty sure there's a better way to put color on a background image but that was what i came out with, surely someone will tell me a better way to do it, any kind of feedback will be appreciate, happy coding

    Stats Preview Card with Grid and Flexbox

    2

    Rayane• 1,935

    @RayaneBengaoui

    Posted

    Hello Luis Colina,

    Congrats for completing this challenge ! 🙂

    To get closer to the design you could use the mix-blend-mode: multiply that will blend the image with the parent's background.

    Also consider reducing a little bit the padding of your body for the mobile view, to get more space for your content.

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

    1
  • TrakaMeitene• 505

    @TrakaMeitene

    Submitted

    I'm not pretending to be pixel perfect. Suppose I could made the footer a little different. But it all looks good on all screens I tested.

    Landing page

    2

    Rayane• 1,935

    @RayaneBengaoui

    Posted

    Hello TrakaMeitene,

    Congrats for completing this challenge ! 🙂

    You respected the design pretty well ! I would just delete the fixed height you put on some logos (height: 35px) because they got stretched on screen resize.

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

    1
  • Tin.Pham• 250

    @tin-pham

    Submitted

    Can anyone tell me why my page have a white space below in desktop view. :(( Very appreciate if anyone can give me some feedback

    Responsive Page using SASS

    2

    Rayane• 1,935

    @RayaneBengaoui

    Posted

    Hello Tin.Pham,

    Congrats for completing already another challenge ! 🙂

    As @Karin1996 said, you must set min-height: 100vh because here you declared min-height: calc(100vh - 2rem).

    Also, try to make the image part bigger to match the design.

    Moreover, on the JS slider part there is a little bug when pressing buttons it doesn't swap directly. You should rethink your count variable, for example, it is initialized at -1, if I click on the previous button it will check if it's lower than 0. It is, thus, count will be set to 3 and after that your do count-- which is equal to count = 2. However people[2] doesn't exist (you have people[0] people[1]and you get an error.

    So the logic here is not good, but I'm sure you can figure out by yourself to make it work. Try to identify all the special cases and then try to run with multiple console.log to be sure to understand what happen underthehood. I personally like to use paper for algorithms

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

    0