HTML | CSS | Responsive Design | Custom Properties

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 months ago

  Congratulations on completing your project! It's fantastic to see your hard work come to life. Here are some best practices and recommendations to consider for further improvements:

  1. Semantic HTML:

     • Use semantic tags where applicable. Instead of div for every element, use main, section, article, header, footer, etc., to improve readability and SEO.
     • For example, replace <div class="wrapper"> with <main class="wrapper">.

  2. CSS Best Practices:

     • Organize your CSS properties: Group related properties together, for instance, put all flexbox-related properties in one group.
     • Consistent Naming Convention: Stick to a consistent naming convention like BEM, which can make your classes more readable and maintainable.

  3. Responsive Design:

     • Consider using media queries for different screen sizes. Ensure that your cards stack vertically on smaller screens for better mobile experience.
     • Example:

       @media (max-width: 768px) {
         .wrapper {
           flex-direction: column;
         }
       }
       

  4. Accessibility:

     • Alt text for images: Ensure all images have descriptive alt text for accessibility. Good to see you've already started doing this!
     • Keyboard navigation: Ensure that the site can be navigated using a keyboard, especially the buttons and links.

  5. Performance:

     • Optimize images to reduce load times, consider using modern formats like WebP.
     • Minify CSS and JavaScript files for production.

  6. Code Maintainability:

     • Comments: Add comments to your CSS and HTML files to describe sections or complex parts.
     • Modular CSS: Consider splitting your CSS into separate files for each component for easier management.

  7. Learning Resources:

     • For semantic HTML: MDN Web Docs
     • For CSS best practices: CSS Guidelines
     • Responsive design tips: Responsive Web Design
     • Accessibility guidelines: Web Accessibility Initiative

  Keep up the great work! Your journey in web development is off to a strong start. Remember, each project is a stepping stone to becoming a more skilled developer. Looking forward to seeing your future projects! 💪🚀

  0