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) المطلوب الرابع: إضافة قائمة منسدله////////yes

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

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

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

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

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

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

وغيره imdb مثل

!بونص

  1. CSS animation قم باستخدام /////yes
  2. CSS transitions استخدم خاصية الانتقالات لتضيف حركه الى موقعك//////yes
  3. CSSاجعل موقعك متجاوب مع جميع الاجهزه باستخدام ال (Responsive)/////yes

آخر موعد لرفع الكود
30/6/2020

web-hw-2's People

Contributors

fatmahsaleemah avatar hhmousawi 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.