Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
56
Comments
53
Ehsan Tatasadi
@tatasadi

All comments

  • yazid78•250
    @yazid78
    Submitted 11 months ago

    Newsletter sign up form with sucess message

    #tailwind-css
    1
    Ehsan Tatasadi•1,800
    @tatasadi
    Posted 9 months 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!

  • Javier Duarte•210
    @javiIT10
    Submitted 12 months ago

    Article Preview Component using Tailwind CSS

    #tailwind-css
    1
    Ehsan Tatasadi•1,800
    @tatasadi
    Posted 10 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!

  • P
    edpau•470
    @edpau
    Submitted 10 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

    #react#tailwind-css
    1
    Ehsan Tatasadi•1,800
    @tatasadi
    Posted 10 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
  • P
    MarcWebDev•170
    @MarcWebDev
    Submitted 10 months ago

    Four Card Feature Section with Next.js TypeScript, TailwindCSS

    #next#typescript#tailwind-css
    1
    Ehsan Tatasadi•1,800
    @tatasadi
    Posted 10 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
  • Ajaya-Rajbhandari•130
    @Ajaya-Rajbhandari
    Submitted 10 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

    #react
    1
    Ehsan Tatasadi•1,800
    @tatasadi
    Posted 10 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
  • Zak Aden•60
    @Zak-aden1
    Submitted 10 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

    #react#tailwind-css
    1
    Ehsan Tatasadi•1,800
    @tatasadi
    Posted 10 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.
  • Rahmonbek•390
    @Rahmonbek-0001
    Submitted 10 months ago

    social-links-profile-main

    #tailwind-css
    1
    Ehsan Tatasadi•1,800
    @tatasadi
    Posted 10 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!

  • nowshadjaman21•80
    @nowshadjaman21
    Submitted 10 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

    #tailwind-css
    2
    Ehsan Tatasadi•1,800
    @tatasadi
    Posted 10 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
  • sidr467•420
    @sidr467
    Submitted about 1 year 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,800
    @tatasadi
    Posted about 1 year 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!

  • George Olatoyan•1,500
    @Olatoyan
    Submitted over 1 year ago

    Interactive product feedback app

    #express#node#react#typescript#mongodb
    1
    Ehsan Tatasadi•1,800
    @tatasadi
    Posted over 1 year 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
  • Adarsh Gupta•790
    @adarsh78
    Submitted over 1 year ago

    ecommerce-product-page

    #accessibility#react#vite#tailwind-css
    1
    Ehsan Tatasadi•1,800
    @tatasadi
    Posted over 1 year 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
  • mehdias63•330
    @mehdias63
    Submitted over 1 year ago

    Intro component with sign-up form(React and Tailwind)

    #react#tailwind-css
    1
    Ehsan Tatasadi•1,800
    @tatasadi
    Posted over 1 year ago

    Great job on completing this challenge, especially with the form validation! It's clear you've put a lot of effort into ensuring the user input is correctly handled, which is crucial for a good user experience. However, there are a couple of points regarding layout and alignment, particularly on large desktop views, that could use some attention:

    Centering Main Content on Large Screens

    On big desktop views, your main content may not be centered as expected. If your monitor size makes it difficult to spot alignment issues, try zooming out in your browser to get a better overview. To ensure your content remains centered regardless of screen size, consider using Tailwind's mx-auto utility class.

    Vertical Alignment of Sections

    It seems the two sections within your main content are not vertically aligned, which can disrupt the visual flow of your page. To fix this, you might want to use items-center to align them vertically, or you should consider putting them in another div, that does not have min-h-screen.

    These adjustments will help ensure that your layout looks polished and professional, even on larger screens. Keep up the excellent work, and continue to refine and test your designs across a range of devices to ensure the best user experience.

    Marked as helpful
  • mehdias63•330
    @mehdias63
    Submitted over 1 year ago

    News homepage (React and Tailwind)

    #react#tailwind-css
    1
    Ehsan Tatasadi•1,800
    @tatasadi
    Posted over 1 year ago

    Very good job on completing this Frontend Mentor challenge! Your project looks very promising, and the structure you've implemented using React components is well thought out. Here are a few small suggestions to further refine your work:

    Logo and Navbar Alignment

    From medium (md) screen sizes and up, ensure the logo is vertically aligned with the navbar items. This might require adjusting the flexbox properties or margins/padding specifically for these sizes to achieve a visually balanced layout.

    Grid Layout Adjustment

    While the main grid setup works well for mobile view, consider moving your grid layout inside the main tag for desktop views to avoid stretching content unnecessarily due to min-h-screen. This change could help manage the extra spaces more effectively and ensure content is distributed as intended across different screen sizes.

    Single H1 Usage

    Ensure there's only one <h1> element used on the whole page to maintain semantic HTML practices and improve SEO. The <h1> tag should represent the main topic of your page. For other headings, use <h2>, <h3>, etc., to indicate subheadings and maintain a hierarchical structure.

    Implementing these suggestions will not only enhance the aesthetics and alignment of your project but also improve its semantic structure and accessibility. Keep up the great work!

    Marked as helpful
  • mehdias63•330
    @mehdias63
    Submitted over 1 year ago

    Article preview component (React and Tailwind)

    #react#tailwind-css
    1
    Ehsan Tatasadi•1,800
    @tatasadi
    Posted over 1 year ago

    Great job on completing this challenge! Your project showcases a good understanding of React state management and conditional rendering. However, there are a few areas where improvements could enhance functionality and code quality:

    Closing the Share Panel on Desktop

    Consider implementing functionality to close the share panel when clicking outside of it. This could significantly improve the user experience on desktop. One approach is to add an event listener to the window object that listens for click events and checks if the click occurred outside the share panel. If it did, close the panel.

    Naming of isSubmited

    The state variable isSubmited might be misleading since the action related to it is not submitting a form but toggling the visibility of the share panel. A more descriptive name like isSharePanelVisible would clarify its purpose and make your code easier to understand.

    DRY Principle

    It appears that the avatar and name section at the bottom of the card is repeated in your JSX. To adhere more closely to the DRY (Don't Repeat Yourself) principle and simplify your code, consider always displaying the avatar and user information section. For mobile view, you can layer the share panel on top of this information. This approach eliminates the need to repeat the avatar and user information in both state branches of your code.

    Social Icons Interactivity

    Ensure that your social icons are wrapped in <a> tags with appropriate href attributes pointing to the respective social platforms. This makes the icons accessible and interactive. Additionally, adding the cursor-pointer class to these icons will indicate to users that they are clickable.

    IconShare as a Button

    The IconShare component used for closing the share panel should be implemented as a button rather than a div. This change would improve accessibility since buttons are semantically designed for click interactions. Remember to include an aria-label attribute to describe the button's action for screen readers.

    Implementing these suggestions will not only make your code cleaner and more efficient but also enhance the user interface and accessibility of your application. Keep up the excellent work!

    Marked as helpful
  • mehdias63•330
    @mehdias63
    Submitted over 1 year ago

    Base Apparel coming soon page (React and Tailwind)

    #react#tailwind-css
    1
    Ehsan Tatasadi•1,800
    @tatasadi
    Posted over 1 year ago

    Great job on completing this challenge! Your effort in building a responsive and interactive email subscription form with React shows your solid grasp of modern web development principles. Here are a few suggestions to take your project to the next level:

    Max Width in Desktop View

    Consider adjusting the max-width of your main container to 90rem for the desktop view to more closely match the design specifications. This change will ensure that your layout utilizes the screen space more effectively on larger screens.

    Text Alignment in Mobile View

    For a more consistent user experience across devices, ensure that your text is centered in the mobile view. You can achieve this by using Tailwind's text alignment utilities, such as text-center for mobile screens, and possibly md:text-left for larger screens if you want to align text differently on desktop.

    Email Validation Regex

    The current regex for email validation is quite basic and might not cover all valid email formats. Consider using a more comprehensive regex pattern to improve email validation. A commonly used pattern that covers most valid email addresses is:

    const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@(([^<>()[\]\\.,;:\s@"]+\.)+[^<>()[\]\\.,;:\s@"]{2,})$/i;
    

    Background Image Path

    For consistency and to avoid potential path resolution issues, use an absolute path for your background images similar to how you've set up other image paths in your project. This ensures that your background images load correctly regardless of the environment or the route from which your React app is served.

    Example Adjustment for Background Image:

    Instead of bg-[url(../public/images/bg-pattern-desktop.svg)], use the absolute path like you do with other images: bg-[url(/images/bg-pattern-desktop.svg)].

    Implementing these suggestions will enhance the design fidelity, user experience, and reliability of your email subscription form. Keep up the excellent work, and continue to push the boundaries of your front-end development skills!

    Marked as helpful
  • Mark Angel Papio•810
    @ExiviuZ
    Submitted over 1 year ago

    Tailwind / React

    #react#tailwind-css
    1
    Ehsan Tatasadi•1,800
    @tatasadi
    Posted over 1 year ago

    Hey there,

    Great job on completing this challenge! Here are some suggestions to further enhance your project:

    Use Main Element for Main Content

    Consider wrapping your main content in a <main> element instead of a <div>. This semantic HTML element helps with accessibility and clearly defines the primary content of your webpage.

    Reevaluate Width Property

    The w-[90%] style makes your app responsive, but you might want to consider if a max-width of 350px and a padding is sufficient for all devices.

    Use REM Units Consistently

    Switching from pixels to REM units for padding, margins, font sizes, etc., can improve accessibility and maintain consistency across different screen sizes. REM units are based on the root font size, making it easier to scale your design.

    Tailwind's Predefined Classes

    Tailwind offers a wide range of predefined padding, margin, font size, and other utility classes. For example, p-4 translates to padding: 1rem; if the base font size is 16px. Using these predefined classes can simplify your code and make it more readable. Check the Tailwind documentation for a full list of available classes.

    Simplify Social Links Styling

    Instead of repeating styles for each social link, you can create a mutual class and apply the same set of Tailwind utilities to that class in your css file. This approach DRYs up your code and makes it easier to maintain.

    Example Refinement:

    <div className="flex flex-col gap-4">
      <div className="social-link">Github</div>
      <div className="social-link">Frontend Mentor</div>
      <div className="social-link">LinkedIn</div>
      <div className="social-link">Twitter</div>
      <div className="social-link">Instagram</div>
    </div>
    
    .social-link {
       bg-neutral-app-grey font-medium rounded-[0.625rem] py-3 px-4 hover:bg-primary-app-green hover:transition-colors hover:text-neutral-app-off-black cursor-pointer
    }
    

    Implementing these suggestions will not only improve your code's efficiency and readability but also enhance the overall user experience. Keep up the excellent work!

    Marked as helpful
  • mehdias63•330
    @mehdias63
    Submitted over 1 year ago

    Recipe page(React and tailwind)

    #react#tailwind-css
    2
    Ehsan Tatasadi•1,800
    @tatasadi
    Posted over 1 year ago

    Great job on completing this challenge! Your implementation showcases a solid understanding of React component structure and styling. Here are a few suggestions to further refine your project:

    Data Structure

    Consider consolidating all recipe-related data, including preparation time and ingredients, into a single JSON structure. This approach will make your data easier to manage and scale.

    Component Simplification

    You might not need separate components for Preparation and Ingredients if they mainly render basic list items. Using Tailwind CSS for styling directly in your main component could streamline your code. For example:

    <ul className="text-dark-gray text-base font-normal marker:text-purple mt-2">
      {/* List items here */}
    </ul>
    

    Component Naming

    Renaming the Card component to RecipePage could better reflect its content and purpose, enhancing code readability.

    Semantic HTML and Accessibility

    Ensure you use only one <h1> per page for SEO and accessibility best practices. Use <h2> for subheadings.

    Bullet Points Visibility

    If bullet points aren't showing, check your Tailwind CSS classes. Ensure you're not using list-none or other styles that might remove list markers. To customize bullet points with Tailwind CSS:

    <ul className="list-disc pl-5">
      {/* List items here */}
    </ul>
    

    Implementing these suggestions will enhance the structure, scalability, and accessibility of your project. Keep up the great work!

    Marked as helpful
  • mehdias63•330
    @mehdias63
    Submitted over 1 year ago

    Interactive Rating Component (React and Tailwind)

    #react#tailwind-css
    1
    Ehsan Tatasadi•1,800
    @tatasadi
    Posted over 1 year ago

    Hey Mehdi,

    Great job on implementing the rating card component! This is a solid example of utilizing React's state management and conditional rendering to create a responsive UI. Let's address the feedback to refine your code further.

    Corrections and Improvements:

    • The extra comma in the Rate component's className (isSelected ? "bg-light-gray , text-white" : "") should be removed.

    • In addition, to apply default styles when isSelected is false, you should move the default classes to the other side of the ternary operator to ensure they are applied correctly and avoid having two background and text colors.

    Corrected Code:

    className={`${isSelected ? "bg-light-gray text-white" : "bg-dark-blue text-light-gray"} w-9 h-9 lg:w-[3.1875rem] lg:h-[3.1875rem] rounded-full flex justify-center items-center hover:bg-orange hover:text-white cursor-pointer`}
    
    • There's a missing space in the lg:text-[0.9375rem]font-normal class, and since font-normal is the default font weight, you can omit it unless you're overriding a different font weight set elsewhere.

    By implementing these suggestions, your code becomes cleaner and more efficient, enhancing readability and maintainability. Keep up the great work, and continue refining your skills with each project you tackle!

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub