Skip to content
OverviewSolutions
25
Comments
23
Bonrey
@Bonrey

All comments

  • 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
    Bonrey•1,130
    @BonreyPosted over 3 years ago

    OMG, @APG! Your solution is simply out of this world! 🤩

    I myself decided to create something with animations on scroll recently, but my attempts go in no comparison with your work! I should definitely check out the library you used, especially if it is compatible with React. 😉

    Also, I think it's great you take your time before publishing something new! This way, you make sure to bring your creativity to the maximum level and struck all of us with your breathtaking sites!

    P.S. Your custom scrollbar alone is already worth checking out!

    1
  • Yaiza•410
    @Yaiza16Submitted over 3 years ago

    Finally, I finished this challenge. It took me a long time to finish it but I think result is good and I had a lot fun doing it.

    I struggled a lot with JS part so I decided focus on that and put the responsive design aside. I’m starting with JS so there were some issues related to.

    • I feel JS code is a little messy and hard to read so any advice or tip to improve it it’s welcome. Would it be better if I put all code in just one file? • I’m starting with SASS too. I put components in a folder apart but should be modifiers components there or these should be in the layout folder?

    I tested everything to make sure that everything works properly and there are no bugs. So, if you found a bug, please let me know!

    Any feedback related to a cleaner and more efficient code it’s welcome. Besides, feel free to give any other feedback too. It will be appreciated. 😊

    Crowdfunding product page using JS vanilla, SASS and BEM

    2
    Bonrey•1,130
    @BonreyPosted over 3 years ago

    Hello, Yaiza! I think you did a pretty good job on this challenge! 🎉 I couldn't find any bugs as regards the JS part. 😄

    However, there are still some things you might want to improve. 📈

    • First of all, I would fix your accessibility issues by adding the aria-label attribute to your input elements. This way, you'd let assistive technologies know what all these radio buttons and text fields are about.
    • Each of your sections should have a heading. So, it'd be a better idea to put your section tag inside div and not vice versa. 🙂
    • Probably, not so important, but still worth mentioning: I'd make the Crowdfund logo clickable (and refresh the page on the click, for example).

    As for your SASS folder structure, I think it's fine! I refer to this site whenever I want to make sure I put a new .scss file in the right place.

    Anyway, it's great that you put so much effort into this challenge! I think you learned a lot along the way. 😃 So, keep on coding, and good luck! 🍀

    1
  • Bonrey•1,130
    @BonreyPosted over 3 years ago

    Hi, Muhammad! Your site is quite notable! I especially liked the desktop version: it is very close to the original. 😃

    There're a few little things you might want to fix, though. All of them are about your mobile version. Let's go from the top to the bottom:

    • Your site logo isn't clickable. It'd be a good idea to make the page refresh or scroll to the top when you click it.
    • There is no padding around your paragraphs and headings on smaller devices, which results in a poor user experience. We all don't like it when the text sticks to the sides, do we? 🙃
    • The Supercharge your workflow section isn't centered, and the headings with icons get skewed to the left. 😟
    • Finally, company labels are arranged in a row instead of a column, and therefore, they look somewhat small on mobile devices.

    All of the above are easy fixes. But they're worth doing, IMHO. 🙂

    As for your code, I suggest you make more meaningful class names. For example, workflow-section instead of section2. It may take you some time to come up with those names, but you'll be able to quickly grasp what each section was about if you decide to return to your code after some time. 👨‍💻

    By the way, I saw in your profile that you're just 18 y.o. I think it's commendable that you're creating such complex projects at this young age! 💪 Keep on practicing! I wish you all the best! 😃

    Marked as helpful
    2
  • Bonrey•1,130
    @BonreyPosted over 3 years ago

    Hello, @olgak169! 👋 Fine effort on this one!

    I like how your site is almost pixel perfect. I know how hard it is without any Sketch or Figma designs, so congrats on that! Also, it's great that you put in some time to add transitions and form validation. In my opinion, all this visual stuff is always worth the effort. 😊

    There're a few little things you could fix to make your site look even better:

    • Make your logos clickable. It'd be nicer if the user could move to the top of the page (or refresh it) on the Huddle logo click.
    • Consider removing one of your h1 tags: there should be at most one such tag for a page. (You can also check your HTML Validations issue for more info.)
    • Add some transition-duration to your links and buttons. That way, the overall look will be smoother.

    In addition, it's great to see that you used the :invalid selector. To be candid, I didn't know it existed before I checked your code. 😅

    It's great to see you're completing many challenges on this site. Keep on coding! And best of luck with everything you're learning! 😄

    0
  • Bonrey•1,130
    @BonreyPosted over 3 years ago

    Hi, Dinesh! I think you've done a bang-up job on this challenge: everything looks good and responds very well. Kudos! 😄

    There is one little thing that needs fixing, though: font-family of your input and button elements is set to Arial instead of Open Sans. The thing is, form elements don't inherit font settings from the body tag. So, you should set them manually. You can read about it in more detail here.

    Other than this, everything looks great. So, I can only wish you good luck with your coding! 🍀

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

    Hello👋!

    Damn! It was really tough challenge. This was my second time i tried to finish it, this time successfully. This is few things I used while creating this project:

    • Used backface-visibility property. This property defines whether or not the back face of an element should be visible when facing the user. So when i rotate my cards, back of them isn't visible to the user so I can create this nice flip animation.
    • Added .sr-only element to announce countdown time to screen readers. Also used aria-live="polite" attribute to expose dynamic content changes in a way that can be announced by assistive technologies after every minute of countdown.
    • For interactive elements like socials icons i used :focus-visible pseudo class (spec). This selector indicate focus when it is helpful to the user - such as in cases where the user interacts with the page via a keyboard or some other non-pointing device.
    • 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. I used it in my resets so every element with animation apply to that.
    • I didn't like flip animation when these "holes" on card were done with before/after elements. Instead i created svg-backgrounds for cards and this way card animation also contains these holes - I think it looks way better.
    • Hats off to Wes Bos, I found his countdown timer tutorial and it was really helpfull to understand how countdown should work. Even tho it was just tip of the iceberg when it comes to JS in this project i think it was very helpful to understand how countdown timer should work.

    I ran into a problem with safari where my card flip was looking good both on firefox and chrome, but on safari there was a weird bug where two my animated cards was shown at once. I struggled with if for two days but turned out that I have to use backface-visibility on two rotated cards instead just on one. It seems like safari ignores my z-indexes in this case, and firefox/chrome doesn't - but working good now.

    No specific questions here but any additional feedback will be appreciated!

    Thanks! 😁

    Countdown timer - Mobile first, Flexbox, Sass, JS, backface-visibility

    5
    Bonrey•1,130
    @BonreyPosted over 3 years ago

    Hi, @tediko! Glad to see you completed this challenge! It is quite a tough one, indeed!

    First of all, the countdown animation you added is sublime, and I think there is hardly anything that could be improved. 😅 The site is responsive, and everything works without glitches. 👍🏻

    Probably, there is only one bug that I found: on my screen, which is 1280px wide, the social media icons stick to the bottom of the page. Plus, when I scroll the page, a white strip appears at the bottom. You can see what I mean if you set (width, height) to (1024px, 580px) in the DevTools and try to scroll the page to the bottom.

    Anyway, the overall look and feel are awesomesauce! So, I'd encourage you to keep coding! You're doing great! 😉

    2
  • Bonrey•1,130
    @BonreyPosted over 3 years ago

    Hi, @soransh-singh! 🙋‍♂️

    Good job on this challenge! Here are a few suggestions I can offer:

    • Add some padding to your header so that it doesn't stick to the top of the screen. It would look much better, I promise! 😁

    • It'd also be nice to set some border-radius for buttons and input fields. This way, they would look less jagged.

    • To fix your accessibility issues, I suggest adding aria-label with some text to both of your inputs. Also, it's not a best practice to add an empty name property to the buttons (<input type='submit'>). You can safely delete it, I presume.

    P.S. It's great to see that you're completing so many challenges on Frontend Mentor! Keep up the good work, and good luck with your coding! 🍀

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

    Hello everyone ! 🙂

    I'm so proud to complete my first Guru challenge ! 🎉 6 months ago I could hardly finish a Newbie project but thanks to FME and his amazing community here I am !

    It was pretty challenging and once again I find myself not being very DRY friendly, but it's getting better. I plan to finish the form validation later as I want to focus on other stuff.

    Also, I found out that the website renders well on Chrome/Edge but is totally broken in Firefox. For example display: grid isn't working properly, so I'm wondering what is the problem ? I'll try to fix it, but now I get why browser compatibility is a pain haha.

    Lastly, do you know a good way to preload images ? On loading some images take time to load and thus worsen the user experience.

    Otherwise, any feedback/remark is appreciated !

    Have a nice day ☀️

    Designo multi-page - REACT

    7
    Bonrey•1,130
    @BonreyPosted over 3 years ago

    Hi, @Rayane! 👋 I'm a little late to the party, but still, I'd love to write a few words. There aren't so many stunning GURU solutions out there, after all. 🙂

    First of all, I love the overall look of your website! All these transitions and animations are very entertaining! I especially liked the one with the smartphone moving on scrolling. 😍

    Probably just a couple of things that are worth pointing out:

    • In the Locations tab, the United Kingdom section appears without paddings on either left or right on my screen (1280pxs wide).
    • I think it'd be nice to add a custom favicon to your site that would fit with the overall design. 😁 I personally use Flaticon for icons. It's a noteworthy site with lots of free images of many sizes.

    Also, it's great to hear that you've improved so much in just 6 months! Indeed, it's surprising how much you can learn in just half a year if you put in consistent work! I hope you'll enjoy your job as an Angular developer and still find some time to post new solutions on FME once in a while. 😄

    Good luck with your work, and happy coding! 🙌

    P.S. Hopefully, I correctly inferred that FME stands for "Frontend Mentor".

    1
  • Bonrey•1,130
    @BonreyPosted over 3 years ago

    Hello there! 👋

    I think you've done an amazing job on this challenge! Everything works fine and smoothly!

    Probably just one little 'but': the font is a bit too small on my laptop (the screen is 1024px width). Especially, in the search bar and the accordion menu. Also, I can't see the search bar icon. I think you should fix these little problems.

    Other than that, your site is awesome! And all these transitions are especially satisfying 😃

    0
  • Roc Tanweer•2,500
    @RocTanweerSubmitted over 3 years ago

    Hello folks 😀

    This past ten days with this challenge was the best..!. I learnt a loooot of stuffs, either by making a mistake or by the requirements. I tried to make this as good as possible within a week or two because you never get satisfied by the design and details...

    Even now while submitting the solution, I am thinking of adding some more things like when the user redirect, there will be an animation of fade-in only when the theme is dark but I controlled myself because I wish to touch some other challenges too🤣

    There is this feature called maybe PWA that I really wanted to do which lets the user to add the web app to mobile home screen but it was quite hard for me for now 😅

    Questions

    1. How to reduce the delay while using the fluid typography(as you may have noticed)?
    2. How to smoothly displace elements while sorting?
    3. How can I make my JavaScript code cleaner?

    Any other feedback is humbly welcome..! 😘

    HTML Sass JavaScript Sortable.js Local Storage

    4
    Bonrey•1,130
    @BonreyPosted over 3 years ago

    Hello, Roc! 👋

    It's so sad to see such a beautiful solution without any feedback 😥. That's why I decided to leave some. I'm not proficient in JavaScript myself yet, so I don't know how to help you with your items displacement. However, I'd like to point out a few other things 😉

    • First of all, I'd set cursor: pointer for the remove-item button in your list.
    • Also, I'd forbid the text in the list item to go on the next line. Now, if you narrow your screen, you'll see that the existing text breaks into several lines, and the crossing line goes somewhere in between them, which isn't cool.
    • Finally, when added text is too long, the remove-item button goes to the bottom left corner. I think it's worth fixing, too.

    Other than that, your solution is super cool! 😍 I especially liked the transition between light and dark themes, and also that checkbox fadeIn/fadeOut. The latter is just amazing!

    I hope you keep on creating new projects! I'd definitely check out some more of yours! ✨

    1
  • Bonrey•1,130
    @BonreySubmitted over 3 years ago

    This is my first challenge with styled components. They are indeed very convenient, and I learned a lot about them! I also learned how to create a drag-and-drop effect, which was quite gratifying as well. 🤩 However, I faced some problems that I couldn't resolve 😥 Here they are:

    • Using drag-and-drop made my TodoItem component rerender quite frequently, and when I tried to pass some props to TodoItem styles, using styled-components, I had to deal with very poor performance (due to the constant rerendering). That's why in the end, I put all the styles in a separate css-file and added them using className property. I read about using attrs in styled components and putting the dynamically changing styles there, but it didn't help improve the performance 😞

    • Another little bug is one-time background image flickering when I drag a list item. It happens quite randomly and sometimes doesn't happen at all, but I think some of you might notice it.

    • Finally, I spent quite a lot of time fixing the caret position in the text field. By default, it is aligned to the top of the text instead of to its middle. So I wanted to align it ~2pxs above the text, but I couldn't figure out how to do that properly so I left everything as it was.

    All in all, it was an interesting challenge with lots of opportunities to deepen my React knowledge. 😅 For example, I practiced using useState and useEffect hooks (see TodoItem component) and for the first time applied localstorage to the list items.

    I would be very grateful if some of you could take your time and comment on my solution or shared some insight on how I could resolve the aforementioned problems. Anyway, thank you for checking out this solution and reading this entry till the end! 😊

    P.S. Check out my README.md description file for some extra links.

    📃 Todo App | React | styled-components | localstorage | drag-and-drop

    1
    Bonrey•1,130
    @BonreyPosted over 3 years ago

    By the way, all these 27 HTML issues seem to have come from the drag-and-drop library I used. 🙄

    0
  • Luis•270
    @luibernipSubmitted over 3 years ago

    Hello community, thankyou to anyone helping with my coding skills. This is my only question:

    1. Can I make each card position correctly in mobile mode without using the media query? Should I use min max values or is there another technique I'm ignorant about?

    If you see anything that can help me get better at coding I would greatly appreciate it.

    Four Card Feature Section (HTML + CSS)

    2
    Bonrey•1,130
    @BonreyPosted over 3 years ago

    Hi, Luis! 👋 Your site looks great! It's responsive and works fine! However, I wouldn't use the section tag for cards (see your HTML ISSUES). The thing is, each section should have a heading (one of h2-h6 elements) and the main part, but here there's simply no heading.

    2