From c32682b053bad2602a8c910cc7e4106acaefade1 Mon Sep 17 00:00:00 2001 From: MDN Date: Fri, 18 Mar 2022 00:13:02 +0000 Subject: [CRON] sync translated content --- files/fr/_redirects.txt | 1 + files/fr/_wikihistory.json | 2 +- .../first_steps/styling_a_biography_page/index.md | 100 +++++++++++++++++++++ .../first_steps/using_your_new_knowledge/index.md | 99 -------------------- 4 files changed, 102 insertions(+), 100 deletions(-) create mode 100644 files/fr/learn/css/first_steps/styling_a_biography_page/index.md delete mode 100644 files/fr/learn/css/first_steps/using_your_new_knowledge/index.md (limited to 'files/fr') diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index a8bf44313e..8b9a1db89b 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -2997,6 +2997,7 @@ /fr/docs/Le_principe_de_fermeture_en_JavaScript:Résolution_d'identifiants,_contextes_d'exécution_et_visibilité_des_variables /fr/docs/Web/JavaScript/Closures /fr/docs/Le_principe_de_fermeture_en_JavaScript:Utilisation_des_fermetures /fr/docs/Web/JavaScript/Closures /fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS /fr/docs/Learn/CSS/First_steps/What_is_CSS +/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge /fr/docs/Learn/CSS/First_steps/Styling_a_biography_page /fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens /fr/docs/Learn/CSS/Styling_text/Styling_links /fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte /fr/docs/Learn/CSS/Styling_text/Fundamentals /fr/docs/Learn/Index /fr/docs/conflicting/Learn diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index 2f7310066a..fe0a8da655 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -3950,7 +3950,7 @@ "smeden-lod" ] }, - "Learn/CSS/First_steps/Using_your_new_knowledge": { + "Learn/CSS/First_steps/Styling_a_biography_page": { "modified": "2020-07-16T22:28:03.815Z", "contributors": [ "SphinxKnight", diff --git a/files/fr/learn/css/first_steps/styling_a_biography_page/index.md b/files/fr/learn/css/first_steps/styling_a_biography_page/index.md new file mode 100644 index 0000000000..808c1ee711 --- /dev/null +++ b/files/fr/learn/css/first_steps/styling_a_biography_page/index.md @@ -0,0 +1,100 @@ +--- +title: Mettre en œuvre vos connaissances +slug: Learn/CSS/First_steps/Styling_a_biography_page +tags: + - Apprendre + - CSS + - Débutant + - Playground +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +original_slug: Learn/CSS/First_steps/Using_your_new_knowledge +--- +{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}} + +Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS. + + + + + + + + + + + + +
Prérequis : + Avant de vous soumettre à cette évaluation, vous avez suivi le module + sur les bases de CSS ; vous maîtrisez par ailleurs les bases de HTML + (cf. Introduction à HTML). +
Objectif :Tester vos connaissances en mettant à l'œuvre CSS.
+ +## Point de départ + +Vous pouvez travailler dans l'éditeur ci-dessous ou [télécharger le point de départ](https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/) pour travailler en local sur votre machine, avec votre propre éditeur de code. Ce point de départ est une page HTML avec le CSS interne écrit dans la section ``. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), ou [Glitch](https://glitch.com/) pour travailler sur les tâches proposées. + +> **Note :** ne restez pas coincé, appelez à l'aide — voir la section [Evaluation et comment obtenir de l'aide](#evaluation) au bas de cette page. + +## Travailler avec CSS + +L'exemple ci-dessous propose de retravailler la mise en forme d'une biographie stylée avec CSS. Les propriétés utilisées sont les suivantes — chacune renvoie vers sa page MDN pour plus d'exemples d'usages : + +- {{cssxref("font-family")}} +- {{cssxref("color")}} +- {{cssxref("border-bottom")}} +- {{cssxref("font-weight")}} +- {{cssxref("font-size")}} +- {{cssxref("text-decoration")}} + +J'ai utilisé un mélange de sélecteurs, d'éléments HTML comme `h1` et `h2` ; j'ai aussi créé une classe `job-title`. + +Utilisez CSS pour changer l'apparence de cette biographie en modifiant les valeurs des propriétés CSS utilisées : + +1. Affichez le titre de niveau 1 en `hotpink` ; +2. Donnez au titre un {{cssxref("border-bottom")}} de `10px dotted` de couleur `purple` ; +3. Affichez le titre de niveau 2 en italique ; +4. Colorez la `ul` des détails de contacts en {{cssxref("background-color")}} `#eeeeee`, avec un {{cssxref("border")}} de `5px solid purple`. Utilisez la propriété {{cssxref("padding")}} pour éloigner le contenu du bord. +5. Faites que les liens apparaissent en `green` lors d'un survol du curseur. + +Vous devriez obtenir un rendu qui ressemble à cela : + +![Screenshot of how the example should look after completing the assessment.](learn-css-basics-assessment.png) + +Une fois cette tâche accomplie, n'hésitez pas à explorer des propriétés rencontrées dans la [référence CSS sur MDN](/fr/docs/Web/CSS/Reference) ! + +À ce stade, il n'y a pas de réponse incorrecte — autorisez vous un peu de fantaisie. + +{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} + +## Evaluation ou compléments d'information + +Si vous voulez une évaluation de votre travail, ou si vous êtes coincé et recherchez de l'aide : + +1. Publiez votre code dans un éditeur en ligne tel [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). +2. Si vous êtes à l'aise en anglais : + + 1. Dans le [forum MDN Discourse](https://discourse.mozilla.org/c/mdn), écrivez un billet pour évaluation et/ou demande d'aide. Ajouter le tag "learning" à votre post pour que nous puissions le trouver plus facilement. Votre post devrait contenir : + + - Un titre parlant comme "Assessment wanted for CSS First Steps". + - Des détails sur ce que vous voudriez que l'on fasse — par exemple, ce que vous avez déjà essayé si vous êtes coincé et demandez de l'aide. + - Un lien vers l'exemple dans l'éditeur en ligne, sur lequel vous demandez une évaluation ou de l'aide : voilà une bonne pratique — il n'est pas commode d'aider quelqu'un coincé sur son code quand on ne peut pas voir ce code... + - Un lien vers cette page d'évaluation afin que nous puissions voir la question sur laquelle vous demandez de l'aide. + +3. Sinon, n'hésitez pas à contacter @MDNfr sur Twitter. + +## La suite ? + +Bravo, vous avez suivi ce cours jusqu'au bout. Avec votre connaissance de CSS, vous comprenez maintenant le fonctionnement d'une feuille de style. Dans le prochain cours, [construire des blocs CSS](/fr/docs/Apprendre/CSS/Building_blocks), nous approfondirons de nombreux points. + +{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Apprendre/CSS/Premiers_pas")}} + +## Dans ce cours + +1. [Qu'est-ce que CSS ?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) +2. [Commencer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +3. [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) +4. [CSS, comment ça marche ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Mettez en œuvre vos connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md deleted file mode 100644 index c24d68d80b..0000000000 --- a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Mettre en œuvre vos connaissances -slug: Learn/CSS/First_steps/Using_your_new_knowledge -tags: - - Apprendre - - CSS - - Débutant - - Playground -translation_of: Learn/CSS/First_steps/Using_your_new_knowledge ---- -{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}} - -Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS. - - - - - - - - - - - - -
Prérequis : - Avant de vous soumettre à cette évaluation, vous avez suivi le module - sur les bases de CSS ; vous maîtrisez par ailleurs les bases de HTML - (cf. Introduction à HTML). -
Objectif :Tester vos connaissances en mettant à l'œuvre CSS.
- -## Point de départ - -Vous pouvez travailler dans l'éditeur ci-dessous ou [télécharger le point de départ](https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/) pour travailler en local sur votre machine, avec votre propre éditeur de code. Ce point de départ est une page HTML avec le CSS interne écrit dans la section ``. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), ou [Glitch](https://glitch.com/) pour travailler sur les tâches proposées. - -> **Note :** ne restez pas coincé, appelez à l'aide — voir la section [Evaluation et comment obtenir de l'aide](#evaluation) au bas de cette page. - -## Travailler avec CSS - -L'exemple ci-dessous propose de retravailler la mise en forme d'une biographie stylée avec CSS. Les propriétés utilisées sont les suivantes — chacune renvoie vers sa page MDN pour plus d'exemples d'usages : - -- {{cssxref("font-family")}} -- {{cssxref("color")}} -- {{cssxref("border-bottom")}} -- {{cssxref("font-weight")}} -- {{cssxref("font-size")}} -- {{cssxref("text-decoration")}} - -J'ai utilisé un mélange de sélecteurs, d'éléments HTML comme `h1` et `h2` ; j'ai aussi créé une classe `job-title`. - -Utilisez CSS pour changer l'apparence de cette biographie en modifiant les valeurs des propriétés CSS utilisées : - -1. Affichez le titre de niveau 1 en `hotpink` ; -2. Donnez au titre un {{cssxref("border-bottom")}} de `10px dotted` de couleur `purple` ; -3. Affichez le titre de niveau 2 en italique ; -4. Colorez la `ul` des détails de contacts en {{cssxref("background-color")}} `#eeeeee`, avec un {{cssxref("border")}} de `5px solid purple`. Utilisez la propriété {{cssxref("padding")}} pour éloigner le contenu du bord. -5. Faites que les liens apparaissent en `green` lors d'un survol du curseur. - -Vous devriez obtenir un rendu qui ressemble à cela : - -![Screenshot of how the example should look after completing the assessment.](learn-css-basics-assessment.png) - -Une fois cette tâche accomplie, n'hésitez pas à explorer des propriétés rencontrées dans la [référence CSS sur MDN](/fr/docs/Web/CSS/Reference) ! - -À ce stade, il n'y a pas de réponse incorrecte — autorisez vous un peu de fantaisie. - -{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} - -## Evaluation ou compléments d'information - -Si vous voulez une évaluation de votre travail, ou si vous êtes coincé et recherchez de l'aide : - -1. Publiez votre code dans un éditeur en ligne tel [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). -2. Si vous êtes à l'aise en anglais : - - 1. Dans le [forum MDN Discourse](https://discourse.mozilla.org/c/mdn), écrivez un billet pour évaluation et/ou demande d'aide. Ajouter le tag "learning" à votre post pour que nous puissions le trouver plus facilement. Votre post devrait contenir : - - - Un titre parlant comme "Assessment wanted for CSS First Steps". - - Des détails sur ce que vous voudriez que l'on fasse — par exemple, ce que vous avez déjà essayé si vous êtes coincé et demandez de l'aide. - - Un lien vers l'exemple dans l'éditeur en ligne, sur lequel vous demandez une évaluation ou de l'aide : voilà une bonne pratique — il n'est pas commode d'aider quelqu'un coincé sur son code quand on ne peut pas voir ce code... - - Un lien vers cette page d'évaluation afin que nous puissions voir la question sur laquelle vous demandez de l'aide. - -3. Sinon, n'hésitez pas à contacter @MDNfr sur Twitter. - -## La suite ? - -Bravo, vous avez suivi ce cours jusqu'au bout. Avec votre connaissance de CSS, vous comprenez maintenant le fonctionnement d'une feuille de style. Dans le prochain cours, [construire des blocs CSS](/fr/docs/Apprendre/CSS/Building_blocks), nous approfondirons de nombreux points. - -{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Apprendre/CSS/Premiers_pas")}} - -## Dans ce cours - -1. [Qu'est-ce que CSS ?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) -2. [Commencer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) -3. [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) -4. [CSS, comment ça marche ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) -5. [Mettez en œuvre vos connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) -- cgit v1.2.3-54-g00ecf