1
00:00:01,090 --> 00:00:02,290
‫Instructeur : Commençons

2
00:00:02,290 --> 00:00:04,750
‫maintenant à vraiment créer notre modèle de base.

3
00:00:04,750 --> 00:00:07,490
‫Donc le modèle sur lequel tous les autres

4
00:00:07,490 --> 00:00:09,360
‫modèles seront basés plus tard.

5
00:00:09,360 --> 00:00:12,723
‫Donc, fondamentalement, nous allons convertir un fichier html normal, qui

6
00:00:12,723 --> 00:00:16,163
‫se trouve dans les fichiers de démarrage, en un modèle Pug.

7
00:00:17,840 --> 00:00:19,830
‫Donc, en gros, nous allons commencer à

8
00:00:19,830 --> 00:00:21,850
‫créer la mise en page de cette page.

9
00:00:21,850 --> 00:00:26,450
‫Donc cet en-tête ici et aussi le pied de page.

10
00:00:26,450 --> 00:00:28,650
‫D'accord, pas le contenu bien sûr,

11
00:00:28,650 --> 00:00:31,710
‫parce que nous allons ensuite construire plus dynamiquement un

12
00:00:31,710 --> 00:00:33,440
‫peu plus tard, d'accord.

13
00:00:33,440 --> 00:00:35,220
‫Mais nous laisserons tout

14
00:00:35,220 --> 00:00:38,920
‫prêt, afin que nous puissions ensuite injecter tout ce contenu réel

15
00:00:38,920 --> 00:00:41,053
‫dans ce modèle de base global.

16
00:00:43,030 --> 00:00:45,440
‫Alors, faisons-le maintenant.

17
00:00:45,440 --> 00:00:47,650
‫Et commençons en fait par nous débarrasser

18
00:00:47,650 --> 00:00:50,090
‫de tout ce contenu que nous avions ici.

19
00:00:50,090 --> 00:00:51,810
‫C'était donc juste pour

20
00:00:51,810 --> 00:00:54,550
‫vous montrer les différentes fonctionnalités de Pug.

21
00:00:54,550 --> 00:00:58,070
‫Et maintenant, ouvrons cet aperçu. html, afin que

22
00:00:58,070 --> 00:01:01,463
‫nous puissions le convertir ici en Pug.

23
00:01:02,420 --> 00:01:05,370
‫D'accord, c'était donc le fichier html d'origine que

24
00:01:05,370 --> 00:01:08,360
‫j'ai créé pour concevoir la page de présentation que

25
00:01:08,360 --> 00:01:10,610
‫nous venons de voir rendue dynamiquement.

26
00:01:10,610 --> 00:01:13,810
‫D'accord, c'est donc ce que nous avons en tête et

27
00:01:13,810 --> 00:01:17,950
‫en fait, allons de l'avant et copions tout ce code, afin que

28
00:01:17,950 --> 00:01:21,053
‫nous puissions ensuite convertir ce qui manque ici.

29
00:01:22,610 --> 00:01:26,573
‫D'accord, donc le contenu de notre titre est celui-ci,

30
00:01:27,420 --> 00:01:29,973
‫et donc copions-le, puis débarrassons-nous,

31
00:01:33,460 --> 00:01:37,980
‫et c'est donc le contenu de la page principale, n'est-ce pas.

32
00:01:37,980 --> 00:01:42,150
‫Ensuite, nous avons déjà le favicon, et aussi le style.

33
00:01:42,150 --> 00:01:44,980
‫Donc, ce qui nous manque, c'est essentiellement ce

34
00:01:44,980 --> 00:01:46,990
‫truc ici, pour la

35
00:01:46,990 --> 00:01:51,143
‫réponse du développement Web, et aussi ce lien de police Google, d'accord.

36
00:01:52,210 --> 00:01:53,563
‫Donc, en commençant

37
00:01:58,280 --> 00:02:00,123
‫par cela, insérez donc une

38
00:02:02,830 --> 00:02:05,610
‫feuille de style, puis saisissons simplement cette

39
00:02:09,040 --> 00:02:11,803
‫référence et remplaçons-la par des guillemets simples.

40
00:02:13,970 --> 00:02:18,650
‫D'accord, alors je veux aussi définir ces deux-là,

41
00:02:18,650 --> 00:02:21,273
‫alors coupons-les ici, et

42
00:02:23,890 --> 00:02:28,323
‫convertissons simplement tout ce que nous avons ici.

43
00:02:40,099 --> 00:02:40,932
‫D'accord.

