Theme
Primary Color

تكليفات الدروس من [ 46 ] إلى [ 53 ]

[ 6 ] تكليفات على [ Flex Box ]

التكليف 01

<div>Elzero</div>
  • إستخدم البنية السابقة بدون التعديل عليها لعمل الشكل المطلوب
  • عرض العنصر وطوله هو 100px
  • قم بتوسيط العنصر في الصفحة بطريقة عرضية
  • قم بتوسيط كلمة Elzero داخل العنصر طوليات وعرضيا بواسطة خواص ال Flex
  • قم بعمل الشكل بنفس الالوان

التكليف 02

<div class="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
  • إستخدم البنية السابقة بدون التعديل عليها لعمل الشكل المطلوب
  • عرض العنصر parent هو 600px والطول هو 300px
  • قم بتوسيط العنصر parent في الصفحة بطريقة عرضية
  • قم بعمل نفس العناصر بنفس شكلها وأماكنها

التكليف 03

<div class="parent">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
  <div class="five">5</div>
  <div class="six">6</div>
</div>
  • إستخدم البنية السابقة بدون التعديل عليها لعمل الشكل المطلوب
  • عرض العنصر parent هو 600px والطول هو 300px
  • قم بتوسيط العنصر parent في الصفحة بطريقة عرضية
  • قم بعمل نفس العناصر بنفس شكلها وأماكنها

التكليف 04

<div class="parent">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
</div>
  • إستخدم البنية السابقة بدون التعديل عليها لعمل الشكل المطلوب
  • عرض العنصر parent هو 600px والطول هو 300px
  • قم بتوسيط العنصر parent في الصفحة بطريقة عرضية
  • قم بعمل نفس العناصر بنفس شكلها وأماكنها

التكليف 05

<div class="parent">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</div>
  • إستخدم البنية السابقة بدون التعديل عليها لعمل الشكل المطلوب
  • عرض العنصر parent هو 600px والطول هو 300px
  • قم بتوسيط العنصر parent في الصفحة بطريقة عرضية
  • قم بعمل نفس العناصر بنفس شكلها وأماكنها

التكليف 06

<div class="page">
  <div class="header">
    <div class="logo">Logo</div>
    <ul class="links">
      <li>Home</li>
      <li>About</li>
      <li>Services</li>
      <li>Contact</li>
    </ul>
  </div>
  <div class="main-area">
    <div class="content">Content</div>
    <div class="sidebar">Sidebar</div>
  </div>
  <div class="footer">
    <div class="copyright">Copyright 2021</div>
    <div class="design">Designed By Elzero</div>
  </div>
</div>
  • يمكنك إستخدام البنية السابقة أو عمل بنية بواسطة ال HTML5 Semantic Elements لتصل لنفس الشكل
  • إستعمل ال Flex Box فقط في توزيع العناصر لتقوم بعمل الشكل التالي
  • إستخدم خبراتك فيما تعلمته سابقا للوصول لنفس الشكل
  • يجب عليك إستخدام المتغيرات ( Variables ) في كل شيء يتكرر في التصميم

حلول التكليفات

Premium

حلول التكليفات متاحة للأعضاء ال Premium

راجع الحلول وطور مهاراتك مع العضوية المميزة

اكتشف العضوية المميزة