Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Full-Stack Web Development HTML CSS React Nextjs مشاريع ضخمة
Rating: 5.0 out of 5(1 rating)
29 students

Full-Stack Web Development HTML CSS React Nextjs مشاريع ضخمة

Learn to build modern web apps using HTML, CSS, JavaScript, React, Next.js, and User Authentication دورة كاملة للمبتدئين
Created byVala Alhurani
Last updated 11/2025
English

What you'll learn

  • Build responsive websites using HTML, CSS, and JavaScript from scratch.
  • دورات شاملة في تعلم HTML CSS React Next.js
  • Design modern UI/UX with Tailwind CSS and integrate real-time features using Firebase and Strapi
  • Create Database and integrate it with React Using Strapi and Firebase
  • تعلم React و Next.js للمبتدئين من الصفر
  • User Authentication and sign in with Email , Username , Facebook or Google using Kinde, next auth

Course content

2 sections37 lectures22h 36m total length
  • Introduction10:08

    هي هذه الكورسات سوف تتعلمون React و Next.js من الصفر من خلال مشاريع ضخمة أنشأتها لكم بأبسط الأكواد مع شرح مفصل كي تصبحوا Full Stack Developers محترفين
    مع تعلم ربط هذه المشاريع بقاعدة البيانات وانشاء نظام متكامل في تسجيل الدخول والخروج

  • React.js & Next.js Full Course: Create an Appointment App & User Authentication2:34:56

    "دورة كاملة: بناء تطبيق حجز مواعيد باستخدام React.js، Next.js، وStrapi مع تسجيل الدخول باستخدام Kinde"​


  • تصميم موقع احترافي React.js Next.js Tailwind Strapi Full Course E-Commerce App3:09:08

    دورة كاملة عن كيفية تعلم تصميم موقع تجاري  مع امكانية اضافة المنتجات وربطها بقاعدة البيانات وانشاء Orders وتسجيل الدخول والخروج وعرض الملف الشخصي والإضافة إلى السلة والحذف باستخدام Next.js Strapi Tailwaind Strapi

  • React and Next.js Sport App with Firebase & Tailwind CSS | Full Course in Arabic1:35:16

    سوف تتعلم في هذا الموقع كيفية اضافة بوست للبحث عن شريك رياضي من خلال  إرسال بيانات الفورم إلى قاعدة بيانات Firebase وتعلم كيفية التعامل معها بأبسط الطرق... بالإضافة إلى مكتبة جاهزة لتأمين تسجيل الدخول والخروج عن طريق غوغل بكبسة زر باستخدام Next Auth

  • ? "Master Google Maps Integration with React & Next.js | تطبيق خرائط جوجل1:19:30

    سوف تتعلم في هذا الموقع كيف تبني خريطة غوغل من خلال مكتبة react-google-maps-api
    والتعرف على الأماكن المحيطة بك وتجنب استهلاك الكثير من المال أثناء التعامل مع Google Maps API
    بالإضافة إلى التعرف على موقعك الحالي لتحديد الأماكن المحيطة بك

  • Online Meeting App React Next.js Tailwind CSS Firebase Kinde القسم الأول55:09

    سوف تتعلم في هذا الكورس كيفية بناء جدول مواعيد أون لاين وتنسيقها مع الطرف الآخر من خلال اختيار المواعيد التي تحددها أنت وإرسالها كرابط ليختار المواعيد المتاحة بالإضافة إلى عرض جميع المواعيد وكيفية اختيار التاريخ والوقت وانشاء موعد

  • Online Meeting App React Next.js Tailwind CSS Firebase Kinde القسم الثاني32:54

    سوف تتعلم في هذا الكورس كيفية بناء جدول مواعيد أون لاين وتنسيقها مع الطرف الآخر من خلال اختيار المواعيد التي تحددها أنت وإرسالها كرابط ليختار المواعيد المتاحة بالإضافة إلى عرض جميع المواعيد وكيفية اختيار التاريخ والوقت وانشاء موعد

  • Online Meeting App React Next.js Tailwind CSS Firebase Kinde القسم الثالث39:06
  • Online Meeting App React Next.js Tailwind CSS Firebase Kinde القسم الرابع34:36

    سوف تتعلم في هذا الكورس كيفية بناء جدول مواعيد أون لاين وتنسيقها مع الطرف الآخر من خلال اختيار المواعيد التي تحددها أنت وإرسالها كرابط ليختار المواعيد المتاحة بالإضافة إلى عرض جميع المواعيد وكيفية اختيار التاريخ والوقت وانشاء موعد

  • Online Meeting App React Next.js Tailwind CSS Firebase Kinde القسم الخامس38:29

    سوف تتعلم في هذا الكورس كيفية بناء جدول مواعيد أون لاين وتنسيقها مع الطرف الآخر من خلال اختيار المواعيد التي تحددها أنت وإرسالها كرابط ليختار المواعيد المتاحة بالإضافة إلى عرض جميع المواعيد وكيفية اختيار التاريخ والوقت وانشاء موعد

  • Build AI Education Platform منصة تعليمية بالذكاء الاصطناعي القسم 131:00

    في هذا الدرس، سنقوم ببناء منصة تعليمية حديثة مدعومة بالذكاء الاصطناعي باستخدام Gemini، React، Next.js، وClerk. سنتعلم خطوة بخطوة كيف:

    • ننشئ محتوى كورسات تلقائيًا باستخدام Gemini AI

    • نضيف تسجيل دخول وتسجيل حساب جديد باستخدام Clerk

    • نبني واجهة حديثة بتقنيات React وNext.js


  • Build AI Education Platform منصة تعليمية بالذكاء الاصطناعي القسم 230:00

    في هذا الدرس، سنقوم ببناء منصة تعليمية حديثة مدعومة بالذكاء الاصطناعي باستخدام Gemini، React، Next.js، وClerk. سنتعلم خطوة بخطوة كيف:

    • ننشئ محتوى كورسات تلقائيًا باستخدام Gemini AI

    • نضيف تسجيل دخول وتسجيل حساب جديد باستخدام Clerk

    • نبني واجهة حديثة بتقنيات React وNext.js


  • Build AI Education Platform منصة تعليمية بالذكاء الاصطناعي القسم 322:45

    في هذا الدرس، سنقوم ببناء منصة تعليمية حديثة مدعومة بالذكاء الاصطناعي باستخدام Gemini، React، Next.js، وClerk. سنتعلم خطوة بخطوة كيف:

    • ننشئ محتوى كورسات تلقائيًا باستخدام Gemini AI

    • نضيف تسجيل دخول وتسجيل حساب جديد باستخدام Clerk

    • نبني واجهة حديثة بتقنيات React وNext.js


  • Build AI Education Platform منصة تعليمية بالذكاء الاصطناعي القسم 430:13

    في هذا الدرس، سنقوم ببناء منصة تعليمية حديثة مدعومة بالذكاء الاصطناعي باستخدام Gemini، React، Next.js، وClerk. سنتعلم خطوة بخطوة كيف:

    • ننشئ محتوى كورسات تلقائيًا باستخدام Gemini AI

    • نضيف تسجيل دخول وتسجيل حساب جديد باستخدام Clerk

    • نبني واجهة حديثة بتقنيات React وNext.js


  • Build AI Education Platform منصة تعليمية بالذكاء الاصطناعي القسم 524:55

    في هذا الدرس، سنقوم ببناء منصة تعليمية حديثة مدعومة بالذكاء الاصطناعي باستخدام Gemini، React، Next.js، وClerk. سنتعلم خطوة بخطوة كيف:

    • ننشئ محتوى كورسات تلقائيًا باستخدام Gemini AI

    • نضيف تسجيل دخول وتسجيل حساب جديد باستخدام Clerk

    • نبني واجهة حديثة بتقنيات React وNext.js


  • Build AI Education Platform منصة تعليمية بالذكاء الاصطناعي القسم 630:31

    في هذا الدرس، سنقوم ببناء منصة تعليمية حديثة مدعومة بالذكاء الاصطناعي باستخدام Gemini، React، Next.js، وClerk. سنتعلم خطوة بخطوة كيف:

    • ننشئ محتوى كورسات تلقائيًا باستخدام Gemini AI

    • نضيف تسجيل دخول وتسجيل حساب جديد باستخدام Clerk

    • نبني واجهة حديثة بتقنيات React وNext.js


  • Build AI Education Platform منصة تعليمية بالذكاء الاصطناعي القسم 725:28

    في هذا الدرس، سنقوم ببناء منصة تعليمية حديثة مدعومة بالذكاء الاصطناعي باستخدام Gemini، React، Next.js، وClerk. سنتعلم خطوة بخطوة كيف:

    • ننشئ محتوى كورسات تلقائيًا باستخدام Gemini AI

    • نضيف تسجيل دخول وتسجيل حساب جديد باستخدام Clerk

    • نبني واجهة حديثة بتقنيات React وNext.js


  • Full Smart App With Next.js and Gemini Generate Stories Content With AI مقدمة0:35

    سوف تتعلمون في هذا الدرس كيفية توليد محتوى باستخدام الذكاء الاصطناعي مع next.js محتوى قصص أطفال وكيفية اعطاء الأوامر ل Gemini للتفاعل مع موقعك وتوليد محتوى بكبسة زر من خلال فورم .. بالإضافة إلى لوحة تحكم كاملة تشمل جميع القصص المولدة بالإضافة لتفعيل تسجيل الدخول والخروج عن طريق Clerk

  • Full Smart App With Next.js and Gemini Generate Stories Content With AI 1 القسم30:26

    سوف تتعلمون في هذا الدرس كيفية توليد محتوى باستخدام الذكاء الاصطناعي مع next.js محتوى قصص أطفال وكيفية اعطاء الأوامر ل Gemini للتفاعل مع موقعك وتوليد محتوى بكبسة زر من خلال فورم .. بالإضافة إلى لوحة تحكم كاملة تشمل جميع القصص المولدة بالإضافة لتفعيل تسجيل الدخول والخروج عن طريق Clerk

  • Full Smart App With Next.js and Gemini Generate Stories Content With AI 2 القسم32:27

    سوف تتعلمون في هذا الدرس كيفية توليد محتوى باستخدام الذكاء الاصطناعي مع next.js محتوى قصص أطفال وكيفية اعطاء الأوامر ل Gemini للتفاعل مع موقعك وتوليد محتوى بكبسة زر من خلال فورم .. بالإضافة إلى لوحة تحكم كاملة تشمل جميع القصص المولدة بالإضافة لتفعيل تسجيل الدخول والخروج عن طريق Clerk

  • Full Smart App With Next.js and Gemini Generate Stories Content With AI 3 القسم34:28

    سوف تتعلمون في هذا الدرس كيفية توليد محتوى باستخدام الذكاء الاصطناعي مع next.js محتوى قصص أطفال وكيفية اعطاء الأوامر ل Gemini للتفاعل مع موقعك وتوليد محتوى بكبسة زر من خلال فورم .. بالإضافة إلى لوحة تحكم كاملة تشمل جميع القصص المولدة بالإضافة لتفعيل تسجيل الدخول والخروج عن طريق Clerk

  • Full Smart App With Next.js and Gemini Generate Stories Content With AI 4 القسم18:59

    سوف تتعلمون في هذا الدرس كيفية توليد محتوى باستخدام الذكاء الاصطناعي مع next.js محتوى قصص أطفال وكيفية اعطاء الأوامر ل Gemini للتفاعل مع موقعك وتوليد محتوى بكبسة زر من خلال فورم .. بالإضافة إلى لوحة تحكم كاملة تشمل جميع القصص المولدة بالإضافة لتفعيل تسجيل الدخول والخروج عن طريق Clerk

  • Full Smart App With Next.js and Gemini Generate Stories Content With AI 5 القسم7:04

    سوف تتعلمون في هذا الدرس كيفية توليد محتوى باستخدام الذكاء الاصطناعي مع next.js محتوى قصص أطفال وكيفية اعطاء الأوامر ل Gemini للتفاعل مع موقعك وتوليد محتوى بكبسة زر من خلال فورم .. بالإضافة إلى لوحة تحكم كاملة تشمل جميع القصص المولدة بالإضافة لتفعيل تسجيل الدخول والخروج عن طريق Clerk

  • Ticket Booking Website with Next.js & TypeScript | Full Tutorial مقدمة3:51

    في هذا الدرس سنتعلّم معًا كيفية إنشاء موقع احترافي لحجز التذاكر باستخدام Next.js و TypeScript. سنبدأ من إعداد المشروع، ثم تصميم الواجهة وتجهيز المكوّنات، وصولًا إلى ربط البيانات وتنفيذ نظام الحجز بشكل عملي. هذا الشرح مناسب للمبتدئين والمتوسطين الذين يرغبون في تطوير مهاراتهم وبناء مشاريع قوية باستخدام أحدث التقنيات.

  • Ticket Booking Website with Next.js & TypeScript | Full Tutorial القسم الأول26:25

    في هذا الدرس سنتعلّم معًا كيفية إنشاء موقع احترافي لحجز التذاكر باستخدام Next.js و TypeScript. سنبدأ من إعداد المشروع، ثم تصميم الواجهة وتجهيز المكوّنات، وصولًا إلى ربط البيانات وتنفيذ نظام الحجز بشكل عملي. هذا الشرح مناسب للمبتدئين والمتوسطين الذين يرغبون في تطوير مهاراتهم وبناء مشاريع قوية باستخدام أحدث التقنيات.

  • Ticket Booking Website with Next.js & TypeScript | Full Tutorial القسم الثاني29:19

    في هذا الدرس سنتعلّم معًا كيفية إنشاء موقع احترافي لحجز التذاكر باستخدام Next.js و TypeScript. سنبدأ من إعداد المشروع، ثم تصميم الواجهة وتجهيز المكوّنات، وصولًا إلى ربط البيانات وتنفيذ نظام الحجز بشكل عملي. هذا الشرح مناسب للمبتدئين والمتوسطين الذين يرغبون في تطوير مهاراتهم وبناء مشاريع قوية باستخدام أحدث التقنيات.

  • Ticket Booking Website with Next.js & TypeScript | Full Tutorial القسم الثالث27:16

    في هذا الدرس سنتعلّم معًا كيفية إنشاء موقع احترافي لحجز التذاكر باستخدام Next.js و TypeScript. سنبدأ من إعداد المشروع، ثم تصميم الواجهة وتجهيز المكوّنات، وصولًا إلى ربط البيانات وتنفيذ نظام الحجز بشكل عملي. هذا الشرح مناسب للمبتدئين والمتوسطين الذين يرغبون في تطوير مهاراتهم وبناء مشاريع قوية باستخدام أحدث التقنيات.

  • Ticket Booking Website with Next.js & TypeScript | Full Tutorial القسم الرابع26:12

    في هذا الدرس سنتعلّم معًا كيفية إنشاء موقع احترافي لحجز التذاكر باستخدام Next.js و TypeScript. سنبدأ من إعداد المشروع، ثم تصميم الواجهة وتجهيز المكوّنات، وصولًا إلى ربط البيانات وتنفيذ نظام الحجز بشكل عملي. هذا الشرح مناسب للمبتدئين والمتوسطين الذين يرغبون في تطوير مهاراتهم وبناء مشاريع قوية باستخدام أحدث التقنيات.

  • Ticket Booking Website with Next.js & TypeScript | Full Tutorial القسم الخامس24:14
  • Ticket Booking Website with Next.js & TypeScript | Full Tutorial القسم السادس15:42
  • Ticket Booking Website with Next.js & TypeScript | Full Tutorial القسم السابع16:19