44
00:02:42,960 --> 00:02:44,473
‫Oh et aussi les guillemets simples.

45
00:02:50,470 --> 00:02:54,223
‫D'accord, mettons celui-ci à la fin,

46
00:02:55,780 --> 00:03:00,730
‫et c'est donc notre chapeau pour notre modèle.

47
00:03:00,730 --> 00:03:03,993
‫Ensuite, jetons un coup d'œil à l'en-tête.

48
00:03:05,640 --> 00:03:09,143
‫D'accord, en gros, nous avons tout cet élément ici, avec

49
00:03:10,100 --> 00:03:14,600
‫juste un en-tête de sorte que la barre gris foncé que vous avez

50
00:03:14,600 --> 00:03:17,140
‫vue en haut de la page.

51
00:03:17,140 --> 00:03:18,430
‫Et donc

52
00:03:20,500 --> 00:03:22,530
‫copions ceci et mettons-le ici.

53
00:03:22,530 --> 00:03:24,180
‫Donc, c'est beaucoup de code

54
00:03:24,180 --> 00:03:27,800
‫et vous verrez à quel point ce sera peu de code plus tard, une

55
00:03:27,800 --> 00:03:29,920
‫fois que nous aurons traduit cela en Pug.

56
00:03:29,920 --> 00:03:33,480
‫D'accord, et ici, mettons maintenant un

57
00:03:33,480 --> 00:03:37,370
‫commentaire visible dans notre html, en disant HEADER.

58
00:03:37,370 --> 00:03:41,070
‫D'accord, et donc en fait, c'est sans le tiret.

59
00:03:41,070 --> 00:03:44,020
‫Ainsi, dans le code VS, lorsque j'appuie sur le raccourci

60
00:03:44,020 --> 00:03:46,860
‫de commentaire, il crée automatiquement un commentaire Pug.

61
00:03:46,860 --> 00:03:49,320
‫Mais ici, je veux vraiment juste un

62
00:03:49,320 --> 00:03:51,833
‫commentaire, qui est également disponible dans la sortie html.

63
00:03:53,470 --> 00:03:56,690
‫Donc, de toute façon, créons maintenant l'élément d'en-tête et

64
00:03:56,690 --> 00:03:59,040
‫voyons ce que nous avons ici.

65
00:03:59,040 --> 00:04:02,120
‫Nous avons donc header avec la classe de header.

66
00:04:02,120 --> 00:04:04,680
‫Et tout ce que nous devons faire pour spécifier

67
00:04:04,680 --> 00:04:07,330
‫une classe, c'est DOT puis le nom de la classe.

68
00:04:07,330 --> 00:04:09,410
‫Alors, en-tête à nouveau.

69
00:04:09,410 --> 00:04:12,530
‫Ensuite, là-dedans, nous avons un élément nav.

70
00:04:12,530 --> 00:04:17,480
‫Et donc, indentation, puis nav. nav qui est à nouveau le nom

71
00:04:17,480 --> 00:04:19,537
‫de la classe, puis nous

72
00:04:19,537 --> 00:04:22,200
‫avons également un autre nom de classe, et

73
00:04:22,200 --> 00:04:23,880
‫donc, un autre point.

74
00:04:23,880 --> 00:04:24,713
‫Et c'est tout.

75
00:04:25,850 --> 00:04:28,550
‫Donc visites guidées.

76
00:04:28,550 --> 00:04:32,290
‫Donc, si vous connaissez un peu l'architecture CSS,

77
00:04:32,290 --> 00:04:35,620
‫vous voyez peut-être que j'utilise l'architecture BEM.

78
00:04:35,620 --> 00:04:37,660
‫Et donc, la navigation est le

79
00:04:37,660 --> 00:04:40,260
‫bloc et ici, ces visites sont un modificateur.

80
00:04:40,260 --> 00:04:42,500
‫Et ici, ce trait de soulignement signifie

81
00:04:42,500 --> 00:04:44,180
‫qu'il s'agit d'un bloc ou

82
00:04:44,180 --> 00:04:45,560
‫en fait d'un élément.

83
00:04:45,560 --> 00:04:49,293
‫Donc bloc, élément et modificateur.

84
00:04:50,160 --> 00:04:52,290
‫D'accord, donc ce n'est pas

85
00:04:52,290 --> 00:04:54,890
‫vraiment important, mais je voulais juste le mentionner.

86
00:04:54,890 --> 00:04:57,120
‫Quoi qu'il en soit, à l'intérieur de la

