Nursery School Website
A few basic elements are needed to create a nursery school website. This is a basic tutorial that explains how to create a website for Nursery School using HTML, CSS, and a little JavaScript.
ALSO READ: How to create a landing page using HTML and CSS.
HTML Structure:
The website’s structure is provided using HTML. An example of code for a website for a childcare school may be found below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Kids Nursery</title>
<link rel="stylesheet" href="styles.css"> <!-- Linking external CSS file -->
</head>
<body>
<!-- Header Section -->
<header>
<div class="logo">
<h1>Happy Kids Nursery</h1>
</div>
<nav>
<ul>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Our Services</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
</header>
<!-- About Section -->
<section id="about">
<h2>About Us</h2>
<p>At Happy Kids Nursery, we provide a safe and nurturing environment for children to learn and grow.</p>
<img src="nursery_photo.jpg" alt="Nursery Image">
</section>
<!-- Services Section -->
<section id="services">
<h2>Our Services</h2>
<ul>
<li>Childcare for ages 2-5</li>
<li>Outdoor play areas</li>
<li>Learning through play</li>
<li>Nutritious meals and snacks</li>
</ul>
</section>
<!-- Gallery Section -->
<section id="gallery">
<h2>Gallery</h2>
<div class="gallery-images">
<img src="image1.jpg" alt="Kids Playing">
<img src="image2.jpg" alt="Outdoor Play">
<img src="image3.jpg" alt="Learning Activities">
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<h2>Contact Us</h2>
<form>
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Your Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
<!-- Footer Section -->
<footer>
<p>© 2024 Happy Kids Nursery. All Rights Reserved.</p>
</footer>
</body>
</html>
Explanation:
HTML Structure: Sections like header, section, and footer are used to construct the structure.
The site’s navigation and logo are located in the header.
To enable linking from the navigation menu, each section—About, Services, Gallery, and Contact—is prominently labeled with id attributes.
Users can submit messages using the form located in the “Contact Us” section.
CSS Styling:
Styles are added via CSS to improve the website’s appearance. A simple CSS file (styles.css) is shown below:
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
}
header {
background-color: #ffcc00;
padding: 10px 20px;
text-align: center;
}
header h1 {
margin: 0;
color: white;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline-block;
margin: 0 15px;
}
nav ul li a {
text-decoration: none;
color: white;
}
section {
padding: 20px;
}
#about img {
max-width: 100%;
height: auto;
}
#services ul {
list-style-type: disc;
padding-left: 20px;
}
.gallery-images img {
width: 30%;
margin: 10px;
display: inline-block;
}
form {
display: flex;
flex-direction: column;
}
form input, form textarea {
margin-bottom: 10px;
padding: 8px;
width: 100%;
max-width: 400px;
}
button {
padding: 10px;
background-color: #ffcc00;
border: none;
color: white;
cursor: pointer;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
Explanation:
Body Styling: The body tag establishes the overall tone for the background color and text.
Header Styling: It establishes the header’s color scheme, logo, and navigational links.
Section Styling: Margin and padding are used for space in each part, such as About and Services. The Contact section’s form is designed to be user-friendly, and the gallery’s image sizes are adjusted appropriately.
Adding JavaScript (Optional):
JavaScript can be used to provide some interactivity, such validating the contact form. Here is a straightforward form validation:
<script>
document.querySelector("form").addEventListener("submit", function(event) {
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const message = document.getElementById("message").value;
if (!name || !email || !message) {
alert("Please fill out all fields.");
event.preventDefault(); // Stop form submission
}
});
</script>
Explanation:
Before letting the user submit the contact form, this script makes sure that every field is filled out. It notifies the user and stops submission if any field is empty.
Live Example
See the Pen
Untitled by Meena Subash (@Meena-Subash-the-sasster)
on CodePen.
Hosting The Website
After writing the HTML, CSS, and JavaScript, you can host the website using any web hosting service or on services like Netlify or GitHub Pages.