Skip to content
OverviewSolutions
54
Comments
182
P

Kamran Kiani

@kaamiik2,780 points

Hi. I'm practicing html, css and js and

I’m currently learning...

React

Latest solutions

  • Rest Countries Api using React and Tailwind

    #fetch#react#swr#tailwind-css#vite
    P
    Kamran Kiani•2,780
    Submitted 2 months ago

    Areas I'd like help with

    1. Performance Optimization

      • Best practices for reducing unnecessary re-renders
      • Strategies for optimizing API calls and caching

    2. State Management

      • When to use Context vs. Props vs. State Management Libraries
      • Better patterns for managing complex state

    3. Accessibility

      • Ensuring the application meets WCAG standards
      • Improving keyboard navigation and screen reader support
    1 comment

  • Mortgage Repayment Calculator using React Tailwind

    #accessibility#react#tailwind-css#vite
    P
    Kamran Kiani•2,780
    Submitted 3 months ago

    I'm looking for input on further optimization of state management and performance, ways to boost accessibility compliance, and strategies to improve project scalability.

    Feel free to share any additional thoughts or suggestions!

    2 comments

  • Product list Card using React, Tailwind and TypeScript

    #accessibility#react#tailwind-css#vite#typescript
    P
    Kamran Kiani•2,780
    Submitted 4 months ago

    I would appreciate feedback on several specific areas of my project. First and foremost, I am looking for insights into whether there are any issues with my state management or component structure. I want to ensure that my use of the useState hook is optimal and that my components are designed for maximum reusability and clarity. Additionally, I’d like feedback on how I’ve implemented TypeScript in the project, particularly whether my type definitions and type safety practices are effective and maintainable. Furthermore, I would like to receive feedback on the accessibility features I implemented, particularly the aria-live announcements for screen readers. It’s important to me that my application is accessible to all users, so any suggestions for improvement in this area would be valuable. Lastly, I am open to any general advice on how I can enhance my code quality, whether through better practices, performance optimizations, or improved styling techniques.

    1 comment

  • Result Summary Component using react and tailwind

    #accessibility#fetch#react#tailwind-css
    P
    Kamran Kiani•2,780
    Submitted 4 months ago

    I would appreciate help with optimizing the application's performance, particularly in terms of improving responsiveness. Additionally, any advice on best practices for structuring larger React applications would be valuable as I continue to scale this project and others in the future.

    1 comment

  • Pomodoro App using Astro, Sass, Tailwind and Vanilla JS

    #accessibility#astro#sass/scss#tailwind-css
    P
    Kamran Kiani•2,780
    Submitted 5 months ago

    I would like help with optimizing the performance of the app, particularly in terms of reducing any potential layout shifts or flickers when loading user settings. Additionally, guidance on implementing a more robust state management solution would be beneficial, as it could improve the scalability and maintainability of the application. Lastly, any advice on further enhancing the app's accessibility features would be greatly appreciated.

    1 comment

  • Galleria Slideshow using Astro, Sass, Tailwind and Vanilla JS

    #accessibility#astro#cube-css#sass/scss#tailwind-css
    P
    Kamran Kiani•2,780
    Submitted 6 months ago

    I used Astro to build this project, including dynamic routes. I’d like to know if my approach is correct for creating multiple pages within a folder. Specifically, I added a [slug].astro file and used a data.json file to generate the pages.

    Regarding the CSS, is my implementation of the masonry layout correct?

    If you notice any other issues in my HTML, Accessibility, or CSS, I would appreciate your feedback on those as well.

    1 comment
View more solutions

Latest comments

  • Andrey•3,890
    @dar-ju
    What are you most proud of, and what would you do differently next time?

    The project took 22 hours to complete. I don't know if it's a lot or a little - noting the time will help predict future work.

    REST Countries API, VUE, TS

    #pinia#sass/scss#typescript#vue#vite
    1
    P
    Kamran Kiani•2,780
    @kaamiik

    Congrats for doing this challenge. I think for the search input and the select you can wrap them inside a form element. It's more semantic.

    And for the load more button I really liked it. How did you implement it?

    Marked as helpful
  • sj•100
    @subjectiverealityy
    What challenges did you encounter, and how did you overcome them?

    When I was pushing to Git, I kept making mistakes on the README.md file and had to keep repeating the process of git add, git commit and git push. I have now gotten it to read the way I want it to. The problems originated from using the wrong file paths for the README.md file and my project's screenshot initially.

    Responsive Blog Preview Card

    2
    P
    Kamran Kiani•2,780
    @kaamiik

    Hi. Some notes for your code:

    HTML

    • A proper page structure inside <body> should look like this:
    <body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

    Since this is a card component, we only need the <main> element.

    • For <img> tag you need alt text to describe the image. Although for decorative and avatar images You need to add an empty alt="" because there is no information in the photo. The point is you have to use alt.
    • Follow proper heading hierarchy:
      • Each page should have one <h1>
      • For components that are part of a larger page, use <h2> instead
      • This maintains proper document structure while reflecting component hierarchy
    • You do not need to wrap the person name into a <span>. Simply use a p tag.

    CSS Best Practices

    • Start with a proper CSS reset (Andy Bell or Josh Comeau resets are recommended)

    • Use viewport height properly:

      /* Instead of: */
body {
  height: 100vh;
}