87
00:04:57,120 --> 00:04:59,270
‫navigation, nous avons un élément de lien.

88
00:04:59,270 --> 00:05:02,920
‫Donc, a, avec la classe de nav__el.

89
00:05:07,130 --> 00:05:10,330
‫Ensuite, ici, nous avons cet attribut href, et donc,

90
00:05:10,330 --> 00:05:12,973
‫rappelez-vous que nous utilisons des parenthèses, puis

91
00:05:14,230 --> 00:05:15,063
‫href,

92
00:05:16,930 --> 00:05:18,890
‫et le définissons sur rien.

93
00:05:18,890 --> 00:05:22,020
‫Donc, fondamentalement, c'est ce que signifie ce hachage ici.

94
00:05:22,020 --> 00:05:23,470
‫Et puis, simplement le contenu, donc

95
00:05:24,690 --> 00:05:25,673
‫toutes les tournées.

96
00:05:27,150 --> 00:05:29,450
‫Ensuite, nous avons ce formulaire ici, mais

97
00:05:29,450 --> 00:05:31,720
‫en fait, nous n'allons pas l'implémenter

98
00:05:31,720 --> 00:05:33,240
‫à ce stade.

99
00:05:33,240 --> 00:05:34,543
‫Alors débarrassons-nous en.

100
00:05:36,260 --> 00:05:39,090
‫Très bien et c'est donc notre navigation.

101
00:05:39,090 --> 00:05:41,230
‫Donc, ce code

102
00:05:41,230 --> 00:05:44,200
‫ici est fondamentalement équivalent à ceci.

103
00:05:44,200 --> 00:05:46,993
‫Et donc ensuite, nous avons ce logo d'en-tête.

104
00:05:48,730 --> 00:05:51,350
‫Donc, nouvelle ligne, mais un niveau en arrière,

105
00:05:51,350 --> 00:05:54,100
‫dans l'indentation pour que ce soit au même

106
00:05:54,100 --> 00:05:55,680
‫niveau que la navigation.

107
00:05:55,680 --> 00:05:58,930
‫Donc, tout comme c'est ici, à droite.

108
00:05:58,930 --> 00:05:59,980
‫Maintenant, quand c'est

109
00:05:59,980 --> 00:06:04,980
‫un div, nous n'avons même pas besoin de dire div. headerlogo, dans ce cas.

110
00:06:07,150 --> 00:06:08,350
‫Ainsi, lorsqu'il s'agit

111
00:06:08,350 --> 00:06:11,820
‫d'un div, qui est en quelque sorte l'élément de bloc standard en

112
00:06:11,820 --> 00:06:13,980
‫html, tout ce dont nous avons besoin

113
00:06:13,980 --> 00:06:16,873
‫est le point et cela créera automatiquement un élément div.

114
00:06:18,930 --> 00:06:20,713
‫Ensuite, là-dedans, nous avons cette

115
00:06:22,030 --> 00:06:24,980
‫image, et cela nécessite bien sûr quelques attributs, qui

116
00:06:24,980 --> 00:06:26,693
‫sont d'abord la source.

117
00:06:27,560 --> 00:06:31,937
‫Donc image, logo, blanc. png, puis aussi

118
00:06:33,850 --> 00:06:36,433
‫le texte alternatif, d'accord.

119
00:06:40,910 --> 00:06:44,690
‫Ensuite, nous avons cette autre navigation ici, et encore une

120
00:06:44,690 --> 00:06:46,820
‫fois, c'est au même niveau

121
00:06:46,820 --> 00:06:49,293
‫que la première navigation et cette div.

122
00:06:51,030 --> 00:06:53,750
‫Revenez donc à un niveau dans

123
00:06:53,750 --> 00:06:57,680
‫l'indentation et créez un nouvel élément de navigation avec la

124
00:06:57,680 --> 00:07:00,763
‫classe nav et la classe nav user.

125
00:07:02,120 --> 00:07:03,950
‫Ensuite, là-dedans, il y a

126
00:07:03,950 --> 00:07:05,130
‫un lien,

127
00:07:05,130 --> 00:07:09,160
‫très similaire à celui-ci, alors copions-le simplement pour gagner du temps.

128
00:07:09,160 --> 00:07:11,293
‫Et puis ici, c'est écrit, Mes réservations.

129
00:07:16,170 --> 00:07:20,470
‫Puis un autre, et en fait, copions-le à nouveau avec la différence

130
00:07:20,470 --> 00:07:23,380
‫qu'il n'a pas ce contenu, mais à

