Comment Form Validation

A comment form with client-side validation built with HTML and CSS
as part of The Odin Project – Intermediate HTML & CSS course.

This project demonstrates creating a form that validates user input, providing a better user experience and ensuring proper data formatting before submission.

---

🚀 Live Demo

👉 https://top-submissions.github.io/fullstackjs-comment-form-validation/

---

📋 Project Overview

The comment form allows users to submit comments with the following fields:

• Name
• Email
• Comment

The form includes validation to ensure:

• Required fields are filled
• Email has a valid format
• Comments are not empty

The project uses CSS styling to provide visual feedback for invalid or empty inputs.

---

✨ Features

• Responsive form layout for desktop, tablet, and mobile
• Input validation for name, email, and comment fields
• Real-time error messages and focus/hover states
• Clean and modern design for easy readability
• GitHub Pages deployment

---

🛠 Technologies Used

• HTML5: Semantic form markup
• CSS3: Styling, responsive layout, and validation feedback
• Google Fonts: Optional font styling

---

📖 How It Works

• The form uses HTML <form> and input elements.
• CSS provides styling for valid/invalid states and visual feedback.
• Validation ensures all required fields are filled with correctly formatted data.
• Can be integrated with backend scripts for comment handling (not included in this project).

---

📚 Learning Outcomes

• Structuring semantic HTML forms
• Implementing CSS styling for validation feedback
• Creating responsive form layouts
• Understanding user experience (UX) principles
• Deploying projects to GitHub Pages

---

👤 Author

MatimotTheTimoters GitHub: https://github.com/Chonky_Seal