1
00:00:04,040 --> 00:00:09,465
لقد حان الوقت لمهمتك الأولى في هذه الدورة.

2
00:00:09,465 --> 00:00:10,975
في المهمة الأولى،

3
00:00:10,975 --> 00:00:22,130
سنقوم بتزويدك بصفحة aboutus.html unstyled.

4
00:00:22,130 --> 00:00:25,670
يتوفر لك ملف zip الذي يحتوي على صفحة aboutus.html هذه في تعليمات التعيين.

5
00:00:25,670 --> 00:00:30,530
لذلك تحتاج إلى تنزيل الصفحة ثم نقل تلك الصفحة إلى مجلد con Fusion الخاص بك.

6
00:00:30,530 --> 00:00:33,060
بعد ذلك، ستقوم بتطبيق

7
00:00:33,060 --> 00:00:40,970
فئات Bootstrap وشبكة Bootstrap Flexbox على نمط الصفحة،

8
00:00:41,110 --> 00:00:47,780
ثم تقوم بنقل الصفحة إلى مجلد Con Fusion،

9
00:00:47,780 --> 00:00:52,095
ثم يمكنك عرض الصفحة في المتصفح الخاص بك عن طريق كتابة

10
00:00:52,095 --> 00:01:01,810
localhost:3000/aboutus.html والخادم الخفيف الخاص بك بناء صفحة aboutus.html،

11
00:01:01,810 --> 00:01:05,310
لذلك هذه هي الطريقة الوحيدة التي يمكنك من خلالها عرض الصفحة.

12
00:01:05,310 --> 00:01:06,545
لذا بادئ ذي بدء،

13
00:01:06,545 --> 00:01:08,775
ستبدو الصفحة هكذا،

14
00:01:08,775 --> 00:01:12,520
صفحة Unstyle بالكامل تحتوي فقط على محتوى.

15
00:01:12,520 --> 00:01:20,165
الآن عملك هو الذهاب من خلال ثلاث مهام من أجل تنسيق هذه الصفحة.

16
00:01:20,165 --> 00:01:23,245
دعونا ننظر إلى المهام الثلاث بمزيد من التفصيل.

17
00:01:23,245 --> 00:01:26,890
مهمتك الأولى هي تطبيق

18
00:01:26,890 --> 00:01:32,850
Bootstrap CSS وفئات Javascript على

19
00:01:32,850 --> 00:01:42,415
صفحة aboutus.html بحيث يتم تحويل هذه الصفحة على الفور إلى هذه الصفحة،

20
00:01:42,415 --> 00:01:48,470
حيث بمجرد إضافة فئات Bootstrap CSS و JavaScript،

21
00:01:48,470 --> 00:01:54,115
سيتم تنسيق رأس وتذييل الصفحة تلقائيًا بشكل صحيح،

22
00:01:54,115 --> 00:01:59,170
لأنني قمت ببساطة بنسخ الرأس في التذييل من صفحة index.html إلى

23
00:01:59,170 --> 00:02:05,140
هذه الصفحة وتركت كل تنسيق Bootstrap على هذا النحو،

24
00:02:05,140 --> 00:02:10,955
ولكن لا يزال يتم ترك المحتوى الفعلي للصفحة بدون نمط.

25
00:02:10,955 --> 00:02:14,580
حتى الآن، كمهمة ثانية،

26
00:02:14,580 --> 00:02:19,580
ستقوم بتطبيق شبكة Bootstrap Flexbox بما

27
00:02:19,580 --> 00:02:23,190
في ذلك الحاوية والصفوف وفئات العمود إلى

28
00:02:23,190 --> 00:02:28,430
هذا المحتوى أو الصفحة بحيث يمكنك نمط بشكل صحيح.

29
00:02:28,430 --> 00:02:30,345
الآن، عند تطبيق الفصول الدراسية،

30
00:02:30,345 --> 00:02:36,430
ستقوم بتطبيق فئات الصف والعمود على aboutus لمجرد تركها على هذا النحو.

31
00:02:36,430 --> 00:02:40,390
ثم ستقوم بتطبيق فئات الصف والعمود على

32
00:02:40,390 --> 00:02:45,445
هذا المحتوى بحيث يشغل هذا المحتوى نصف الشاشة فقط،

33
00:02:45,445 --> 00:02:48,740
ثم ستقوم بتطبيق فئات الصف والعمود على

34
00:02:48,740 --> 00:02:53,245
هذا المحتوى بحيث تحتل عرض الشاشة بالكامل.

35
00:02:53,245 --> 00:03:00,300
لذلك، اختر فئات الصف والعمود بشكل صحيح لتطبيقها على هذا.

36
00:03:00,300 --> 00:03:05,220
يمكنك استخدام فئات CSS المخصصة التي قمنا

37
00:03:05,220 --> 00:03:10,510
بتنفيذها بالفعل لـ index.html عن طريق إضافة ملف style.css،

38
00:03:10,510 --> 00:03:14,765
أيضًا لنمط المحتوى في هذه الصفحة.

39
00:03:14,765 --> 00:03:18,010
لذلك عند إكمال المهمة الثانية،

40
00:03:18,010 --> 00:03:21,990
ستنتهي صفحتك على غرار هذا.

41
00:03:21,990 --> 00:03:27,290
حتى تتمكن من رؤية أن صفحة Aboutus موجودة في تلقاء نفسها.