131
00:07:23,380 --> 00:07:27,070
‫la place il a un peu plus de contenu à l'intérieur.

132
00:07:27,070 --> 00:07:28,470
‫Donc ça.

133
00:07:28,470 --> 00:07:30,023
‫Donc, très facile encore, image, avec

134
00:07:31,170 --> 00:07:33,633
‫la source, . jpg.

135
00:07:42,100 --> 00:07:43,853
‫Et il a aussi un

136
00:07:45,060 --> 00:07:47,420
‫nom de classe, alors modifions ici avec le point.

137
00:07:47,420 --> 00:07:51,713
‫Donc, nav, image de l'utilisateur.

138
00:07:53,290 --> 00:07:56,810
‫Et puis simplement un span disant Jonas.

139
00:07:56,810 --> 00:07:58,120
‫Et, comme vous

140
00:07:58,120 --> 00:08:00,960
‫pouvez le voir, ce sera en fait la partie

141
00:08:00,960 --> 00:08:02,350
‫dynamique de cet en-tête.

142
00:08:02,350 --> 00:08:05,000
‫Et donc en fait, tout cela ici deviendra

143
00:08:05,000 --> 00:08:06,675
‫un point au début.

144
00:08:06,675 --> 00:08:11,675
‫D'accord, mais de toute façon, finissons maintenant de coder cette partie ici.

145
00:08:13,160 --> 00:08:14,620
‫Donc en gros, ces deux

146
00:08:14,620 --> 00:08:17,520
‫boutons, donc le bouton de connexion et le bouton d'inscription.

147
00:08:17,520 --> 00:08:20,120
‫Donc, bien sûr, vous n'aurez pas le

148
00:08:20,120 --> 00:08:22,920
‫bouton de connexion et le bouton d'inscription en

149
00:08:22,920 --> 00:08:25,680
‫même temps pour avoir cette navigation utilisateur ici.

150
00:08:25,680 --> 00:08:29,590
‫Donc mes réservations et ensuite le nom de l'utilisateur, d'accord.

151
00:08:29,590 --> 00:08:32,250
‫Mais encore une fois, mettons cela ici pour le moment,

152
00:08:32,250 --> 00:08:34,553
‫puis commentons ce dont nous n'avons pas besoin.

153
00:08:36,860 --> 00:08:41,860
‫Donc, bouton, élément de navigation, et également élément de

154
00:08:44,440 --> 00:08:49,043
‫navigation, puis le modificateur cta pour l'inscription.

155
00:08:50,290 --> 00:08:54,847
‫Et en fait, il y en a aussi un avant cela pour la connexion, n'est-ce pas.

156
00:08:56,850 --> 00:08:58,837
‫Alors, c'est celui-ci.

157
00:09:03,010 --> 00:09:05,730
‫D'accord et c'est en fait ça.

158
00:09:05,730 --> 00:09:06,940
‫C'est donc l'en-tête,

159
00:09:06,940 --> 00:09:09,010
‫et vous voyez que ce code

160
00:09:09,010 --> 00:09:12,550
‫ici est équivalent à tout ce que nous avons ici

161
00:09:12,550 --> 00:09:15,070
‫qui semble beaucoup plus déroutant, si vous

162
00:09:15,070 --> 00:09:16,653
‫me demandez au moins.

163
00:09:18,010 --> 00:09:20,690
‫Alors, supprimez cela, et comme je l'ai

164
00:09:20,690 --> 00:09:22,920
‫dit, cette navigation utilisateur ici,

165
00:09:22,920 --> 00:09:25,200
‫cette partie ne sera disponible que

166
00:09:25,200 --> 00:09:27,010
‫lorsque quelqu'un sera connecté.

167
00:09:27,010 --> 00:09:30,123
‫Et donc pour l'instant, commentons complètement tout cela.

168
00:09:31,370 --> 00:09:36,370
‫Très bien, nous avons ensuite le contenu et ajoutons donc un autre commentaire ici

169
00:09:36,500 --> 00:09:38,350
‫et dans notre html,

170
00:09:42,130 --> 00:09:44,050
‫en fait tout ce que

171
00:09:44,050 --> 00:09:46,010
‫nous allons ajouter maintenant est

172
00:09:46,010 --> 00:09:49,350
‫cette section ici avec la classe de vue d'ensemble.

173
00:09:49,350 --> 00:09:51,430
‫Parce qu'alors, c'est là que nous avons

174
00:09:51,430 --> 00:09:53,160
‫toutes ces cartes de contenu,

