Responsive, CSS animation, Render conditional images

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 months ago

  Congratulations on finishing your project! It's great to see your progress and commitment to building a functional and visually appealing application. Here are a few best practices and recommendations to enhance your work:

  1. Code Organization:

     • Component Structure: Good job breaking down the UI into reusable components. Consider further modularization for complex components for better maintainability.
     • Separation of Concerns: Keep styling, logic, and structure separate. Using CSS modules or styled-components can help achieve this.

  2. Performance:

     • Optimize Image Loading: If you're using images, consider lazy loading or using optimized formats like WebP for better performance.
     • UseEffect Dependency Array: Be cautious with your dependency arrays in useEffect. For instance, widthScreen in your resize effect might cause unnecessary rerenders.

  3. Responsive Design:

     • Media Queries: Good use of media queries for responsiveness. Test across different devices to ensure UI consistency.
     • SVG Responsiveness: Ensure that your SVGs are responsive and render well on all screen sizes.

  4. Accessibility:

     • Semantic HTML: Use semantic HTML tags where appropriate for better accessibility.
     • Keyboard Navigation: Ensure that all interactive elements are accessible through keyboard navigation.

  5. Styling:

     • Consistent Theming: Utilize CSS variables or a theme provider for consistent styling across your app.
     • Avoid Inline Styles: Inline styles can be hard to override and maintain. Consider using external stylesheets or styled components.

  6. Further Learning Resources:

     • For React best practices: React Official Documentation
     • For CSS and styling: Styled Components
     • For performance optimization: Web.Dev

  Keep up the hard work and continue to challenge yourself with new projects! Each project is a stepping stone in your development journey. Stay curious and keep experimenting with new technologies and techniques. Looking forward to seeing your future projects!

  Marked as helpful

  1
• 

  Codster dev•170

  @codster15Posted 10 months ago

  great ... now try to learn grid and flex to centre the content

  1