How It Works 📣
Tick the practices you've implemented in your website. Your selections will be saved automatically and you can track your progress over time. Meet the success criteria for a special reward!
Success Criteria: 12 out of 15 best practices
Your Progress 🔥
You've implemented 0 out of 15 best practices
💡 Best Practices Checklist
HTML
Use semantic elements like <header>, <footer>, <section>, and <article> to improve accessibility, search engine optimization, and code readability.
Include descriptive alt attributes for all images to ensure accessibility for screen readers and search engine optimization benefits.
Include the viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> to ensure proper rendering on mobile devices.
Follow the correct HTML document structure with <!DOCTYPE html>, <html>, <head>, and <body> tags for compatibility across browsers.
Implement proper <label> tags with matching for attributes for all form fields to improve user experience and accessibility.
CSS
Utilize media queries and flexible grids/layouts to ensure your website looks good on all devices and screen sizes.
Include a CSS reset or normalize stylesheet to ensure consistent rendering across different browsers by removing default styling variations.
Use CSS custom properties (variables) for colors, fonts, and spacing to maintain consistency and make global style changes easier to implement.
Keep your CSS in external stylesheets instead of inline styles to improve maintenance, caching, and separation of concerns.
Organize CSS by components or sections with clear comments to make styles easier to find and maintain as the project grows.
JavaScript
Separate JavaScript from HTML by using event listeners rather than inline event handlers to improve maintainability and separation of concerns.
Use modern JavaScript features like arrow functions, destructuring, and template literals to write cleaner, more readable code.
Use Promises or async/await instead of nested callbacks for asynchronous operations to improve code readability and error handling.
Organize JavaScript code into modules or components to avoid global namespace pollution and improve code organization.
Implement proper try/catch blocks for error handling to prevent application crashes and provide better user feedback.