تسليم حلول: مهمة التدرب على القوائم - Lists

ورشات الواجهات الأمامية Frontend القوائم في صفحات الويب
#61

ممتاز ي طارق

1 Like
#62

مية مية

1 Like
#63

قمتي بعمل اربع قوائم ul منفصلة، بدنا يكون عندنا قائمة واحدة.

أعيدي النظر على الكود :grin:

#64

مش فاهمه المشكله فى ايه؟ هتفرق فى ايه انى استخدم اربع قوائم u1 منفصله عن قائمه واحده ، انا شايفه ان كدا احسن وان الكود اصغر بكتير… فهمنى لأنى بجد عاوزه افهم

1 Like
#65

صفحة الويب هي ليست عبارة عن مجموعة من الأكواد يجب أن نراعي بأن تكون ذات معنى ومنطقية للآلات ولمحركات البحث.

راح اضرب لك مثال مشابة لما قمتي به بعمل قوائم ul متعددة.

لنفترض أنني طلبت منك أن تبني لي بيت <home> وقلت لك أريد أن يكون بداخل هذا البيت غرف <room> الأولة للأبوين والثانية للأطفال والثالثة لنقل انه المطبخ.

إذا هناك طريقتين لطريقة تنفيذك لذلك:

1- أن تكون كل غرفة بداخل بيت منفصل بحد ذاته

<home>
    <room>غرفة الأبوين</room>
</home>

<home>
    <room>غرفة الأطفال</room>
</home>

<home>
    <room>المطبخ</room>
</home>

2- أن يكون لدينا بيت واحد وهذه الغرف هي مجموعة تندرج تحته

<home>
    <room>غرفة الأبوين</room>
    <room>غرفة الأطفال</room>
    <room>المطبخ</room>
</home>

أعتقد أنك الأن فهمتي ضرورة أن تكون كل عناصر القائمة بالمستوى الأول تندرج تحت عنصر ul واحد طالما وهناك عامل مشترك بينها ففي حالتنا جميعها هي عبارة عن قائمة للتنقل، اذا فهي مرتبطة ببعضها البعض وإذا لم تكن كذلك في هذه الحالة بإمكانك إنشاء كم ما تريدي من القوائم طالما وتقسيمها منطقي.

وإذا مازال لديك أي إستفسار قولي لي

1 Like
#66

فهمت… شكرا

1 Like
#67 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            direction: rtl;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <ul> 
        <li>الرئيسيه</li>
        <li>الإلكترونيات
           <ul> 
                <li>كاميرات</li>
                <li>اجهزة كمبيوتر</li>
                <li>اجهزه منزليه</li>
           </ul>
        </li>   
        <li>المنزل
            <ul>
                <li>الأثاث والديكور</li>
                <li>المطبخ</li>
            </ul> 
        </li>        
        <li>الأزياء
            <ul> 
                <li>حقائب اليد</li>
                <li>الساعات</li>
            </ul>
        </li>    
    </ul>    
</body>
</html>

2019-07-07%2018_09_44-Document
2019-07-07 18_09_44-Document.png1366×728 27.5 KB

1 Like
#68

مية مية :ok_hand:

2 Likes
#69

مهمة التدرب على القوائم

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> مهمة التدرب على القوائم</title>
        <style>
        body{
            direction: rtl;
        }
        </style>
    </head>
    <body>
        <ul>
            <li>الرئيسية</li>
            <li>الالكترونيات
                <ul>
                    <li>كاميرات</li>
                    <li>اجهزة كمبيوتر</li>
                    <li>اجهزة منزلية</li>
                </ul>
            </li>
            <li>المنزل
                <ul>
                    <li>الاثاث والديكور</li>
                    <li>المطبخ</li>
                </ul>
            </li>
            <li>الازياء
                <ul>
                    <li>حقائب اليد</li>
                    <li>الساعات</li>
                </ul>
            </li>
        </ul>
    </body>
</html>
1 Like
#70 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       body{
           direction: rtl;
       }
    </style>
</head>
<body>
    <ul>
        <li>الرئيسية</li>
        <li>الإلكترونيات
            <ul>
                <li>كاميرا</li>
                <li>أجهزة كمبيوتر</li>
                <li>أجهزة منزلية</li>
            </ul>
                <li>المنزل
                    <ul>
                        <li>الاثاث و الديكور</li>
                        <li>المطبخ</li>
                    </ul>
                </li>
            <li>الأزياء
                <ul>
                    <li>حقائب اليد</li>
                    <li>ساعات</li>
                </ul>
            </li>
        </ul>