Requirements

  • No prior programming experience is required. This course will guide you step by step, from basic web design using HTML and CSS to building full-stack applications using Node.js, React, and more.

Description

This course is a complete and practical guide to becoming a full-stack web developer. You will learn how to build modern frontend interfaces using HTML, CSS, Tailwind, JavaScript, React, and Next.js, as well as create secure and scalable backend systems. We'll explore user authentication, routing, and how to integrate external services like Strapi to manage dynamic content.

From beginner concepts to advanced techniques, this course focuses on real-world development workflows and best practices. Whether you're just starting out or already have some experience, you'll benefit from structured lessons, hands-on projects, and clear explanations.

By the end of this course, you will have the skills to build and deploy fully functional web applications — and the confidence to work on your own freelance or startup projects. You’ll also build multiple huge projects that simulate real client work, giving you a strong portfolio to showcase to employers or clients.
هذه الدورة دليل شامل وعملي لتصبح مطوّر ويب متكامل (Full-Stack). ستتعلّم كيفية بناء واجهات مستخدم تفاعلية باستخدام HTML وCSS وJavaScript وReact وNext.js وTailwind، بالإضافة إلى تطوير أنظمة خلفية قوية. سنتناول مواضيع مثل تسجيل الدخول، حماية المستخدمين، وإدارة المحتوى باستخدام Strapi.

سواء كنت مبتدئًا أو ترغب في تطوير مهاراتك، ستساعدك هذه الدورة من خلال مشاريع ضخمة وتطبيقات حقيقية تُحاكي سوق العمل.
بنهاية الدورة، ستكون قادرًا على تصميم وتطوير ونشر تطبيقات ويب كاملة، ولديك المهارات التي تؤهّلك للعمل كمستقل أو كجزء من فريق تطوير.

Who this course is for:

  • Beginners aiming to become full-stack web developers, as well as intermediate learners looking to master modern web technologies like React, Next.js, Strapi and Firebase.