Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML,CSS,JAVASCRIPT, FUNCTIONS

Giorgi 30

@f1zzi

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@sliyarli

Posted

Certainly, let's focus on suggestions that will help improve your coding skills:

1 - Code Organization and Readability: You've done a good job organizing your code into HTML, CSS, and JavaScript sections. Keep this practice consistent in larger projects to make your code more readable and maintainable.

2 - CSS Styling: Your CSS styling is clear and well-structured. Continue to use meaningful class names and comments to describe the purpose of each style rule. This will make it easier to understand and modify your styles in the future.

3 - Font Import: Importing Google Fonts as you did is a good practice for using custom fonts in your projects. Make sure to include comments explaining the purpose of imported fonts, especially when using multiple fonts.

4 - JavaScript Validation: Your JavaScript code for form validation is a good starting point. To improve your coding skills, consider expanding this validation to check for a valid email format and strong password criteria. This will give you valuable experience in handling user input.

5 - Code Comments: While your current code doesn't have many comments, adding comments is an excellent practice for improving your coding skills. In larger projects or when collaborating with others, comments help explain your code's logic and functionality.

6 - Responsive Design: Learning to create responsive designs is an essential skill for front-end developers. Continue practicing media queries to make your web pages adapt to different screen sizes and orientations. Experiment with different layouts and designs for various devices.

7 - Accessibility: Understanding and implementing accessibility principles in your code is crucial. Practice providing appropriate labels for form elements, ensuring keyboard navigation, and testing your pages with screen readers. This will enhance your skills in creating inclusive web experiences.

8 - Validation Feedback: Enhance your validation feedback. Instead of only changing the border color, consider displaying an error message next to the input field to provide users with clear feedback on what needs to be corrected.

9 - Testing: Always thoroughly test your code on various browsers and devices to ensure compatibility. This practice is vital for delivering a consistent user experience.

10 - Project Scope: Consider expanding the functionality of your project. For example, you could make the form functional by adding a server-side script to process submissions. This will give you valuable experience in handling user data.

By focusing on these suggestions, you'll not only improve your coding skills but also enhance the quality and functionality of your web projects. Keep practicing and exploring new techniques to continue growing as a front-end developer.

Marked as helpful

0

Giorgi 30

@f1zzi

Posted

Thans for the feedback. @sliyarli

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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