https://github.com/top-submissions/fullstackjs-comment-form-validation
https://github.com/top-submissions/fullstackjs-comment-form-validation
beginner-project clean-design comment-form css error-messages form-validation frontend github-pages html input-validation intermediate-html-css modern-ui odin-project portfolio-project responsive-design student-project the-odin-project user-experience user-interface web-development
Last synced: 20 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/top-submissions/fullstackjs-comment-form-validation
- Owner: top-submissions
- Created: 2025-12-18T02:54:27.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-12-24T23:21:29.000Z (6 months ago)
- Last Synced: 2026-04-03T13:54:16.059Z (3 months ago)
- Topics: beginner-project, clean-design, comment-form, css, error-messages, form-validation, frontend, github-pages, html, input-validation, intermediate-html-css, modern-ui, odin-project, portfolio-project, responsive-design, student-project, the-odin-project, user-experience, user-interface, web-development
- Language: CSS
- Size: 6.84 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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 `` 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](https://github.com/Chonky_Seal)