Translated by لقد أعربت عن تقديري للتطبيقات في العالم الحقيقي التي تم عرضها.كان من الممكن استخدام المزيد من فرص الممارسة.
Modern Dashboard Design with Shadcn UI and Next.js
Learn to build responsive, accessible, and highly customizable web dashboards using Shadcn UI, Next.js, Tailwind CSS, and robust client-side validation.
-
💬
مدرب ذكاء اصطناعي
اسأل عن أي درس واحصل على إجابة واضحة فورًا، في أي وقت. -
🕐
ابدأ في أي وقت
بلا جداول أو مواعيد نهائية — تعلّم بوتيرتك، وقتما يناسبك. -
🌐
بالعربية
الدروس والمهام والشهادة — كل ذلك بلغتك بالكامل.
حول هذه الدورة
Building beautiful, accessible, and responsive user interfaces shouldn't require starting from scratch or fighting rigid component libraries. Modern web development favors highly customizable components that you fully own and can easily adapt to any design system.
This text-based course guides you through building professional-grade frontend dashboards using Shadcn UI, Tailwind CSS, and Next.js. You will learn how to structure complex layouts, manage client-side state, handle user input securely, and present data clearly without the overhead of backend configuration.
What you'll learn:
- Understand the architectural philosophy of Shadcn UI and how it differs from traditional component libraries.
- Configure responsive dashboard layouts using Tailwind CSS utility classes and modern CSS Grid techniques.
- Build interactive forms using React Hook Form and implement robust client-side validation with Zod.
- Customize and extend Shadcn UI components to match unique brand requirements and design systems.
- Integrate interactive data visualizations and responsive charts to display key metrics.
- Apply accessibility best practices and light/dark mode toggles using underlying Radix UI primitives.
The curriculum begins with foundational concepts, covering the setup of a modern Next.js environment and the installation of Shadcn UI. You will then progress step-by-step through layout creation, component customization, form handling, and data visualization using clean, production-ready code snippets.
This course is designed for frontend developers, React enthusiasts, and web designers who possess a basic understanding of JavaScript and React. No backend or database experience is required.
Start reading today to elevate your frontend engineering skills and design stunning dashboards from scratch.
ما الذي ستحصل عليه
-
📜
شهادة إتمام
أضفها إلى ملفك على LinkedIn -
💬
مدرّس AI شخصي
عالق في دورة؟ اسأل مدرّسك المدمج أي شيء، في أي وقت. -
🎧
النسخة الصوتية مضمَّنة
تعلَّم أثناء تنقُّلك — دون شاشة -
♾️
وصول مدى الحياة
عُد متى شئت، بلا انتهاء -
📱
الهاتف أو الكمبيوتر
يعمل في أي مكان وعلى أي جهاز -
💸
استرداد خلال 14 يومًا
دون أسئلة -
⚡
قصير ومركَّز
2 ساعة 36 دقيقة من المحتوى التطبيقي
المراجعات (1)
المتعلمون أخذوا أيضًا
🔥 مطلوب
🎓 بشهادة
React و Redux: بناء تطبيقات شبكية موجهة نحو الدولة
شهادة
تطبيق عملي
Br 140
→
🔥 رائج
🎓 بشهادة
تطوير الويب باستخدام JavaScript للمكدس الكامل مع MERN
شهادة
تطبيق عملي
Br 140
→
🔥 رائج
🎓 بشهادة
تطوير Next.js للمكدس الكامل: بناء تطبيق SaaS
شهادة
تطبيق عملي
Br 140
→
⚡ الأفضل للبداية
🎓 بشهادة
تطوير مواقع شبكية كاملة باستخدام برنامجي React و Go
شهادة
تطبيق عملي
Br 140
→
الأسئلة الشائعة
ما الذي أحتاجه لأخذ هذه الدورة؟ +
يكفي هاتف أو كمبيوتر متصل بالإنترنت. بدون تثبيتات أو أجهزة خاصة.
كيف يمكنني الدفع؟ +
بالبطاقة عبر Stripe. لا نخزن بيانات البطاقة — يتولى Stripe ذلك بأمان.
هل يمكنني استرداد المال؟ +
نعم — استرداد كامل خلال 14 يومًا، دون أسئلة.
إلى متى يستمر وصولي؟ +
إلى الأبد. بمجرد الشراء، الدورة لك تعود إليها متى شئت.
هل سأحصل على شهادة؟ +
نعم. عند الإتمام ستحصل على شهادة يمكنك إضافتها إلى ملفك في LinkedIn.
مصمَّم للعاملين في
التقنية
التصميم
المالية
التسويق
الرعاية الصحية
التعليم
الضيافة
التصنيع
×2
اشحن مرة واحدة وادفع النصف
أضف Br 280 واحصل على 200 رصيد، بحيث تكلف كل دورة حوالي Br 35,00. لا تنتهي صلاحية الأرصدة أبداً.
Br 280
200 رصيد
Br 35,00 / دورة
أفضل قيمة
Br 700
550 رصيد
Br 31,82 / دورة
Br 1.400
1200 رصيد
Br 29,17 / دورة
بدون اشتراك. الرصيد يصلح لأي دورة ولا ينتهي.