Web Engineering Lab - HTML, CSS & PHP Tutorial

A modern, interactive Next.js 14 web application designed for university students to learn web development fundamentals.

🎓 Course Content

This tutorial website covers three essential modules:

Module 1: HTML Fundamentals

• HTML basics and structure
• All important HTML tags with examples
• Semantic HTML5 elements
• Forms and tables
• Live code previews

Module 2: CSS Fundamentals

• CSS syntax and selectors
• Colors and styling
• Box model, margin, and padding
• Flexbox layouts
• Responsive design
• Interactive card examples

Module 3: PHP Basics

• PHP syntax and structure
• Variables and data types
• Conditional statements
• Loops (for, while, foreach)
• Functions
• Form handling with complete examples

✨ Features

• 🎨 Modern UI: Beautiful, responsive design with dark/light mode
• 💻 Interactive Code Examples: Syntax-highlighted code blocks with copy functionality
• 🎮 Live HTML Playground: Test HTML code in real-time
• � PHP Playground: Simulate PHP output for learning purposes
• �📱 Fully Responsive: Works perfectly on all devices
• 🌙 Dark Mode: Easy on the eyes for late-night studying
• 🎭 Smooth Animations: Framer Motion powered transitions
• 📚 Collapsible Modules: Accordion-style course organization

🚀 Getting Started

Prerequisites

• Node.js 18.x or higher
• npm or yarn package manager

Installation

1. Clone or navigate to the project directory:

cd web_engi

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open your browser and visit:

http://localhost:3000

📁 Project Structure

web_engi/
├── app/
│   ├── globals.css          # Global styles
│   ├── layout.tsx           # Root layout with navbar and footer
│   ├── page.tsx             # Home page
│   └── course-outline/
│       └── page.tsx         # Course outline page with all modules
├── components/
│   ├── Navbar.tsx           # Navigation component
│   ├── Footer.tsx           # Footer component
│   ├── ThemeProvider.tsx    # Dark/light theme provider
│   ├── CodeBlock.tsx        # Syntax-highlighted code display
│   ├── PreviewBox.tsx       # Live preview container
│   ├── ModuleCard.tsx       # Collapsible module component
│   ├── HTMLPlayground.tsx   # Interactive HTML editor
│   └── PHPPlayground.tsx    # Interactive PHP simulator
├── public/                  # Static assets
├── package.json            # Dependencies and scripts
├── tailwind.config.ts      # Tailwind CSS configuration
├── tsconfig.json          # TypeScript configuration
└── next.config.mjs        # Next.js configuration

🛠️ Built With

• Next.js 14 - React framework with App Router
• React 18 - UI library
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library
• Lucide React - Beautiful icons
• React Syntax Highlighter - Code syntax highlighting

📖 Usage

Navigation

• Home Page: Overview, features, and call-to-action
• Course Outline: Complete curriculum with all three modules

Interactive Features

1. Theme Toggle: Switch between light and dark mode using the sun/moon icon
2. Collapsible Modules: Click module headers to expand/collapse content
3. Code Copy: Click the copy icon on code blocks to copy code
4. HTML Playground: Write HTML and click "Run Code" to see live preview
5. PHP Playground: Write PHP code and click "Run PHP" to see simulated output (client-side simulation)
6. Responsive Menu: Mobile-friendly hamburger menu

🎨 Customization

Colors

Edit tailwind.config.ts to change the primary color scheme:

colors: {
  primary: {
    500: '#3b82f6',  // Change these values
    600: '#2563eb',
    // ...
  }
}

Content

Edit module content in app/course-outline/page.tsx:

• Add new sections
• Modify code examples
• Update explanations

📝 Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint

🌟 Features Breakdown

Home Page

• Hero section with gradient background
• Feature cards with hover effects
• Course overview with numbered modules
• Learning outcomes checklist
• Instructor stats
• Call-to-action section

Course Outline Page

• Three comprehensive modules
• Syntax-highlighted code examples
• Live preview boxes
• Interactive playground
• Responsive layout
• Easy navigation

Components

• Navbar: Sticky navigation with theme toggle
• Footer: Social links and copyright
• CodeBlock: Syntax highlighting with copy button
• PreviewBox: Styled preview container
• ModuleCard: Animated accordion component
• HTMLPlayground: Live HTML editor with preview
• PHPPlayground: PHP code simulator with example templates

🤝 Contributing

This is an educational project. Feel free to:

• Fork the repository
• Add more examples
• Improve explanations
• Fix bugs
• Enhance UI/UX

📄 License

This project is created for educational purposes.

🙏 Acknowledgments

• Next.js team for the amazing framework
• Tailwind CSS for the utility-first approach
• Vercel for hosting solutions
• Open source community

📧 Contact

For questions or feedback about this tutorial:

• GitHub: [Your GitHub]
• Email: info@webengineeringlab.com

🎯 Learning Objectives

After completing this course, students will be able to:

• ✅ Build complete web pages using HTML5
• ✅ Style websites with CSS3
• ✅ Create responsive layouts with Flexbox
• ✅ Write PHP scripts for server-side logic
• ✅ Handle forms and user input
• ✅ Understand web development best practices

---

Happy Learning! 🚀

Made with ❤️ for students