/* Use: */
body {
  min-height: 100vh;
}

    This ensures content can expand beyond viewport height

    • Avoid fixed widths and height for text containers:
      • Remove width: 384px and height: 522px from .wrapper
      • Use max-width for better text container adaptability
    • Use relative units:
      • rem for font-size and max-width instead of px
      • Learn more about this here
    • Follow mobile-first approach:
      • Start with mobile styles as the default
      • Use min-width in media queries
      • Use em units for breakpoints

    Example media query:

    @media (min-width: 40em) {
  /* Desktop styles */
}
  • P
    Kamran Kiani•2,780
    @kaamiik

    Hi. I see some issues in your code I wanna mention:

    HTML

    • A proper page structure inside <body> should look like this:
    <body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

    Since this is a card component, we only need the <main> element.

    • For decorative and avatar images, use empty alt text: alt=""
    • Avoid using words like image, picture, or photo in alt descriptions
    • The "Learning" text should not be a <span> - it should be a <p> tag. The person name is a <p> tag too.
    • Elements with hover effects are considered interactive
    • If an element with hover effects navigates to a new page, wrap it in an <a> tag. Here your h2 is interactive too. So you need to wrap it inside the a tag:
    <h2><a href="#">Title Text</a></h2>

    CSS Best Practices

    • Start with a proper CSS reset (Andy Bell or Josh Comeau resets are recommended)

    • Use viewport height properly:

      /* Instead of: */
body {
  height: 100vh;
}

/* Use: */
body {
  min-height: 100vh;
}
    • Avoid fixed widths for text containers:
      • Remove width: 300px from .card
      • Use max-width for better text container adaptability
    • Use relative units:
      • rem for font-size and max-width instead of px
      • Learn more about this here
  • P
    Kamran Kiani•2,780
    @kaamiik

    I have some notes for your code which may help improve your code:

    HTML

    • For single-component pages, use a minimal semantic structure:
    <body>
  <main>...</main>
</body>

    This provides proper document outline while keeping markup minimal. Remember the main tag is necessary.

    • Image descriptions should be meaningful and descriptive:

      • Use alt text that explains the purpose: alt="QR code to Frontend Mentor website"
    • Follow proper heading hierarchy:
      • Each page should have one <h1>
      • For components that are part of a larger page, use <h2> instead
      • This maintains proper document structure while reflecting component hierarchy

    CSS

    • Start with a proper CSS reset (Andy Bell or Josh Comeau recommended)
    • This ensures consistent styling across browsers
    • You don't need min-width on body. Also no need for max-width on #root. You only need a max-width on .card with rem unit.
    • Keep image styling minimal and responsive:
    img {
  max-width: 100%;
  display: block;
}

    This ensures:

    • Images scale properly
    • No unwanted whitespace below images
    • Content adapts to different screen sizes

    CSS Units Best Practices

    • Use relative units for better accessibility and scaling:
      • Convert font-size and max-width values from px to rem
      • This allows text and layout to scale with user preferences
      • Read more about unit best practices here

    This improves:

    • Accessibility for users who adjust browser text size
    • Consistent scaling across devices and zoom levels
    • Code maintainability and flexibility
  • P
    Kamran Kiani•2,780
    @kaamiik

    Hi. I have some notes for your code which may improve it.

    GitHub

    • Use one repo for each project. Adding all in one repo consider as a bad practice.

    HTML

    • For single-component pages, use a minimal semantic structure:
    <body>
  <main>...</main>
</body>

    This provides proper document outline while keeping markup minimal.

    • Follow proper heading hierarchy:
      • Each page should have one <h1>
      • For components that are part of a larger page, use <h2> instead
      • This maintains proper document structure while reflecting component hierarchy

    CSS

    • Start with a proper CSS reset (Andy Bell or Josh Comeau recommended)
    • This ensures consistent styling across browsers
    • For img use max-width: 100%;

    This ensures:

    • Images scale properly
    • Content adapts to different screen sizes

    CSS Units Best Practices

    • Use relative units for better accessibility and scaling:
      • Convert font-size and max-width values from px to rem
      • This allows text and layout to scale with user preferences
      • Read more about unit best practices here

    This improves:

    • Accessibility for users who adjust browser text size
    • Consistent scaling across devices and zoom levels
    • Code maintainability and flexibility
    • Use min-height instead of fixed height for viewport-height elements
    • You do not need media query for this challenge and also remember in most of the times It's better to code mobile first.
    Marked as helpful
  • P
    Kamran Kiani•2,780
    @kaamiik

    Hi. Some notes for your code:

    HTML

    • The address is a p tag not a span
    • For social links, use semantic list tags like ul and li:
    <!-- Use: -->
<ul class="social-links">
  <li><a href="#">GitHub</a></li>
  <li><a href="#">Frontend Mentor</a></li>
  <li><a href="#">LinkedIn</a></li>
</ul>

    This provides better semantics and accessibility for related links

    • Never nest two interactive elements in each other.
    • For decorative and avatar images, use empty alt text: alt=""
    • Avoid using words like image, picture, or photo in alt descriptions

    CSS

    • Start with a proper CSS reset - both Andy Bell and Josh Comeau provide excellent options
    • Using a CSS reset helps ensure consistent styling across browsers
    • Use rem units instead of px for better accessibility and scaling:
      • Use rem for max-width
      • This allows text and containers to scale with user's browser settings
      • Learn more about unit best practices here
    • Use min-height: 100vh instead of height: 100vh to prevent overflow issues:

    This ensures your container will expand if content exceeds viewport height.

View more comments