Code Monkey home page Code Monkey logo

web-hw-2's Introduction

واجب - 2

في هذا الواجب سنقوم بإنشاء موقع لعرض الأفلام والمسلسلات

ملاحظة: في حال لديك فكرة أخرى يمكنك تطبيقها لكن بشرط اتباع مطاليب الواجب

المطلوب الاول: إنشاء الصفحة الرئيسية

الصفحة الرئيسية هي الصفحة التعريفية للموقع، فيجب عليك إظهار ما الذي سيحتويه موقعك.

  1. قائمة ببعض الافلام
  2. قائمة ببعض المسلسلات
  3. يمكنك إظهار بعض التصنيفات الاخرى (top movies, most watched, comedy,..., etc)

المطلوب الثاني: إنشاء صفحات أخرى

يجب أن يكون للأفلام صفحات خاصة بها تظهر فيها تفاصيل الفلم (trailer, description, actors, rating)

المطلوب الثالث: إضافة شريط التنقل في أعلى الموقع (Navbar)

شريط التنقل لا يجعل شكل الموقع أفضل فقط، بل أيضاً يسمح للمستخدم بالتنقل لمحتويات الموقع بسهولة. محتويات الشريط:

  1. شعار للموقع، يمكنك اختيار اي صورة تجدها مناسبه
  2. شريط للبحث
  3. أيقونات خاصة بمواقع التواصل الإجتماعي او غيرها وقم بربطها بحسابك الشخصي مثل instagram, twitter, youtube, Github
  4. زر لتسجيل الدخول

ملاحظة: يمكنك أن تجد صورة في ملف الصور مثال لشريط التنقل

المطلوب الرابع (اختياري): إضافة قائمة منسدلة (Dropdown menu)

يمكنك إما اضافة القائمة لشريط التنقل أو أسفلها حسب ما تراه مناسباً لشكل موقعك. قد تحتوي هذه القائمه على:

  • تصنيفات الافلام التي لديك
  • او صفحات مواقع اخرى مرتبطة بموقعك

المطلوب الخامس (اختياري): إضافة شريط جانبي (Sidebar)

  • أنشئ شريط جانبي تظهر فيه صفحات موقعك لكي يسهل التنقل بينها
  • قم بتغيير خواص روابط الصفحات بحيث يتغير لون الرابط او لون الخلفية عند المرور عليه ملاحظة: يمكنك زيارة الموقع المعتاد ستجد فيه انواع واشكال من الشرائط الجانبيه، اضف ما تجده مناسباً w3schools.com

ملاحظات عامة:

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

مثل imdb وغيره

بونص!

  1. قم بإستخدام CSS animation
  2. استخدم خاصية الإنتقالات لتضيف حركة إلى موقعك CSS transitions

آخر موعد لرفع الكود
22/9/2020

web-hw-2's People

Contributors

ralenezi avatar hhmousawi avatar basicfatma avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.