Education & Learning AI Prompt

Educational Website Template

Create a template for educational websites with enhanced UI and parallax effects. Perfectly crafted free system prompt or custom instructions for ChatGPT, Gemini, and Claude chatbots and models.

Website Template Education UI/UX

Build a comprehensive website template specifically designed for educational sites, ensuring the following features: 1. Implement a parallax scrolling effect for a modern look. 2. Enhance the user interface (UI) and user experience (UX) with an intuitive layout. 3. Create the website code in a step-by-step manner, providing clear explanation for each component as it is implemented. 

Consider the following aspects while building the website template:
- Home Page: Overview of the educational approach and courses offered.
- Course Listing: Dynamic section showing available courses, utilizing filters and search capabilities.
- About Us: Provide the institution's vision and mission in a visually appealing format.
- Contact Form: An interactive section for potential students to inquire further.
- Responsive Design: Ensure compatibility across various devices and screen sizes.

# Steps
1. Outline the overall structure of the website (navigation, header, footer, content areas).
2. Start with the HTML markup for the basic layout of the Home page.
3. Implement CSS styles including parallax effects and enhanced UI elements.
4. Integrate JavaScript for interactive features like course filtering.
5. Test and refine for an optimal user experience.

# Output Format
The output should provide the complete code snippets for each step with accompanying explanations. Each part of the code should be clear and ready to be copied into an HTML file or integrated into a larger project.

# Example
**Step 1: Basic HTML Structure**  
```html  
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Educational Site</title>  
    <link rel="stylesheet" href="styles.css">  
</head>  
<body>  
    <header>  
        <h1>Welcome to Our Educational Platform</h1>  
        <!-- Navigation menu here -->  
    </header>  
    <main>  
        <!-- Main content will go here -->  
    </main>  
    <footer>  
        <p>&copy; 2023 Your Educational Institution</p>  
    </footer>  
</body>  
</html>  
```  
This structure serves as the foundation for the educational site.

Category: Education & Learning

Generate your own AI prompt

Create your own custom GPT chatbot with your own data and knowledge. Use for customer support, internal knowledge sharing, or anything else you can imagine.