1
00:00:04,040 --> 00:00:09,465
C'est l'heure de votre première affectation dans ce cours.

2
00:00:09,465 --> 00:00:10,975
Dans la première affectation,

3
00:00:10,975 --> 00:00:18,605
nous allons vous fournir la page aboutus.html non stylée.

4
00:00:18,605 --> 00:00:22,130
Le fichier zip contenant cette

5
00:00:22,130 --> 00:00:25,670
page aboutus.html est disponible dans les instructions d'affectation.

6
00:00:25,670 --> 00:00:30,530
Donc, vous devez télécharger la page, puis déplacer cette page dans votre dossier Confusion.

7
00:00:30,530 --> 00:00:33,060
Ensuite, vous appliquerez les

8
00:00:33,060 --> 00:00:40,970
classes Bootstrap et la grille Bootstrap Flexbox pour styliser la page,

9
00:00:41,110 --> 00:00:47,780
puis vous déplacez la page dans le dossier Con Fusion,

10
00:00:47,780 --> 00:00:52,095
puis vous pouvez afficher la page dans votre navigateur en tapant

11
00:00:52,095 --> 00:01:01,810
localhost:3000/aboutus.html et votre serveur de construction de serveur léger vers la page aboutus.html,

12
00:01:01,810 --> 00:01:05,310
donc c'est la seule façon de voir la page.

13
00:01:05,310 --> 00:01:06,545
Donc, pour commencer,

14
00:01:06,545 --> 00:01:08,775
la page ressemblera à ceci,

15
00:01:08,775 --> 00:01:12,520
une page complètement déstyle qui ne contient que du contenu.

16
00:01:12,520 --> 00:01:20,165
Maintenant, votre travail consiste à passer par trois tâches afin de formater cette page.

17
00:01:20,165 --> 00:01:23,245
Regardons les trois tâches plus en détail.

18
00:01:23,245 --> 00:01:26,890
Votre première tâche consiste à appliquer

19
00:01:26,890 --> 00:01:32,850
les classes Bootstraps CSS et Javascript à la

20
00:01:32,850 --> 00:01:42,415
page aboutus.html afin que cette page soit instantanément transformée en cette page,

21
00:01:42,415 --> 00:01:48,470
où dès que vous ajoutez les classes Bootstraps CSS et JavaScript,

22
00:01:48,470 --> 00:01:54,115
l'en-tête et le pied de page seront automatiquement formatés correctement,

23
00:01:54,115 --> 00:01:59,170
parce que j'ai simplement copié l'en-tête dans le pied de page de la page index.html dans

24
00:01:59,170 --> 00:02:05,140
cette page et j'ai laissé tout le formatage Bootstrap en tant que tel,

25
00:02:05,140 --> 00:02:10,955
mais le contenu réel de la page est toujours laissé non stylé.

26
00:02:10,955 --> 00:02:14,580
Donc maintenant, en tant que deuxième tâche,

27
00:02:14,580 --> 00:02:19,580
vous allez appliquer la grille Bootstraps Flexbox, y compris le conteneur,

28
00:02:19,580 --> 00:02:23,190
les lignes et les classes de colonnes à

29
00:02:23,190 --> 00:02:28,430
ce contenu ou à la page afin que vous puissiez le styliser correctement.

30
00:02:28,430 --> 00:02:30,345
Maintenant, lorsque vous appliquez les classes,

31
00:02:30,345 --> 00:02:36,430
vous allez appliquer les classes de ligne et de colonne à l'aboutus pour simplement le laisser en tant que telle.

32
00:02:36,430 --> 00:02:40,390
Ensuite, vous allez appliquer les classes de ligne et de colonne à

33
00:02:40,390 --> 00:02:45,445
ce contenu de sorte que ce contenu occupe seulement la moitié de l'écran,

34
00:02:45,445 --> 00:02:48,740
puis vous allez appliquer les classes de ligne et de colonne à

35
00:02:48,740 --> 00:02:53,245
ce contenu afin qu'ils occupent toute la largeur de l'écran.

36
00:02:53,245 --> 00:03:00,300
Donc, choisissez les classes de ligne et de colonne correctement à appliquer à cela.

37
00:03:00,300 --> 00:03:05,220
Vous pouvez utiliser les classes CSS personnalisées que nous avons déjà

38
00:03:05,220 --> 00:03:10,510
implémentées pour le index.html en ajoutant le fichier style.css,

39
00:03:10,510 --> 00:03:14,765
également pour styliser le contenu de cette page.

40
00:03:14,765 --> 00:03:18,010
Ainsi, lorsque vous terminez la deuxième tâche,

41
00:03:18,010 --> 00:03:21,990
votre page finira par être stylisée comme ceci.

42
00:03:21,990 --> 00:03:27,290
Ainsi, vous pouvez voir que la page aboutus existe dans sa propre.

