HTML | CSS | Responsive Design | Custom Properties

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnuredini

  Posted over 1 year 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! 💪🚀

  00