Skip to content
OverviewSolutions
25
Comments
23
Bonrey
@Bonrey

All comments

  • Bonrey•1,130
    @Bonrey

    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!

  • Bonrey•1,130
    @Bonrey

    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! 🍀

  • Bonrey•1,130
    @Bonrey

    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
  • Bonrey•1,130
    @Bonrey

    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! 😄

  • Bonrey•1,130
    @Bonrey

    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! 🍀

  • Bonrey•1,130
    @Bonrey

    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! 😉

  • Bonrey•1,130
    @Bonrey

    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! 🍀

  • Bonrey•1,130
    @Bonrey

    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".

  • Bonrey•1,130
    @Bonrey

    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 😃

  • Bonrey•1,130
    @Bonrey

    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! ✨

  • Bonrey•1,130
    @Bonrey

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

  • Bonrey•1,130
    @Bonrey

    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.

  • Bonrey•1,130
    @Bonrey

    Hello, Alan! Good to hear you learned a lot! 😉 Here are a few suggestions on how you can improve your work:

    • Make your site more responsive (see what happens when the window is 600px wide, for example);
    • Make left & right paddings of your card bigger in mobile design.
    • Add some animation. Especially to the arrows of the list when you open/close the menu item.

    And good luck with your coding! 🍀

  • Bonrey•1,130
    @Bonrey

    Your site is very well done! Everything looks fine to me 🙂

  • Bonrey•1,130
    @Bonrey

    Hello, Jurijus! Your component looks great! 👏 However, there're a few little bugs that I noticed:

    • When I toggle the switch from "monthly" to "yearly" billing, the text / month doesn't change to / year;
    • Also, the price should be calculated for the yearly billing the following way: monthly billing * 12 * 0.75 = monthly billing * 9. (I'm taking the discount into account here.) Now, it works somewhat strangely.
    • Just a minor suggestion: change your toggle switch background color when it's activated (set on yearly billing) rather than on hover.

    Good luck with your coding! You're doing great! 🌟

  • Bonrey•1,130
    @Bonrey

    Hi, Jakub! Your site looks really awesome! 🙂 Especially with all these animations!

    There's just one little problem that I see on my screen (which is 1280px wide): In the "Eyecam" section, filters stack on top of each other, since they don't have enough space. You'd probably want to fix that. Other than that, everything is responsive and fine!

    And just one extra recomendation: add transition: 0.3s (or any other number) to your filter buttons. This way, the background color will change more smoothly on hover.

  • Bonrey•1,130
    @Bonrey

    Hello! 👋 In order to change placeholder color, you should add to your input tag the following class:

    input.custom-placeholder::placeholder {
  color: red;
}

    And then, every time the input is invalid, you should toggle this class in JS like so:

    inputField = document.querySelector("your input field");
...
if (invalid input) {
  inputField.classList.add("custom-placeholder");
}
...

    To reset the placeholder color, just remove the class:

    inputField.classList.remove("custom-placeholder");

    And of course, don't forget to set the default placeholder styles in css:

    input.default::placeholder {
/* something like this */
    color: gray;
    opacity: 0.5;
}

    Good luck! 😉

  • Bonrey•1,130
    @Bonrey

    Hello, Kevin! Wow, your site looks really awesome. Congrats on this one! 🥳 I especially liked the animation in the beginning. 😊

    Just a couple of things I'd suggest:

    1. Get rid of your validation error by changing your section.rateds to div. I think that'd be more semantically correct, since every section tag should contain a heading, and here there's none.
    2. Well, that's just my opinion, but I'd probably avoid stacking stars on top of each other on smaller screens. In one row, they look somewhat better ⭐⭐⭐⭐⭐

    Everything else is smooth and responsive. Great work and good luck with your coding! 👨‍💻