43
00:03:27,290 --> 00:03:31,505
Ensuite, notre histoire,

44
00:03:31,505 --> 00:03:37,800
notez que sur un écran de petite à grande taille,

45
00:03:37,800 --> 00:03:43,815
notre histoire n'occupera que la moitié de la largeur de l'écran.

46
00:03:43,815 --> 00:03:51,850
Ensuite, la partie Corporate Leadership occupe toute la largeur de l'écran dans ce cas.

47
00:03:51,850 --> 00:03:56,000
Il s'agit de la deuxième tâche que vous devez effectuer dans votre affectation.

48
00:03:56,000 --> 00:03:59,660
Pour la troisième tâche, comme vous pouvez le voir,

49
00:03:59,660 --> 00:04:05,380
cette mise en page de contenu semble bien pour les plus grandes tailles d'écran,

50
00:04:05,380 --> 00:04:13,240
mais lorsque vous passez à la taille d'écran extra petite en particulier comme ceci,

51
00:04:13,240 --> 00:04:20,415
vous remarquez que le contenu est trop dans cette section.

52
00:04:20,415 --> 00:04:27,670
Donc, ce que nous aimerions faire est d'utiliser une autre classe Bootstrap fournie pour nous appelé,

53
00:04:27,670 --> 00:04:31,615
[inaudible] et le bloc DSM.

54
00:04:31,615 --> 00:04:37,865
Il existe un lien vers les classes réactives dans les ressources d'affectation, de

55
00:04:37,865 --> 00:04:44,550
sorte que vous pouvez consulter la documentation du bloc [inaudible] et du bloc DSM.

56
00:04:44,550 --> 00:04:49,440
Vous devez les appliquer de manière à ce que cette description soit

57
00:04:49,440 --> 00:04:54,400
cachée dans les tailles d'écran très petites.

58
00:04:54,400 --> 00:04:59,955
Donc, lorsque vous les classes à cette partie de leadership d'entreprise,

59
00:04:59,955 --> 00:05:06,040
le même contenu sera maintenant disposé sans la description, de

60
00:05:06,040 --> 00:05:10,465
sorte qu'il sera caché dans la taille des écrans extra petits.

61
00:05:10,465 --> 00:05:14,170
Mais quand vous allez à la petite taille de l'écran grand,

62
00:05:14,170 --> 00:05:16,335
le contenu deviendra visible.

63
00:05:16,335 --> 00:05:21,200
Ainsi, vous pouvez remarquer que pour la taille d'écran extra petite,

64
00:05:21,200 --> 00:05:23,760
le contenu est masqué,

65
00:05:23,760 --> 00:05:26,170
mais pour la petite taille d'écran,

66
00:05:26,170 --> 00:05:30,475
ce contenu de description sera affiché clairement.

67
00:05:30,475 --> 00:05:35,310
C' est donc votre troisième tâche dans votre mission.

68
00:05:35,310 --> 00:05:40,175
Pendant que vous y êtes, vous pouvez également appliquer les mêmes classes aux

69
00:05:40,175 --> 00:05:45,810
descriptions de notre page index.html afin que

70
00:05:45,810 --> 00:05:51,480
les descriptions détaillées des éléments de contenu soient également masquées dans

71
00:05:51,480 --> 00:05:57,645
la page index.html lorsqu'elle est affichée sur de très petites tailles d'écran.

72
00:05:57,645 --> 00:06:02,090
Ceci termine votre première affectation.

73
00:06:02,090 --> 00:06:04,965
De plus, lorsque vous soumettez votre mission,

74
00:06:04,965 --> 00:06:14,460
veuillez prendre une capture d'écran pleine page de votre mise

75
00:06:14,460 --> 00:06:19,615
en page à la fois en

76
00:06:19,615 --> 00:06:25,930
format petit à très grand écran et sur la taille d'écran extra petit,

77
00:06:25,930 --> 00:06:29,230
puis inclure cela dans votre soumission.

78
00:06:29,230 --> 00:06:32,420
Pour prendre une capture d'écran de page complète dans Chrome,

79
00:06:32,420 --> 00:06:36,000
vous pouvez utiliser une extension Chrome qui est disponible pour nous,

80
00:06:36,000 --> 00:06:39,305
le lien vers l'extension Chrome est fourni dans

81
00:06:39,305 --> 00:06:45,325
les ressources d'affectation qui suivent la description de l'affectation.

82
00:06:45,325 --> 00:06:48,555
Une fois votre affectation terminée,

83
00:06:48,555 --> 00:06:52,610
au cas où vous enregistrez vos modifications dans un référentiel Git,

84
00:06:52,610 --> 00:06:55,750
n'oubliez pas de valider les modifications dans

85
00:06:55,750 --> 00:07:00,090
votre référentiel Git avec l'affectation de message 1.