175
00:09:53,160 --> 00:09:56,070
‫qui encore une fois, pour l'instant, nous n'y inclurons pas.

176
00:09:56,070 --> 00:09:57,400
‫Encore une fois, ce que

177
00:09:57,400 --> 00:09:59,623
‫nous faisons maintenant n'est vraiment qu'un squelette, pour ainsi dire.

178
00:10:00,729 --> 00:10:03,123
‫Très bien, donc section. Aperçu.

179
00:10:07,410 --> 00:10:08,243
‫Aperçu.

180
00:10:09,574 --> 00:10:12,500
‫Et pour l'instant, mettons simplement un h1 ici avec

181
00:10:12,500 --> 00:10:16,040
‫le nom de la tournée qui arrive en tant que variable.

182
00:10:16,040 --> 00:10:18,270
‫D'accord et bien sûr, cette

183
00:10:18,270 --> 00:10:22,103
‫section ici doit être au même niveau que cet en-tête, super.

184
00:10:24,130 --> 00:10:26,820
‫Il ne nous manque donc plus que le pied de page

185
00:10:26,820 --> 00:10:28,700
‫à la fin de la page.

186
00:10:28,700 --> 00:10:32,690
‫Alors allons-y et c'est parti.

187
00:10:32,690 --> 00:10:35,790
‫Prenons tout ça.

188
00:10:35,790 --> 00:10:38,040
‫Et cela devrait en fait être un élément de pied de

189
00:10:39,040 --> 00:10:40,393
‫page, pas seulement un div ordinaire.

190
00:10:45,510 --> 00:10:49,730
‫Donc un élément de pied de page avec la classe de pied de page, puis un

191
00:10:49,730 --> 00:10:52,573
‫div, avec la classe de logo de pied de page,

192
00:10:53,850 --> 00:10:57,493
‫et encore une fois, je n'ai même pas besoin de spécifier l'élément div.

193
00:10:58,870 --> 00:11:00,323
‫Ensuite, nous avons une image ici,. png et j'espère

194
00:11:07,917 --> 00:11:12,810
‫donc que taper tout cela par vous-même, à la main en gros,

195
00:11:12,810 --> 00:11:16,820
‫vous permettra de mieux comprendre comment tout cela fonctionne.

196
00:11:16,820 --> 00:11:20,030
‫D'accord, c'est donc alt et maintenant cette navigation de

197
00:11:20,030 --> 00:11:22,330
‫pied de page, donc une liste non

198
00:11:23,560 --> 00:11:26,520
‫ordonnée, et maintenant là-dedans, nous avons quelques éléments

199
00:11:26,520 --> 00:11:28,033
‫d'élément de liste.

200
00:11:31,260 --> 00:11:35,483
‫Alors listez l'élément, et puis là-dedans il y a un

201
00:11:36,580 --> 00:11:38,620
‫lien dans chacun d'eux.

202
00:11:38,620 --> 00:11:41,470
‫Donc, un avec le href de nulle part fondamentalement.

203
00:11:41,470 --> 00:11:46,470
‫Et puis, À propos de nous.

204
00:11:48,410 --> 00:11:51,490
‫Maintenant, ici dans cette situation, n'avoir besoin

205
00:11:51,490 --> 00:11:53,170
‫de cette ligne

206
00:11:53,170 --> 00:11:57,298
‫supplémentaire que pour spécifier ce li, n'est pas vraiment idéal.

207
00:11:57,298 --> 00:11:58,640
‫Et donc ce que

208
00:11:58,640 --> 00:12:00,010
‫nous pouvons faire ici, c'est

209
00:12:00,010 --> 00:12:03,310
‫d'utiliser un deux-points, comme celui-ci, puis de tout mettre sur la même ligne.

210
00:12:03,310 --> 00:12:05,840
‫Et donc cela fonctionnera toujours comme s'il y avait

211
00:12:05,840 --> 00:12:07,730
‫une nouvelle ligne avec une indentation,

212
00:12:07,730 --> 00:12:10,570
‫mais nous permettant fondamentalement de tout faire sur la même ligne.

213
00:12:10,570 --> 00:12:13,910
‫D'accord, alors pour une raison quelconque, la coloration

214
00:12:13,910 --> 00:12:15,810
‫syntaxique cesse de

215
00:12:15,810 --> 00:12:19,180
‫fonctionner, mais bon, ce n'est pas si important.

216
00:12:19,180 --> 00:12:21,343
‫Alors téléchargez les candidatures, devenez

