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/es/_redirects.txt | 3 +- files/es/_wikihistory.json | 2 +- .../styling_a_biography_page/index.html | 101 +++++++++++++++++++++ .../using_your_new_knowledge/index.html | 101 --------------------- 4 files changed, 104 insertions(+), 103 deletions(-) create mode 100644 files/es/learn/css/first_steps/styling_a_biography_page/index.html delete mode 100644 files/es/learn/css/first_steps/using_your_new_knowledge/index.html (limited to 'files/es') diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index 7465e846fa..36353e53fe 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1114,7 +1114,8 @@ /es/docs/Learn/CSS/First_steps/Como_funciona_CSS /es/docs/Learn/CSS/First_steps/How_CSS_works /es/docs/Learn/CSS/First_steps/Como_se_estructura_CSS /es/docs/Learn/CSS/First_steps/How_CSS_is_structured /es/docs/Learn/CSS/First_steps/Qué_es_CSS /es/docs/Learn/CSS/First_steps/What_is_CSS -/es/docs/Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento /es/docs/Learn/CSS/First_steps/Using_your_new_knowledge +/es/docs/Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento /es/docs/Learn/CSS/First_steps/Styling_a_biography_page +/es/docs/Learn/CSS/First_steps/Using_your_new_knowledge /es/docs/Learn/CSS/First_steps/Styling_a_biography_page /es/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps /es/docs/Learn/CSS/Introduction_to_CSS/Cascada_y_herencia /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /es/docs/Learn/CSS/Introduction_to_CSS/Combinaciones_y_selectores_multiples /en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 7cbcbe886f..9767ca6830 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -2099,7 +2099,7 @@ "editorUOC" ] }, - "Learn/CSS/First_steps/Using_your_new_knowledge": { + "Learn/CSS/First_steps/Styling_a_biography_page": { "modified": "2020-08-23T19:45:30.596Z", "contributors": [ "capitanzealot", diff --git a/files/es/learn/css/first_steps/styling_a_biography_page/index.html b/files/es/learn/css/first_steps/styling_a_biography_page/index.html new file mode 100644 index 0000000000..b5a95600bd --- /dev/null +++ b/files/es/learn/css/first_steps/styling_a_biography_page/index.html @@ -0,0 +1,101 @@ +--- +title: Usa tu nuevo conocimiento +slug: Learn/CSS/First_steps/Styling_a_biography_page +tags: + - Aprendizaje + - CSS + - Principiante +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")}}

+ +

Con las cosas que has aprendido en las últimas lecciones, puedes darle formato a documentos de texto simple utilizando CSS para agregar tu propio estilo a ellos. Esta evaluación te da una posibilidad de hacer eso.

+ + + + + + + + + + + + +
Prerrequisitos:Antes de intentar esta evaluación, deberías haber trabajado a través del módulo de CSS básico, y también comprender HTML básico (estudia la Introducción a HTML).
Objetivo:Utilizar algún CSS y probar conocimiento recién adquirido.
+ +

Punto de partida

+ +

Puedes trabajar en el editor en vivo más abajo, o puedes descargar el punto de partida para trabajar con tu propio editor. Esta es una página HTML, con el inicio del CSS en el <head> del documento. Si prefieres, puedes mover este CSS a un archivo separado cuando crees el ejemplo en tu computador. Alternativamente, puedes usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.

+ +
+

Nota: Si te atascas, pide ayuda — mira la sección Evaluación o ayuda adicional al final de esta página.

+
+ +

Trabajando con CSS

+ +

Los siguientes ejemplos muestran una biografía, que ha sido estilizada usando CSS. Las propiedades CSS que se han utilizado son las siguientes - cada una enlaza a su página de propiedades en MDN, que te entregará más ejemplos de su uso:

+ + + +

Se ha usado una mezcla de selectores, elementos de estilo como <h1> y <h2>, y también una clase para el título del trabajo.

+ +

Usa CSS para cambiar el aspecto de esta biografía, cambiando los valores de las propiedades iniciales.

+ +
    +
  1. Coloca en rosado el nivel <h1>, usando el color CSS hotpink.
    2. +
  2. Da al encabezado un {{cssxref("border-bottom")}} de 10px con puntos (dotted), que use el color CSS purple.
    3. +
  3. Coloca en cursiva el <h2>.
    4. +
  4. Al ul utilizado para los detalles de contacto un  {{cssxref("background-color")}}  #eeeeee, y un {{cssxref("border")}} de 5px solid purple. Usa algo de {{cssxref("padding")}} para empujar el texto lejos del borde.
    5. +
  5. Cambia los enlaces a verde cuando pase el cursor sobre ellos.
    6. +
+ +

Deberías conseguir algo parecido a esta página:

+ +

Screenshot of how the example should look after completing the assessment.

+ +

Posteriormente intenta buscar algunas propiedades no mencionadas en esta página en la referencia de CSS de MDN y ¡arriésgate!.

+ +

Recuerda que no existen respuestas equivocadas acá - En esta etapa en tu aprendizaje puedes tener un poco de diversión.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

+ +

Evaluación o ayuda adicional

+ +

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

+ +
    +
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch.
    2. +
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: +
      +
    • Un título descriptivo como "Requiero evaluacion para Primeros pasos en CSS".
      • +
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • +
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • +
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • +
    +
    3. +
+ +

¿Qué sigue?

+ +

Felicitaciones por completar este primer modulo!. Deberías tener un buen entendimiento general de CSS, y ser capaz de comprender bastante de los que está sucediendo en una hoja de estilo. En el módulo siguiente, bloques de construccion CSS, revisaremos en profundidad algunas áreas clave.

+ +

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

En este módulo

+ +
    +
  1. ¿Qué es CSS?
    2. +
  2. Empezando con CSS
    3. +
  3. Cómo se estructura el CSS
    4. +
  4. Cómo funciona CSS
    5. +
  5. Usa tu nuevo conocimiento
    6. +
diff --git a/files/es/learn/css/first_steps/using_your_new_knowledge/index.html b/files/es/learn/css/first_steps/using_your_new_knowledge/index.html deleted file mode 100644 index 927a5798b8..0000000000 --- a/files/es/learn/css/first_steps/using_your_new_knowledge/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Usa tu nuevo conocimiento -slug: Learn/CSS/First_steps/Using_your_new_knowledge -tags: - - Aprendizaje - - CSS - - Principiante -translation_of: Learn/CSS/First_steps/Using_your_new_knowledge -original_slug: Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento ---- -

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

Con las cosas que has aprendido en las últimas lecciones, puedes darle formato a documentos de texto simple utilizando CSS para agregar tu propio estilo a ellos. Esta evaluación te da una posibilidad de hacer eso.

- - - - - - - - - - - - -
Prerrequisitos:Antes de intentar esta evaluación, deberías haber trabajado a través del módulo de CSS básico, y también comprender HTML básico (estudia la Introducción a HTML).
Objetivo:Utilizar algún CSS y probar conocimiento recién adquirido.
- -

Punto de partida

- -

Puedes trabajar en el editor en vivo más abajo, o puedes descargar el punto de partida para trabajar con tu propio editor. Esta es una página HTML, con el inicio del CSS en el <head> del documento. Si prefieres, puedes mover este CSS a un archivo separado cuando crees el ejemplo en tu computador. Alternativamente, puedes usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.

- -
-

Nota: Si te atascas, pide ayuda — mira la sección Evaluación o ayuda adicional al final de esta página.

-
- -

Trabajando con CSS

- -

Los siguientes ejemplos muestran una biografía, que ha sido estilizada usando CSS. Las propiedades CSS que se han utilizado son las siguientes - cada una enlaza a su página de propiedades en MDN, que te entregará más ejemplos de su uso:

- - - -

Se ha usado una mezcla de selectores, elementos de estilo como <h1> y <h2>, y también una clase para el título del trabajo.

- -

Usa CSS para cambiar el aspecto de esta biografía, cambiando los valores de las propiedades iniciales.

- -
    -
  1. Coloca en rosado el nivel <h1>, usando el color CSS hotpink.
    2. -
  2. Da al encabezado un {{cssxref("border-bottom")}} de 10px con puntos (dotted), que use el color CSS purple.
    3. -
  3. Coloca en cursiva el <h2>.
    4. -
  4. Al ul utilizado para los detalles de contacto un  {{cssxref("background-color")}}  #eeeeee, y un {{cssxref("border")}} de 5px solid purple. Usa algo de {{cssxref("padding")}} para empujar el texto lejos del borde.
    5. -
  5. Cambia los enlaces a verde cuando pase el cursor sobre ellos.
    6. -
- -

Deberías conseguir algo parecido a esta página:

- -

Screenshot of how the example should look after completing the assessment.

- -

Posteriormente intenta buscar algunas propiedades no mencionadas en esta página en la referencia de CSS de MDN y ¡arriésgate!.

- -

Recuerda que no existen respuestas equivocadas acá - En esta etapa en tu aprendizaje puedes tener un poco de diversión.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

- -

Evaluación o ayuda adicional

- -

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

- -
    -
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch.
    2. -
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: -
      -
    • Un título descriptivo como "Requiero evaluacion para Primeros pasos en CSS".
      • -
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • -
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • -
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • -
    -
    3. -
- -

¿Qué sigue?

- -

Felicitaciones por completar este primer modulo!. Deberías tener un buen entendimiento general de CSS, y ser capaz de comprender bastante de los que está sucediendo en una hoja de estilo. En el módulo siguiente, bloques de construccion CSS, revisaremos en profundidad algunas áreas clave.

- -

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

En este módulo

- -
    -
  1. ¿Qué es CSS?
    2. -
  2. Empezando con CSS
    3. -
  3. Cómo se estructura el CSS
    4. -
  4. Cómo funciona CSS
    5. -
  5. Usa tu nuevo conocimiento
    6. -
-- cgit v1.2.3-54-g00ecf