सीधे कंटेंट पर जाएँ

क्लास प्रोग्रेस डैशबोर्ड बनाएं

शुरुआती~13 मिनट0/4 चरण

छात्र प्रगति ट्रैकर

एक नज़र में यह जानना कि हर छात्र कहाँ खड़ा है — यह एक शिक्षक के पास होने वाली सबसे शक्तिशाली चीज़ों में से एक है। एक साफ़-सुथरा प्रोग्रेस डैशबोर्ड नंबरों की स्प्रेडशीट को कुछ ऐसा बना देता है जिसे आप सेकंडों में पढ़ सकते हैं। इस लेसन में आप AI की मदद से हर कदम पर एक ऐसा डैशबोर्ड बनाएंगे।

आप एक ऐसी टेबल बनाएंगे जो छात्रों की सूची दिखाए, हर एक की प्रगति को एक विज़ुअल बार से दर्शाए, और उनका स्टेटस लेबल करे — ताकि आप तुरंत देख सकें कि कौन आगे है और किसे मदद चाहिए। यह वैसा टूल है जिसे आप किसी भी क्लास, किसी भी विषय के लिए अपना सकते हैं।

स्टेप्स फॉलो करें, लाइव प्रीव्यू देखें, और आपके पास एक ऐसा डैशबोर्ड होगा जिसे आप सोमवार की सुबह से ही इस्तेमाल कर सकते हैं।

निर्देश

1

'Class Progress' टेक्स्ट के साथ एक डैशबोर्ड हेडिंग जोड़ें, जो एक rounded-xl कार्ड कंटेनर के अंदर हो।

संकेत: एक `<h1>Class Progress</h1>` को `<div class="... rounded-xl ...">` के अंदर रखें।

इसे कहाँ लिखें?

<!-- Build your class progress dashboard here -->

इसे लाइन 11 पर लिखें — उस टिप्पणी के नीचे, पहले जोड़े गए कोड के बाद।

2

Student, Progress, और Status के लिए हेडर कॉलम वाली एक टेबल बनाएं।

3

हर छात्र की रो में एक प्रोग्रेस बार जोड़ें जिसमें एक हरे रंग का fill div हो, जिसकी चौड़ाई उनकी प्रगति को दर्शाए।

4

हर रो में एक span का उपयोग करके स्टेटस बैज जोड़ें। कम से कम एक में 'On Track' लिखा होना चाहिए।

आपका कोड

html
13 लाइनें
1
2
3
4
5
6
7
8
9
10
11
12
13

Live Preview

Live Preview