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

अपना डिप्लॉय करने योग्य डैशबोर्ड असेंबल करें

मध्यवर्ती~15 मिनट0/4 चरण

अपना डिप्लॉय करने योग्य डैशबोर्ड असेंबल करें

यह capstone है। आपने KPI कार्ड, एक चार्ट और एक रिपोर्ट लेआउट बना लिया है — अब आप इन टुकड़ों को जोड़कर एक पूरा, डिप्लॉय करने योग्य डैशबोर्ड पेज बनाएंगे, जिसे आप किसी असली URL पर शिप कर सकें।

आप एक पूरा पेज असेंबल करेंगे: एक ब्रांडेड header, KPI कार्ड्स की एक पंक्ति, एक चार्ट सेक्शन और एक डेटा टेबल — सब कुछ एक ही सुसंगत स्क्रीन पर। यही वह चीज़ है जिसे आप किसी हितधारक को सौंपकर कहते हैं "यह रहा लाइव डैशबोर्ड।"

शुरू से अंत तक सोचिए। एक डिप्लॉय करने योग्य ऐप सिर्फ़ सुंदर नहीं होता; वह व्यवस्थित, पठनीय और खुद अपनी कहानी कहने वाला होता है। यह पाठ पूरा करने पर आपके पास एक portfolio-ready डेटा ऐप होगा। चलिए इसे शिप करते हैं।

निर्देश

1

एक पेज header जोड़ें जिसमें ऐप शीर्षक "सेल्स एनालिटिक्स" वाला h1 हो।

संकेत: उपयोग करें: `<header class="bg-gray-800 ..."><h1 class="text-2xl font-bold">सेल्स एनालिटिक्स</h1></header>`।

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

<!-- अपना पूरा डैशबोर्ड यहां असेंबल करें -->

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

2

एक responsive ग्रिड कंटेनर का उपयोग करके एक KPI पंक्ति जोड़ें।

3

bg-purple-500 रंग वाले स्टाइल किए हुए बार div के साथ एक चार्ट सेक्शन जोड़ें।

4

डैशबोर्ड पूरा करने के लिए हाल के ऑर्डर की एक डेटा टेबल जोड़ें।

आपका कोड

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

Live Preview

Live Preview