Skip to content
OverviewSolutions
16
Comments
18

Ruben

@RubenSmnZeeland, Netherlands550 points

a huge fan of React!

I’m currently learning...

more about styling in general, mostly vanilla CSS but also experimenting with TailwindCSS.

Latest solutions

View more solutions

Latest comments

  • Ruben•550
    @RubenSmnPosted about 2 years ago

    I see that you made a custom line instead of using the provided svg. That looks really good!

    I did find some things you could improve upon:

    • The icon in the button is very small.

    • A transition effect on the shadow to create a more fluid effect.

    • Increase the usage of semantic elements, currently you're building a lot with div elements. These are a great way of getting to look semantic elements the way you want.

    For example your div with the container class could be a main and you could switch the span and p to a heading tag (h1, h2).

    I hope you find this useful!

    Marked as helpful
    0
  • Ruben•550
    @RubenSmnPosted about 2 years ago

    Hi Nico, I just looked at your solution for the Advice generator app and the desktop version looks really good. But when I switch to mobile the width of the div is not responsive.

    I see in your code you're using Tailwind CSS and have a specific desk break point. You could add a default width of something like 80% to the container div.

    <div
  className="w-[80%] bg-c-dark-grayish-blue relative m-5 p-5 rounded-xl flex flex-col justify-center items-center gap-5 desk:w-[33%] desk:gap-8 desk:px-10"
>
  ...
</div>

    I also used Tailwind CSS for this. If you want reference something take a look at my solution

    Marked as helpful
    1
  • Ruben•550
    @RubenSmnPosted about 2 years ago

    Hi Leon, I just looked at your solution for this challenge. Nice job with the theme using the users preferred color scheme! Overall great UI.

    I did find some things you could improve upon.

    • When trying to remove the whole word from the search input I was unable to do so. When arriving at the last letter the word just popped back in place. Probably something to do with your state.

    • A nice feature might be to let the user know that the play button has been clicked, maybe even change the icon.

    Marked as helpful
    0
  • Ruben•550
    @RubenSmnPosted about 2 years ago

    Hi Mooonika, I just looked at your code for this challenge and you did a nice job on separating the CSS and JavaScript from the HTML. As you project expands this becomes more important so starting early is a good practice!

    I did found some minor issue with the body which does not start at the top of the page. There is a empty space due to the margin of the main element. This makes the page scrollable which is not a big issue but you could fix this by instead of top margin on the main add it as top padding on the body.

    Hope you find this helpful and happy hacking!

    0
  • Ruben•550
    @RubenSmnPosted about 2 years ago

    Hi Jakub, nice work on this Notification page challenge. I looked at your code and found some things you could improve upon.

    • A good practice is the separation of concerns, currently you have all your code in the same file. You can move the JavaScript and CSS to their own file which makes your code more readable. Once your project becomes bigger it is easier to search for something.

    • A nice feature you can add here and practice JavaScript even more is to try and add functionality to click on individual unread notifications to make them read.

    Hope you find this useful, happy hacking!

    Marked as helpful
    1
  • Ruben•550
    @RubenSmnPosted about 2 years ago

    Hi Mike, I just had a look at your solution for this challenge which looks really good visually.

    I have some suggestion I want to share with you.

    • The useEffect in your index.tsx has no dependency array. Which means it will run every render. You can fix this by including the theme in the array.

    • In your QuerySection you're passing some unused state dictData.

    • I would suggest to move the header to a new component where you can handle the theme and font this leaves the QuerySection with just the code for the actual query section.

    • Instead of sending all the theme state (theme and setTheme) down to the other components. Create a toggleTheme function which you can pass down.

    Hope you find this useful and happy hacking!

    Marked as helpful
    1
View more comments