42
00:03:27,290 --> 00:03:31,505
ثم جزء تاريخنا،

43
00:03:31,505 --> 00:03:37,800
لاحظ أنه على حجم الشاشة الصغيرة إلى الكبيرة،

44
00:03:37,800 --> 00:03:43,815
سيشغل تاريخنا نصف عرض الشاشة فقط.

45
00:03:43,815 --> 00:03:51,850
ثم يشغل جزء قيادة الشركات عرض الشاشة بالكامل في هذه الحالة.

46
00:03:51,850 --> 00:03:56,000
هذه هي المهمة الثانية التي تحتاج إلى إكمالها في مهمتك.

47
00:03:56,000 --> 00:03:59,660
بالنسبة للمهمة الثالثة كما ترون،

48
00:03:59,660 --> 00:04:05,380
يبدو تخطيط المحتوى هذا جيدًا لأحجام الشاشة الأكبر،

49
00:04:05,380 --> 00:04:13,240
ولكن عندما تذهب إلى حجم الشاشة الصغيرة جدًا خاصةً مثل هذا،

50
00:04:13,240 --> 00:04:20,415
تلاحظ أن المحتوى أكثر من اللازم في هذا القسم.

51
00:04:20,415 --> 00:04:27,670
لذلك ما نود القيام به هو استخدام فئة Bootstrap أخرى مقدمة لنا تسمى،

52
00:04:27,670 --> 00:04:31,615
[غير مسموع] وكتلة DSM.

53
00:04:31,615 --> 00:04:37,865
هناك رابط للفئات المستجيبة في موارد التعيين،

54
00:04:37,865 --> 00:04:44,550
بحيث يمكنك التحقق من وثائق كتلة [غير مسموع] و DSM.

55
00:04:44,550 --> 00:04:49,440
تحتاج إلى تطبيق تلك بحيث يتم

56
00:04:49,440 --> 00:04:54,400
إخفاء هذا الوصف في أحجام الشاشة الصغيرة الإضافية.

57
00:04:54,400 --> 00:04:59,955
لذلك عندما كنت الطبقات إلى هذا الجزء قيادة الشركات،

58
00:04:59,955 --> 00:05:06,040
سيتم الآن وضع نفس المحتوى من دون وصف،

59
00:05:06,040 --> 00:05:10,465
لذلك سوف تكون مخفية في حجم شاشات صغيرة إضافية.

60
00:05:10,465 --> 00:05:14,170
ولكن عندما تذهب إلى صغير حجم الشاشة الكبيرة،

61
00:05:14,170 --> 00:05:16,335
فإن المحتوى تصبح مرئية.

62
00:05:16,335 --> 00:05:21,200
لذلك يمكنك ملاحظة أنه بالنسبة لحجم الشاشة الصغيرة الإضافية،

63
00:05:21,200 --> 00:05:23,760
يتم إخفاء المحتوى،

64
00:05:23,760 --> 00:05:26,170
ولكن بالنسبة لحجم الشاشة الصغيرة،

65
00:05:26,170 --> 00:05:30,475
سيتم عرض محتوى الوصف بوضوح.

66
00:05:30,475 --> 00:05:35,310
إذن هذه هي مهمتك الثالثة في مهمتك

67
00:05:35,310 --> 00:05:40,175
أثناء وجودك في ذلك، يمكنك أيضًا تطبيق نفس الفئات على

68
00:05:40,175 --> 00:05:45,810
الأوصاف في صفحة index.html الخاصة بنا بحيث

69
00:05:45,810 --> 00:05:51,480
يتم أيضًا إخفاء الأوصاف التفصيلية لعناصر المحتوى في

70
00:05:51,480 --> 00:05:57,645
صفحة index.html عند عرضها على أحجام شاشة صغيرة إضافية.

71
00:05:57,645 --> 00:06:02,090
هذا يكمل مهمتك الأولى.

72
00:06:02,090 --> 00:06:04,965
أيضا، عند إرسال مهمتك،

73
00:06:04,965 --> 00:06:14,460
يرجى أخذ لقطة شاشة صفحة كاملة من التخطيط الخاص بك

74
00:06:14,460 --> 00:06:19,615
سواء في

75
00:06:19,615 --> 00:06:25,930
حجم الشاشة الصغيرة أو الكبيرة جدا وأيضا على حجم الشاشة الصغيرة جدا،

76
00:06:25,930 --> 00:06:29,230
ومن ثم تضمين ذلك كجزء من التقديم الخاص بك.

77
00:06:29,230 --> 00:06:32,420
لالتقاط لقطة شاشة صفحة كاملة في Chrome،

78
00:06:32,420 --> 00:06:36,000
يمكنك استخدام إضافة Chrome المتوفرة لنا،

79
00:06:36,000 --> 00:06:39,305
ويتم توفير الرابط إلى إضافة Chrome

80
00:06:39,305 --> 00:06:45,325
في موارد المهمة التي تتبع وصف المهمة.

81
00:06:45,325 --> 00:06:48,555
بعد إكمال مهمتك،

82
00:06:48,555 --> 00:06:52,610
في حالة حفظ تغييراتك على مستودع Git، من

83
00:06:52,610 --> 00:06:55,750
فضلك لا تنس الالتزام بالتغييرات على

84
00:06:55,750 --> 00:07:00,090
مستودع Git الخاص بك باستخدام رسالة تعيين واحد.