Newsletter sign-up form with success message with Mobile First Design
Design comparison
Solution retrospective
It is worth mentioning that using mobile-first approach is way easier than building normal web view first.
Has been updated after Grace provided some comments. will update the remaining js such as "toggle classes or attributes in js but not change inline styles", and "Make sure focus is managed approximately".
Community feedback
- @petritnurediniPosted 10 months ago
Congratulations on completing your Newsletter sign-up form project! This is a great achievement and demonstrates your growing skills in web development. Here are some best practices and recommendations to consider for your future projects:
-
HTML Best Practices:
- Semantic HTML: Great job using semantic tags like
<section>
and<main>
. This improves readability and accessibility. - Alt Text for Images: Make sure to provide descriptive alt text for all images. This is crucial for accessibility and helps users who rely on screen readers.
- Form Accessibility: Enhance the accessibility of your form by associating
<label>
elements with form controls using thefor
attribute.
- Semantic HTML: Great job using semantic tags like
-
CSS Styling:
- Responsive Design: Ensure that your website is responsive on various devices. Use media queries effectively to adapt the layout to different screen sizes.
- Consistent Styling: Ensure consistency in styling across different elements and states (like hover effects).
-
JavaScript Interactivity:
- Form Validation: Consider adding client-side validation for the email input. This provides immediate feedback to users.
- Unobtrusive JavaScript: Keep the functionality working even if JavaScript is disabled by ensuring that the form can be submitted traditionally.
-
Performance Optimization:
- Image Optimization: Optimize images to reduce load times, especially important for users on slower internet connections.
-
SEO and Accessibility:
- Meta Tags: Include descriptive meta tags in the
<head>
for better SEO. - Language Attribute: Good use of the
lang
attribute in your HTML tag, enhancing accessibility.
- Meta Tags: Include descriptive meta tags in the
-
Code Quality:
- CSS Organization: Organize your CSS to make it more maintainable. Consider grouping similar styles and using comments to separate sections.
- Code Comments: Use comments in your HTML and JavaScript to describe what different sections of your code do.
-
Learning Resources:
- For HTML and CSS best practices, MDN Web Docs is an excellent resource.
- To enhance your JavaScript skills, JavaScript.info offers in-depth guides and tutorials.
Keep up the fantastic work! Every project is a step forward in your journey as a developer. Remember, the community is always here to provide support and feedback. Your dedication to learning and improving is truly inspiring! Keep pushing your limits and exploring new technologies! 🚀💻🌟
0 -
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