Design comparison
Solution retrospective
Created using vanilla JavaScript, HTML & CSS, any suggestions for improvements/best practices will be much appreciated as I am still new to JavaScript
Community feedback
- @petritnurediniPosted 9 months ago
Congratulations on completing your Newsletter sign-up form project! It's a significant step in your journey as a front-end developer. Here are some recommendations and best practices to consider:
-
HTML Structure and Accessibility:
- Semantic HTML: Good use of semantic tags like
<main>
,<section>
, and<footer>
. This improves accessibility and SEO. - Alt Text: Ensure that the alt text for images is descriptive to improve accessibility for screen reader users.
- Form Accessibility: Use
<label>
tags for form inputs for better accessibility.
- Semantic HTML: Good use of semantic tags like
-
CSS and Design:
- CSS Variables: Great job using CSS variables for colors. This makes it easier to maintain and change the color scheme.
- Responsive Design: Ensure your design is responsive on various devices. Media queries are effectively used; continue testing on different screen sizes.
- Consistent Styling: Ensure that the styling is consistent across different elements for a cohesive look.
-
JavaScript:
- Validation Feedback: Provide immediate feedback for form validation. Instead of just changing the border color, display a message to the user for a better experience.
- External JavaScript: It's a good practice to keep JavaScript in an external file for better maintainability.
-
Performance Optimization:
- Image Optimization: Optimize images for faster loading times, especially for mobile users.
-
SEO Best Practices:
- Meta Tags: Include descriptive
<meta>
tags in your HTML for better SEO.
- Meta Tags: Include descriptive
-
Code Quality and Organization:
- CSS Organization: Consider organizing your CSS by sectioning it into logical blocks.
- Comments: Use comments to describe sections of your HTML, CSS, and JavaScript for better readability.
-
Learning Resources:
- To learn more about web accessibility, visit Web Content Accessibility Guidelines (WCAG).
- For CSS best practices, check out MDN Web Docs.
- To improve your JavaScript skills, JavaScript.info is a great resource.
Keep up the fantastic work and continue challenging yourself with new projects. Your dedication is admirable, and each project is a stepping stone towards becoming an expert developer. Remember, the front-end community is always here for feedback and support. Keep coding and exploring! 👨💻🚀💪
Marked as helpful0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord