Skip to content
OverviewSolutions
55
Comments
55
P
Ehsan Tatasadi
@tatasadi

All comments

  • Ehsan Tatasadi•1,780
    @tatasadiPosted about 1 month ago

    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!

    0
  • Ehsan Tatasadi•1,780
    @tatasadiPosted about 2 months ago

    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!

    0
  • ownedbyanonymous•190
    @ownedbyanonymousSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    This challenge was a bit different from the other challenges in the sense it was an entire page and not just a component and l had to use media queries to cater for desktops, tablets and smaller mobile devices. Completing the challenge alone is something l am proud of and the fact that l was abl to search for answers whenever a hit a blocker. This chalenge gave a chance to use all the knowledge l have acquired in my journey and more.

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

    Had challenges with responsive design, the assets l used in the project are exactly the optimized assests that were provided. I had a hard-time understanding the CSS property position. I am still not sure when and how to use the absolute and relative values. Then l figured using the mobile-first approach was not the best approach to the problem.

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

    Best practice and approach to responsive design especially when it comes to fonts and images. How to set media queries so that there are no devices left behind Difference between absolute and relative and when to use to each.

    Responsive landing page using CSS Grid and Flexbox

    1
    Ehsan Tatasadi•1,780
    @tatasadiPosted about 2 months ago

    Great job on the project! Here are some important suggestions to improve your code:

    • Max-width for Content: Consider adding a max-width to your content containers. This prevents your content from stretching too much on larger screens, improving readability and visual balance.

    • Add ARIA Labels: Make sure that your <a> tags have appropriate aria-labels, especially if they contain non-descriptive text like "Download v1.3". This improves accessibility for screen readers.

    • Hero Section in <main>: The hero section should be wrapped in <main> tag. This is better for semantic HTML as the hero content seems to be part of the main content of the page.

    • Text-preset Class Refactoring: There’s a lot of repetition in your typography classes (text-preset-*). Consider using utility classes or creating a more generalized class to handle similar styles (e.g., font-family, font-weight, and line-height).

    These changes will improve the maintainability, accessibility, and performance of your project. Keep up the excellent work!

    0
  • edpau•440
    @edpauSubmitted about 2 months ago
    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

    1
    Ehsan Tatasadi•1,780
    @tatasadiPosted about 2 months ago

    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
    0
  • Ehsan Tatasadi•1,780
    @tatasadiPosted about 2 months ago

    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
    1
  • Ajaya-Rajbhandari•130
    @Ajaya-RajbhandariSubmitted 2 months ago
    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

    1
    Ehsan Tatasadi•1,780
    @tatasadiPosted about 2 months ago

    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
    0
  • Zak Aden•60
    @Zak-aden1Submitted 2 months ago
    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

    1
    Ehsan Tatasadi•1,780
    @tatasadiPosted about 2 months ago

    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.
    0
  • Ehsan Tatasadi•1,780
    @tatasadiPosted about 2 months ago

    Great job on completing the challenge! You've put in solid work here. I have a couple of suggestions to improve responsiveness and flexibility:

    • Instead of using h-[100vh], it's better to use min-h-screen. This ensures that your layout adapts better on smaller screens, especially when the content overflows vertically (e.g., on mobile devices with dynamic toolbars).

    • Avoid setting fixed width and height like w-[400px] and h-[620px] for your main container. Fixed sizes can cause layout issues on different screen sizes and resolutions. Instead, use responsive units like percentages (w-full, h-auto) or max-width to allow your layout to adjust gracefully.

    Keep up the great work, and these tweaks will make your solution even more polished!

    1
  • nowshadjaman21•80
    @nowshadjaman21Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    i will add font style next time.

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

    font styling

    HTML & CSS Foundations

    2
    Ehsan Tatasadi•1,780
    @tatasadiPosted about 2 months ago

    Congratulations on completing the challenge! Your solution looks great, and you've done a fantastic job. I have two small suggestions to make it match the design even more closely:

    • For the card, consider using this box-shadow: 8px 8px 0 0 black. This will give it a bit more depth and stay true to the design.
    • You could adjust the paragraph color to a darker gray or black with opacity: 0.5 to align better with the design's intended contrast.

    Great work overall! Keep it up!

    Marked as helpful
    1
  • sidr467•420
    @sidr467Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Made it responsive

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

    I didnt know how and what size would be perfect for container but somehow tried different width and managed it.

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

    Maybe CSS because it is still not perfect i think.

    Nothing special Used

    2
    Ehsan Tatasadi•1,780
    @tatasadiPosted 6 months ago

    Good job on completing your first challenge! Here are a couple of suggestions to improve your code:

    • Use one h1 on the page.

    • Instead of setting height: 100vh on the body, use min-height: 100vh.

    Keep up the great work!

    1
  • Ehsan Tatasadi•1,780
    @tatasadiPosted 9 months ago

    Good job on taking on this challenge! Unfortunately, I couldn't review your source code directly due to the link issue, but based on your app's functionality, here are a few suggestions:

    Consistent User Identity for Comments

    Ensuring a consistent user identity when making comments enhances the user experience by maintaining continuity. If implementing user authentication is challenging, consider using local storage to simulate a logged-in user's session. This way, the user identity remains the same until the session or local storage is cleared. (Currently each time that I make a comment, is a different user)

    Limiting Upvotes

    I can upvote a feedback unlimited. Every user should be able to upvote once for each feedback. (it is likely very hard to implement, when I don't have a login user)

    Accurate Button Labeling

    Ensure that button labels accurately reflect the action being taken. For an edit operation, labeling the button as "Update Feedback" instead of "Add Feedback" makes the function clear to users, improving usability.

    Filtering by Category

    Changing a feedback's category doesn't update the list under the new category filter. Double-check your filtering logic. Ensure that when a category is updated, the state or data structure that holds feedback items is also updated to reflect this change.

    Dynamic Content Updating

    For a smoother user experience, consider avoiding full page refreshes when changing category filter.

    Implementing these suggestions will make your application more user-friendly and functional. Keep iterating and testing your features to refine the user experience further. Great work so far!

    Marked as helpful
    1
  • Adarsh Gupta•750
    @adarsh78Submitted 9 months ago

    I hope this message finds you well! I recently completed this project and would greatly appreciate your feedback. Your insights and suggestions are valuable to me as I continue to improve my skills.

    ecommerce-product-page

    1
    Ehsan Tatasadi•1,780
    @tatasadiPosted 9 months ago

    Fantastic job on tackling this Frontend Mentor challenge! Your React application demonstrates a solid understanding of state management, component structuring, and responsive design principles. Here are some suggestions to enhance your project further:

    Use REM for Sizing

    Consider using rem units instead of px for sizing elements. REM units are relative to the root element's font size, offering better scalability and accessibility. This change helps ensure your design adapts more fluidly across different user settings.

    Update State with Functional Updates

    When updating state based on the previous state, use the functional update form setState(prevState => prevState + 1) instead of setState(state + 1). This approach guarantees you're working with the most current state value, especially important in cases where state updates may be batched or asynchronous.

    Why? React state updates are asynchronous. Using the current state directly inside setState might not always have the latest state value, leading to potential bugs, especially when state updates are rapid or depend on the previous state.

    Consolidate Image Slider Logic

    It appears the logic for the image slider is repeated in both the Hero and Lightbox components. To streamline your code and adhere to the DRY (Don't Repeat Yourself) principle, consider encapsulating all slider-related logic (including navigation and image display) into a single reusable component. This new component can then be utilized wherever an image slider is needed within your application.

    Creating a single ImageSlider component allows for:

    • Centralized management of the slider's state and behavior.
    • Easier maintenance and updates to the slider logic.
    • Reduced complexity and redundancy in your codebase.

    You could pass the images array and currentIndex as props to this ImageSlider component, along with any handlers for next/previous navigation actions. This approach not only simplifies your application structure but also enhances the cohesion and reusability of your components.

    By focusing on encapsulating your image slider logic into one component, you streamline your application's architecture, making it cleaner and more maintainable.

    Center Arrow Buttons Vertically in Tablet View

    For better alignment of the arrow buttons in tablet view, ensure they're vertically centered relative to the image they accompany. You can achieve this with Flexbox utilities (items-center) or by adjusting their position with CSS to be in the exact middle, enhancing the user interface's consistency across views.

    Use Max-width Instead of Width

    Rather than setting a fixed width like w-[500px], use max-width to allow your content to be more fluid and adapt to the screen size while still maintaining a maximum width constraint. This approach improves responsiveness and ensures your content looks great across devices.

    Implementing these suggestions will not only refine your application's functionality and appearance but also enhance its maintainability and user experience. Keep up the excellent work!

    Marked as helpful
    1