</body>
</html>
1 Like
#71 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    ul{
        direction: rtl;
    }
        
        </style>
</head>
<body>
    <ul>
        <li>الرئسية</li>
        <li>الالكترونيات</li>
        <ul>
            <li>كاميرات</li>
            <li>اجهزة كومبيوتر</li>
            <li>اجهزة المنزل </li>
        </ul>
        <li>المنزل</li>
        <ul>
            <li>الاثاث والديكور</li>
            <li>المطبخ</li>
        </ul>
        <li>الازياء</li>
        <ul>
            <li>حقائب اليد</li>
            <li>الساعات</li>
        </ul>
    </ul>
    
</body>
</html>
1 Like
#72

@alaa_aimen @Hishamo

ممتاز :+1:

1 Like
#73

راجع الدرس ي طه وتأكد من المكان الصحيح لوضع القوائم الفرعية

#74 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
</head>
<style>
    body{
        direction: rtl;
    }
</style>
<body>
    
    <ul>
        <li>الرئيسية</li>
    </ul>
    <ul>
        <li>الالكترونيات
            <ul>
                <li>كاميرات</li>
                <li>اجهزة الكمبيوتر</li>
                <li>أجهزة منزلية</li>
            </ul>
        </li>
    </ul> 
            
    <ul>
        <li>المنزل
            <ul>
                <li>الاثاث والديكور</li>
                <li>المطبخ</li>
            </ul>
        </li>
    </ul>
    <ul>
         <li>الأزياء
              <ul>
                 <li>احقائب اليد</li>
                 <li>الساعات</li>
              </ul>
         </li>
     </ul>
</body>

</html>
1 Like
#75

ممتاز :100:

1 Like
#76 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
          body{
              direction:rtl;
          }
    </style>
</head>
<body>
    <ul>
        <li>الرئيسية</li>
        <li>الإلكترونيات
                <ul>
                        <li>كاميرات</li>
                        <li>اجهزة كمبيوتر</li>
                        <li>اجهزة منزلية</li>
                    </ul>
        </li>
        
        <li>المنزل
                <ul>
                        <li>الاثاث و الديكور</li>
                        <li>المطبخ</li>
                       
                    </ul>
        </li>

        <li>الأزياء
                <ul>
                        <li>حقائب اليد</li>
                        <li>الساعات</li>
                        
                    </ul>
        </li>
    </ul>
    
</body>
</html>
1 Like
#77 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>List</title>
    <style>
        body{
            direction: rtl;
            font-size: 28px;
        }
    </style>
</head>
<body>
    <ul>
        <li>الرئيسية</li>
        <li>الإلكترونيات</li>
            <ul>
                <li>كاميرات</li>
                <li>أجهزة كمبيوتر</li>
                <li>أجهزة منزلية</li>
            </ul>
        <li>المنزل</li>
            <ul>
                <li>الأثاث و الديكور</li>
                <li>المطبخ</li>
            </ul>
        <li>الأزياء</li>
            <ul>
                <li>حقائب اليد</li>
                <li>الساعات</li>
            </ul>
    </ul>
</body>
</html>
1 Like
#78

مية مية :+1:

#79

أعيدي النظر في طريقة عمل الـ Nesting للقوائم الفرعية، متأكد راح تراجعي الدرس او الكود وتصلحي المشكلة بدون ما اجيب لك اي تلميحات :wink:

#80

I found the mistake :sweat_smile:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>List</title>
    <style>
        body{
            direction: rtl;
            font-size: 28px;
        }
    </style>
</head>
<body>
    <ul>
        <li>الرئيسية</li>
        <li>الإلكترونيات
            <ul>
                <li>كاميرات</li>
                <li>أجهزة كمبيوتر</li>
                <li>أجهزة منزلية</li>
            </ul>
        </li>
        <li>المنزل
            <ul>
                <li>الأثاث و الديكور</li>
                <li>المطبخ</li>
            </ul>
        </li>
        <li>الأزياء
            <ul>
                <li>حقائب اليد</li>
                <li>الساعات</li>
            </ul>
        </li>
    </ul>
</body>
</html>

Like they said :" We gain experience only by making mistakes."

1 Like