Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is an educational web app designed to teach students the basics of web development, focusing on HTML, CSS, JavaScript, and Python. The app will provide interactive lessons, hands-on projects, and a clear roadmap for learners to follow, ensuring a structured and engaging learning experience.

## CORE FEATURES
1. **Lesson Plans**: Detailed lesson plans covering basics of Git/GitHub, frontend and backend development, and hands-on projects.
2. **Interactive Coding Workspace**: A split-screen layout with a code editor on the left and a live output display on the right, allowing students to see the results of their code in real-time.
3. **Roadmap Navigation**: A clear roadmap outlining the topics covered in each session, helping students track their progress and upcoming lessons.
4. **Dynamic HTML Elements**: Explanation and demonstration of HTML elements and tags, including a visualization of the HTML page structure.
5. **Engaging Visual Design**: Colorful, friendly design with animations, transitions, and hover effects to enhance user engagement without being overly childish.
6. **Responsive Design**: Mobile-friendly layout that adjusts seamlessly across devices to ensure accessibility for all students.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design emphasizing clean lines, ample white space, and a focus on typography. The interface should feel modern and approachable.
- **Color Mode**: Light theme featuring a minimal color palette with dark text on light backgrounds to enhance readability.
- **Layout**: The main layout consists of a vertical navigation panel on the left for lesson selection, with a large content area for the workspace and output. The workspace should be pre-filled with basic HTML structure to facilitate immediate interaction.
- **Typography**: Use a sans-serif font for body text (e.g., Open Sans or Roboto) with clear hierarchies for headings (e.g., larger, bold fonts) and body text to ensure a friendly yet professional appearance.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust component management and type safety.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design changes and responsiveness.
- **UI Components**: Utilize shadcn/ui for pre-built, accessible components that fit the overall design aesthetic.
- **State Management**: Use React's built-in state management for handling workspace changes and live output updates.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React app with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout Structure**:
   - Implement a left navigation panel for lesson selection.
   - Design the main content area to include two grids: one for the HTML workspace and one for the live output.
3. **Develop Interactive Workspace**:
   - Pre-fill the workspace with a basic HTML structure.
   - Implement live output functionality that updates as users modify the HTML in the workspace.
4. **Roadmap Section**: Add a roadmap section that visually outlines the topics for each day with a brief description of what will be covered.
5. **Content Creation**: Write and format lesson content for HTML, CSS, JavaScript, and Python introduction, ensuring clear explanations and examples.
6. **Add Animations and Effects**: Incorporate CSS animations and hover effects to enhance user experience and engagement.

## USER EXPERIENCE
Students will interact with the application through a step-by-step learning process. They can select a lesson from the navigation panel, view detailed explanations and examples, and then practice coding in the interactive workspace. As they make changes in the HTML editor, the output area will update in real-time, allowing for immediate feedback. The roadmap will guide them through the learning journey, ensuring they are aware of what to expect in upcoming sessions. 

This design aims to create a supportive and engaging environment for students aged around 15, balancing educational content with a friendly and approachable interface.