Skip to content
OverviewSolutions
25
Comments
23

Bonrey

@BonreyRussia1,130 points

💻 Improving my frontend skills...

I’m currently learning...

React, CSS frameworks

Latest solutions

View more solutions

Latest comments

  • Bonrey•1,130
    @BonreyPosted almost 4 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
  • Bonrey•1,130
    @BonreyPosted almost 4 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 almost 4 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 almost 4 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 almost 4 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
  • Bonrey•1,130
    @BonreyPosted almost 4 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
View more comments