|
1 | | -# ai-se-w01-introduction |
2 | | -This repository holds the practical work for **Week 01** of the specialization module **"AI for Software Engineering"**, part of the **Software Development** course. |
| 1 | +# Mini e-Learning Prototype |
| 2 | + |
| 3 | +[](LICENSE) |
| 4 | + |
| 5 | +This repository contains the practical assignment for **Week 1** of the specialization module **"AI for Software Engineering"**, focusing on the introduction to AI and AI-assisted coding. |
| 6 | + |
| 7 | +--- |
| 8 | + |
| 9 | +### 🎯 Project Objective |
| 10 | + |
| 11 | +The goal of this assignment was to apply the **VibeCoding** methodology to quickly build a functional front-end prototype of a mini e-learning platform (HTML, CSS, JavaScript). The development process was guided by natural language prompts to rapidly generate the core structure and logic. |
| 12 | + |
| 13 | +### ✨ Implemented Features |
| 14 | + |
| 15 | +This is a small Single Page Application (SPA) prototype demonstrating a minimal e-learning UI with the following features: |
| 16 | + |
| 17 | +* **Course Listing:** Home page displaying a list of available courses. |
| 18 | +* **Course Details:** Separate view showing course descriptions, lessons, and progress upon clicking a course. |
| 19 | +* **Progress Tracking:** Ability to mark individual lessons as completed. |
| 20 | +* **Course Completion:** Button to "Mark course completed," which automatically updates all lesson statuses. |
| 21 | +* **Persistence:** Progress status is saved and loaded using the browser's `localStorage`. |
| 22 | +* **Design:** Simple, clean visual design using plain CSS (no frameworks), including hover effects on interactive elements. |
| 23 | + |
| 24 | +### ⚙️ How to Use |
| 25 | + |
| 26 | +1. Save `index.html`, `styles.css`, and `app.js` into a single folder. |
| 27 | +2. Open **`index.html`** in your web browser. |
| 28 | +3. Click a course to view lessons, check lessons as completed, or mark the full course as completed. |
| 29 | +4. Progress is saved in your browser's `localStorage`. |
| 30 | + |
| 31 | +The course data is defined within the JavaScript file in the `coursesSeed` array and can be easily adapted to add or remove content. |
| 32 | + |
| 33 | +--- |
| 34 | + |
| 35 | +### 📜 License |
| 36 | + |
| 37 | +This project is licensed under the **MIT License**. |
0 commit comments