דילוג לתוכן

הרכבת דשבורד מוכן לפריסה

בינוני~15 דק׳0/4 שלבים

הרכבת דשבורד מוכן לפריסה

זהו פרויקט הסיכום. בניתם כרטיסי KPI, תרשים ופריסת דוח — עכשיו תחברו את החלקים לעמוד דשבורד אחד, שלם ומוכן לפריסה, שאפשר לשגר לכתובת URL אמיתית.

תרכיבו עמוד מלא: header ממותג, שורת כרטיסי KPI, מקטע תרשים וטבלת נתונים — הכול במסך אחד ומגובש. זה התוצר שאתם מגישים לבעל עניין ואומרים: "הנה הדשבורד החי".

חשבו מקצה לקצה. אפליקציה שראויה לפריסה היא לא רק יפה; היא מאורגנת, קריאה ומסבירה את עצמה. כשתסיימו את השיעור הזה, תחזיקו באפליקציית נתונים שמוכנה לתיק העבודות. בואו נשלח אותה לעולם.

הוראות

1

הוסיפו header לעמוד עם כותרת h1 לאפליקציה — "אנליטיקת מכירות".

רמז: השתמשו ב: `<header class="bg-gray-800 ..."><h1 class="text-2xl font-bold">אנליטיקת מכירות</h1></header>`.

איפה כותבים את זה?

<!-- הרכיבו כאן את הדשבורד המלא שלכם -->

כתבו את זה בשורה 11 — מתחת להערה הזאת, אחרי הקוד שכבר הוספתם.

2

הוסיפו שורת KPI באמצעות מכולת grid רספונסיבית.

3

הוסיפו מקטע תרשים באמצעות divs של עמודות מעוצבות בצבע bg-purple-500.

4

הוסיפו טבלת נתונים להזמנות האחרונות כדי להשלים את הדשבורד.

הקוד שלכם

html
13 שורות
1
2
3
4
5
6
7
8
9
10
11
12
13

תצוגה חיה

תצוגה חיה