Skip to content
OverviewSolutions
56
Comments
53

Ehsan Tatasadi

@tatasadiHamburg, Germany1,800 points

I'm a web developer based in Hamburg, specializing in modern technologies like TypeScript, React, Next.js, Tailwind CSS, and Azure. I thrive on Frontend Mentor challenges to sharpen my skills and help others grow. Let's connect and build something amazing!

I’m currently learning...

Supabase, Azure Development, Azure DevOps

Latest solutions

View more solutions

Latest comments

  • Ehsan Tatasadi•1,800
    @tatasadi

    Good job on completing this challenge! The structure is solid, and I like how you've handled the form and the success message. Here are a few suggestions to make the code even better:

    • Accessibility: Use h1 as the page title

      • Every page should have an h1 tag, as it's essential for accessibility and SEO. If there isn't a visible one, you can add a hidden h1 using a screen-reader-only class (like sr-only) to improve accessibility for screen readers. It helps users and search engines understand the main focus of the page.
      • In this case, the most logical hidden h1 could be something like "Newsletter Sign-Up." You can keep it visually hidden but readable for screen readers.

    • Use proper button text

      • There's a small typo in the button text: "Subscribe to monthly newletter" should be "Subscribe to monthly newsletter."

    • Form validation

      • You’ve already included a "Valid email required" message, but it could be enhanced with proper ARIA attributes to help screen readers understand the form's error state. For example, using aria-live="polite" on the error message span would announce errors in real-time.

    Keep up the great work! You're almost there, and with these tweaks, the code will be even stronger!

  • Ehsan Tatasadi•1,800
    @tatasadi

    Great job on the layout and structure of your article preview component! Here are a few suggestions to improve it:

    • ARIA Attributes for Buttons: Both the "share" and "close" buttons should have aria-label attributes to improve accessibility. This helps screen readers provide meaningful context, especially since these buttons use icons only.

    • Avoid Empty Links: The <a> tags for sharing links and the share button currently have empty href="" attributes. Make sure to add proper links or use # as placeholders to prevent unexpected behavior.

    • Transition on lg:pl Class: The lg:pl-[8px] class in the <main> tag is missing a closing bracket, which breaks the class. This should be corrected to lg:pl-[8px].

    • Use rem Instead of px: Many of your spacing and font-size values use px units. It's recommended to use rem instead of px for better scalability and accessibility, especially on responsive designs.

    • Add alt Text for Share Icons: The social media icons (Facebook, Twitter, Pinterest) should have more descriptive alt attributes. Instead of just alt="icon-facebook", use something like alt="Share on Facebook" for clarity.

    These changes will help improve both accessibility and maintainability while ensuring a better user experience across different devices. Keep up the great work!

  • P
    edpau•470
    @edpau
    What are you most proud of, and what would you do differently next time?

    I learnt to use a switch case for grid layout

    • Using a switch case for grid layout customisation is effective when different grid areas need unique positioning based on index or other dynamic factors. It allows me to conditionally assign CSS grid classes to components, enhancing flexibility.
    • Each testimonial requires a distinct placement, so using a switch statement makes it easy to control the layout by assigning specific Tailwind CSS classes to each element based on its index. This method keeps the logic clear, avoids redundancy, and ensures that I can handle changes dynamically with minimal code repetition.

    Please comment whether it is a good way or not.

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

    I aimed to make the TestimonialCard component reusable, but each card has slightly different styles. To handle this, I added conditional Tailwind classes like ${bgColor} to match each card's unique style.

    However, this increased the complexity of the component, reducing its readability and maintainability. It became harder to follow the logic, as the dynamic classes added clutter to the code. Balancing reusability with clarity is hard.

    Please advise how I can improve.

    Testimonials grid section with React and Tailwind

    #react#tailwind-css
    1
    Ehsan Tatasadi•1,800
    @tatasadi

    Great job on completing the challenge! I have just one suggestion:

    • The gridClasses switch can get cumbersome—consider refactoring into reusable components or predefined class sets to make it cleaner.

    Keep up the great work!

    Marked as helpful
  • Ehsan Tatasadi•1,800
    @tatasadi

    Good job on the implementation, it looks solid overall! Here are a few suggestions to improve the code:

    • Instead of using fixed widths like w-[540px] for your paragraphs or cards, use responsive widths like max-w-[540px] or w-full with padding. This will make the layout more fluid on various screen sizes.
    • Avoid using hardcoded values like w-[350px] and h-[250px] for the card containers. Consider using flex-grow, flex-shrink, or relative sizing units (like percentages or vw/vh) to make the design responsive and flexible.
    • For the mobile view, you could simplify the use of custom media queries like max-[580px]. Consider using Tailwind's built-in breakpoints (sm:, md:, etc.) for consistency and cleaner code.
    • Be mindful of the repetition in card component styling. You could extract the common card structure into a separate component and pass props to keep the code DRY (Don't Repeat Yourself). This will make future maintenance easier.

    Keep up the great work!

    Marked as helpful
  • Ajaya-Rajbhandari•130
    @Ajaya-Rajbhandari
    What are you most proud of, and what would you do differently next time?

    Use React as i felt easier to create component and use it anywhere i want. still lots of things to learn about react.

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

    It was difficult to make responsive design. But i do it patching every element in most of the screen sizes. i think.

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

    -I want to focus on exploring more accessibility techniques, such as ARIA attributes, screen reader compatibility, and keyboard navigation.

    -I aim to improve my understanding of React hooks, particularly the use of useState and useEffect to manage component state and side effects.

    -I plan to dive deeper into CSS preprocessors like Sass or Less to enhance my styling capabilities and write more efficient, modular CSS code.

    -I will continue to practice building responsive UI components using CSS Grid and Flexbox, ensuring my layouts adapt seamlessly to various screen sizes and devices.

    Product Preview Card

    #react
    1
    Ehsan Tatasadi•1,800
    @tatasadi

    Nice effort on completing the challenge! Here are a couple of things to improve:

    • The design isn't mobile-friendly. On mobile sizes, the picture should be at the top, similar to the design. You can achieve this using media queries.
    • The link to your source code leads to a 404 page, so I couldn't review it further. Please fix the URL so others can view your work and give more feedback.
    Marked as helpful
  • Zak Aden•60
    @Zak-aden1
    What are you most proud of, and what would you do differently next time?

    tried using tailwind which was an interesting experience, slowly getting more accustomed to it

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

    getting used to tailwind

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

    needed free figma to make it more like design :(

    recipe page

    #react#tailwind-css
    1
    Ehsan Tatasadi•1,800
    @tatasadi

    Great effort on completing this challenge! Here are a few suggestions to improve your solution:

    • Avoid using h-full, and opt for min-h-screen instead. This ensures the content adapts better on devices where the height may exceed the viewport, preventing overflow issues.
    • It's better not to set fixed widths for your containers. Instead, use flexible units like max-w-full or percentages, which will make your layout more adaptable across different screen sizes.
    • Try to avoid using <table> for layout purposes. A CSS grid provides more flexibility and allows for better control of your content's structure, especially when adjusting to different screen sizes.
    • It seems the design isn't optimized for mobile. Consider using Tailwind's media queries (sm:, md:, etc.) to make your design responsive. Responsive design is essential for ensuring that your layout works well on all devices, so it may help to dig deeper into responsive techniques.
View more comments