Word Auto-Table Tutorial An interactive web-based tutorial for learning how to create automatic tables of contents, figures, and lists in Microsoft Word. Built with pure HTML and CSS as a project for the Computer Workshop course.
✨ Features Step-by-Step Guide: Clear, 5-step instructions for creating automatic lists in Word.
Modern & Responsive Design: Fully responsive layout that works seamlessly on mobile, tablet, and desktop.
Interactive UI: Features hover effects on tutorial cards, icons, and images for an engaging experience.
Static & Fast: Built with vanilla HTML and CSS for quick loading and simplicity.
📁 Project Structure text word-tutorial-project/ ├── index.html # Main HTML file ├── style.css # Main stylesheet ├── css/ │ └── fonts.css # Rules for Vazir (Persian) font ├── images/ # Educational images and graphics ├── fonts/ # Vazir font files └── README.md # This documentation file 🛠️ Built With HTML5: For semantic structure and content.
CSS3: For styling, subtle animations, and responsive design.
Font Awesome: For contact and social media icons.
Vazir Font: For beautiful and legible Persian typography.
🔍 How to Use This Tutorial Read through the introduction to understand the importance of auto-generated lists.
Follow the five tutorial cards in sequence. Each card explains a key step in the Word process.
Pay attention to the important tips and warnings provided.
Use the sample document, table, and image provided to practice the steps in Microsoft Word.
🧑💻 Development & Future Ideas Add Dark Mode: Implement a dark theme using CSS Custom Properties.
Enhance Interactivity: Include short video demos or CSS animations for each step.
Build a Practice Section: Integrate a simple web-based editor for users to try the steps directly.
👤 Author Neo
GitHub: @neo-0706
Student ID: 220704068