217
00:12:22,910 --> 00:12:24,453
‫guide, métiers.

218
00:12:26,300 --> 00:12:29,873
‫Et c'est en fait ça.

219
00:12:39,630 --> 00:12:41,053
‫Ensuite, nous avons ce pied de

220
00:12:43,770 --> 00:12:46,520
‫page, le droit d'auteur, et donc ici, nous avons juste un tas de texte.

221
00:12:50,540 --> 00:12:53,100
‫Il précise donc le symbole

222
00:12:53,100 --> 00:12:56,943
‫du droit d'auteur ici, et c'est de Jonas Schmedtmann.

223
00:12:58,860 --> 00:13:02,670
‫Donc, c'est moi et comme dans tous mes autres cours,

224
00:13:02,670 --> 00:13:06,100
‫je veux que vous sachiez que vous êtes libre

225
00:13:06,100 --> 00:13:08,290
‫d'utiliser ce projet pour vous-même.

226
00:13:08,290 --> 00:13:11,120
‫Donc en gros pour le mettre dans votre portfolio ou pour

227
00:13:11,120 --> 00:13:13,550
‫montrer à qui vous voulez, que vous avez construit

228
00:13:13,550 --> 00:13:15,270
‫ce projet dans mon cours.

229
00:13:15,270 --> 00:13:18,630
‫Maintenant, ce que vous ne pouvez pas faire, c'est créer votre propre

230
00:13:18,630 --> 00:13:20,030
‫cours basé sur ce projet.

231
00:13:20,030 --> 00:13:23,310
‫Et c'est triste que je sois même obligé de le dire,

232
00:13:23,310 --> 00:13:25,970
‫mais bien sûr il y a eu des

233
00:13:25,970 --> 00:13:28,980
‫gens qui ont utilisé mon projet, essentiellement pour mettre des cours

234
00:13:28,980 --> 00:13:32,270
‫gratuits sur YouTube, où ils ont copié mes projets, un par un.

235
00:13:32,270 --> 00:13:35,410
‫D'accord, alors laissez-moi l'écrire ici.

236
00:13:35,410 --> 00:13:38,473
‫Pour vos propres besoins, sauf pour

237
00:13:42,160 --> 00:13:45,593
‫produire bien sûr, vos propres cours ou tutoriels.

238
00:13:49,850 --> 00:13:54,850
‫D'accord et c'est tout.

239
00:13:59,230 --> 00:14:01,213
‫Très bien, c'est

240
00:14:06,130 --> 00:14:09,500
‫donc la traduction du squelette que nous

241
00:14:10,990 --> 00:14:14,400
‫avons ici, à l'exception bien sûr du contenu.

242
00:14:14,400 --> 00:14:17,560
‫D'accord, nous n'avons plus besoin de ça.

243
00:14:17,560 --> 00:14:20,753
‫Et, juste pour finir, jetons un coup d'œil

244
00:14:21,960 --> 00:14:25,000
‫et en effet, voici notre contenu.

245
00:14:25,000 --> 00:14:27,640
‫Maintenant, ceci semble un peu déplacé parce que ce texte

246
00:14:27,640 --> 00:14:29,650
‫de copyright ici est si long.

247
00:14:29,650 --> 00:14:31,883
‫Donc, cette navigation de pied de page essentiellement.

248
00:14:33,950 --> 00:14:37,330
‫Mais puisqu'il s'agit d'un conteneur flexible, nous devrions

249
00:14:37,330 --> 00:14:39,540
‫pouvoir résoudre ce problème

250
00:14:39,540 --> 00:14:42,270
‫avec un contenu justifié, flex-end, pas celui-ci.

251
00:14:42,270 --> 00:14:47,270
‫D'accord, et ne vous inquiétez pas si vous n'êtes pas

252
00:14:48,660 --> 00:14:53,660
‫familier avec CSS, ou même Flexbox, il s'agit simplement

253
00:14:53,870 --> 00:14:56,180
‫de résoudre visuellement le

254
00:14:56,180 --> 00:15:00,200
‫petit problème que nous avons eu ici.

255
00:15:00,200 --> 00:15:01,050
‫Cherchons donc pied de page ici.

256
00:15:02,820 --> 00:15:04,723
‫Nous voilà.

257
00:15:08,590 --> 00:15:09,893
‫Corrigez cela ici, et

258
00:15:11,210 --> 00:15:12,303
‫si nous rechargeons

259
00:15:13,690 --> 00:15:15,790
‫maintenant, oui, alors nous sommes bons, parfaits.