Create a PHP Guestbook with XAMPP Part 1 | HTML & CSS Tutorial #php #html #coding #programming #easy

🚀 Build a Complete XAMPP Guestbook App Using PHP, HTML, CSS & JavaScript!

In this full tutorial, you'll learn how to create a functional guestbook website where visitors can leave messages using a simple form. We’ll walk through every step — from designing the front end with HTML, CSS, and JavaScript, to connecting everything with PHP and MySQL using XAMPP.

This project is great for beginners who want to learn how websites store user input in a database and display it dynamically. You’ll not only build something fun and useful — you'll also practice form handling, database interaction, and input validation.

🛠️ What You'll Learn:

✅ Setting up a local web server using XAMPP

✅ Creating a beautiful HTML/CSS guestbook form

✅ Writing PHP to process and save data

✅ Storing and displaying messages from a MySQL database

✅ Validating and securing user input

This hands-on project is a great foundation if you’re learning full stack development and want to understand how the front end talks to the back end!

💡 BONUS TIP: At the end, we’ll go over how to expand the project — adding timestamps, admin controls, or even deploying it online!

📢 Don’t forget to like, comment, and subscribe if this video helped you!
💬 Have a question or want more videos like this? Drop it in the comments.

#XAMPP #PHPGuestbook #WebDevelopment #FullStackBeginner #MySQL #JavaScript #HTML #CSS #PHPProject #XAMPPTutorial #LearnWebDevelopment

[KnowledgeOrbitAcademy]

main.css:

body {
font-family: 'Segoe UI', Arial, sans-serif;
background: linear-gradient(135deg, #fffbe6 0%, #ffe0c3 100%);
margin: 0;
padding: 0;
min-height: 100vh;
text-align: center;
}


.main-container {
max-width: 900px;
margin: 40px auto 80px auto;
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
padding: 0 0 30px 0;
overflow: hidden;
/* Remove overflow: hidden to allow main to scroll */
}


header {
background: linear-gradient(90deg, #ff512f 0%, #dd2476 100%);
color: #fff;
padding: 32px 0 16px 0;
border-bottom-left-radius: 32px 16px;
border-bottom-right-radius: 32px 16px;
box-shadow: 0 2px 8px rgba(221, 36, 118, 0.08);
}


header h1 {
margin: 0 0 10px 0;
font-size: 2.5rem;
letter-spacing: 2px;
font-weight: 700;
text-align: center;
}


nav ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}


nav ul li {
display: inline-block;
margin: 0 10px;
}


nav a {
color: #fff;
text-decoration: none;
font-weight: 500;
font-size: 1.1rem;
padding: 8px 18px;
border-radius: 6px;
transition: background 0.2s, color 0.2s;
}


nav a:hover, nav ul li.active a {
background: #fff;
color: #dd2476;
box-shadow: 0 2px 8px rgba(221, 36, 118, 0.08);
}


main {
padding: 32px 24px 0 24px;
}


.guestbook_table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 32px 0 0 0;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(221, 36, 118, 0.06);
}


.guestbook_table thead {
background: linear-gradient(90deg, #ff512f 0%, #dd2476 100%);
color: #fff;
}


.guestbook_table th, .guestbook_table td {
padding: 16px 12px;
text-align: left;
}


.guestbook_table th {
font-size: 1.1rem;
letter-spacing: 1px;
}


.guestbook_table tbody tr {
transition: background 0.2s;
}


.guestbook_table tbody tr:nth-child(odd) {
background: #fff7e6;
}


.guestbook_table tbody tr:nth-child(even) {
background: #ffe0c3;
}


.guestbook_table tbody tr:hover {
background: #ffe6f2;
}


.guestbook_table ul {
list-style: none;
margin: 0;
padding: 0;
}


.guestbook_table ul li {
display: inline-block;
margin-right: 8px;
}


.guestbook_table a {
color: #dd2476;
text-decoration: none;
font-weight: 600;
padding: 4px 10px;
border-radius: 4px;
transition: background 0.2s, color 0.2s;
}


.guestbook_table a:hover {
background: #ff512f;
color: #fff;
}


.guestbook_controls {
margin: 32px auto 0 auto;
max-width: 500px;
background: #fff8f0;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(221, 36, 118, 0.05);
padding: 24px 32px;
}


.guestbook_controls label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #dd2476;
font-size: 1.05rem;
}


.guestbook_controls input,
.guestbook_controls textarea {
width: 100%;
padding: 10px 12px;
margin-bottom: 18px;
border: 1px solid #ffb199;
border-radius: 6px;
font-size: 1rem;
background: #fff;
transition: border 0.2s;
font-family: inherit;
}


.guestbook_controls input:focus,
.guestbook_controls textarea:focus {
border: 1.5px solid #dd2476;
outline: none;
}


.guestbook_controls textarea {
min-height: 80px;
resize: vertical;
}


.guestbook_controls .btn-reset,
.guestbook_controls .btn-submit {
width: 48%;
display: inline-block;
margin: 0 1% 0 0;
background: linear-gradient(90deg, #ff512f 0%, #dd2476 100%);
color: #fff;
border: none;
border-radius: 6px;
padding: 12px 0;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
box-shadow: 0 2px 8px rgba(221, 36, 118, 0.08);
}


.guestbook_controls .btn-reset:hover,
.guestbook_controls .btn-submit:hover {
background: linear-gradient(90deg, #dd2476 0%, #ff512f 100%);
transform: scale(1.04);
}


footer {
position: fixed;
left: 0;
bottom: 0;
width: 100vw;
background: linear-gradient(90deg, #ff512f 0%, #dd2476 100%);
color: #fff;
text-align: center;
padding: 18px 0 10px 0;
font-size: 1.1rem;
letter-spacing: 1px;
box-shadow: 0 -2px 8px rgba(221, 36, 118, 0.08);
z-index: 100;
}


.guestbook_table {
width: 100%;
border-collapse: collapse;
}


.guestbook_table thead {
display: table;
width: 100%;
table-layout: fixed;
}


.guestbook_table tbody {
display: block;
height: 320px; /* Set your desired scroll height */
overflow-y: auto;
width: 100%;
}


.guestbook_table tr {
display: table;
width: 100%;
table-layout: fixed;
}


.guestbook_table th, .guestbook_table td {
padding: 8px;
text-align: left;
word-break: break-word;
}


.guestbook_table th,
.guestbook_table td {
padding: 8px;
text-align: left;
word-break: break-word;
/* Set a consistent height for header and cells */
height: 48px; /* Adjust as needed for your design */
}


.guestbook_table th:nth-child(1),
.guestbook_table td:nth-child(1) {
width: 50px; /* ID column: narrow */
text-align: center;
}


.guestbook_table th:nth-child(2),
.guestbook_table td:nth-child(2) {
width: 80px; /* Name column: a bit wider */
}


.guestbook_table th:nth-child(3),
.guestbook_table td:nth-child(3) {
width: 200px; /* Email column */
}


.guestbook_table th:nth-child(4),
.guestbook_table td:nth-child(4) {
width: 1fr; /* Comment column: flexible */
}


.guestbook_table th:nth-child(5),
.guestbook_table td:nth-child(5) {
width: 150px; /* Actions column */
}


.guestbook_table {
box-shadow:
-16px 0 24px -8px rgba(0, 0, 0, 0.8), /* strong left shadow */
0 16px 32px -8px rgba(0, 0, 0, 0.8); /* strong bottom shadow */
}


If you have any questions or errors, write in the comments