Skip to content
OverviewSolutions
7
Comments
3

Simon

@Simplify4Me2Belgium180 points

Anyone can make something complicated. It's hard to keep things simple. I do smart brain thingies when I'm not on a hissy fit

Latest solutions

  • Minimalist portfolio website using React + Tailwind

    #react#react-router#storybook#tailwind-css#typescript
    Simon•180
    Submitted 3 months ago

    I would like help with the project detail pages. The article text all of a sudden moves from one side of the section to the other, but the title and tags remain. I had to use hidden elements for it to work, but I'm curious to discover how others solved that...

    0 comments

  • IP Address Tracker using React

    #react#tanstack-query#vite
    Simon•180
    Submitted 8 months ago

    Even though it wasn't new to me, structuring the page and organizing the CSS proved to be a challenge again. Any feedback is welcome 👐

    0 comments

  • Age calculator app using C# Blazor WASM

    #animation#blazor#c##pure-css
    Simon•180
    Submitted 9 months ago

    I could use some guidance on handling forms and organizing CSS in Blazor. While Blazor encourages the use of components, I struggled to scope the styling to specific components unless I resorted to inline styles—which doesn’t exactly feel like best practice. Any tips on managing component-level CSS more effectively would be appreciated.

    0 comments

  • Advice Generator App using VueJs + SASS

    #fetch#sass/scss#vite#vue#typescript
    Simon•180
    Submitted 10 months ago

    I thought about implementing a spinner or placeholder of some kind when the fetching the data is in a loading state. Do you think it would have added value?

    0 comments

  • Ping single column coming soon page using SASS

    #sass/scss#vite
    Simon•180
    Submitted 10 months ago

    I think I could use some pointers and best practices when it comes to structuring the SCSS and SASS. I've used variables, but there's probably much more to it 🤔

    0 comments

  • Social media dashboard using React + Vite + Tailwind

    #react#vite#tailwind-css
    Simon•180
    Submitted 11 months ago

    The layout isn't fully responsive as it only supports two sizes: mobile and desktop. The in-between range looks quite off. Any tips would be greatly appreciated.

    1 comment
View more solutions

Latest comments

  • Simon•180
    @Simplify4Me2

    Hi @1of1baw,

    First off, congrats on completing the challenge! 🎉 A lot of great things going on here, using clean and well-organized code.

    I noticed a tiny typo in your HTML file. On line 8, the ype attribute should be type. That's likely why it's duplicated.

    Instead of using input type="text", you could switch them to type="number". It gives a more intuitive experience for users by showing the numeric keypad on mobile.

    Good that you're using new Date(year, month, 0).getDate() to validate days! But a small remark: you're checking validity of the day even before confirming if the month and year are valid.

    I hope this wasn't too nittpicky 😅 Happy coding ⚡⚡

    Marked as helpful
  • Simon•180
    @Simplify4Me2

    Hi @dev-paulL,

    Great solution! A smooth setup using Tailwind, Vite and React ⚡

    Just a tiny detail, but I noticed you're using after:content-['»'] and its equivalent for quotes. Maybe try using “ and ”. Those polished touches can really make a difference!

    Loving the Tailwind variables, but a little remark —Tailwind’s docs recommend defining them in your main.css or index.css file (you can check it out here: Tailwind Customizing Colors). Also, instead of using dark, consider naming with shades (e.g., gray-700), as it might offer more flexibility for future changes.

    And while I'm being nitpicky, I noticed an empty alt attribute on an image - giving it a meaningful value will help with accessibility, plus it's good for SEO!

    Overall, great job! Keep up the awesome work and happy coding 🍵🍵

  • Jordan Davenport•1,180
    @jjdavenport
    What are you most proud of, and what would you do differently next time?

    First form validation using react.

    What challenges did you encounter, and how did you overcome them?

    The difference between vanilla js and react for validation.

    What specific areas of your project would you like help with?

    Any feedback is appreciated.

    Ping coming soon page

    #react#vite#tailwind-css
    1
    Simon•180
    @Simplify4Me2

    Hello @jjdavenport,

    Congratz on completing the challenge! It looks good 👍

    I noticed that the current workflow isn't mobile-first, which might be why the mobile design lacks margins and has larger font sizes. Shifting to a mobile-first approach could help optimize the layout for smaller screens. You could also consider the PerfectPixel browser extension to ensure your design matches the mockups more precisely.

    You've definitely paid good attention to semantic HTML. The header tag is currently in the main tag, though. Typically, the header should be a sibling of main rather than a child to maintain proper semantic structure. Also, the ul element used for social media icons could be more appropriate as a nav element, indicating these icons are a form of navigation.

    In React, your approach of having components depend directly on assets/data.json might reduce flexibility. Passing this data through as props could enhance the reusability of your components. The validation logic you've implemented looks like a great candidate for a custom hook. This could keep your components clean and focused.

    Keep up the great work and happy coding ⚡⚡

    Marked as helpful