diff --git a/.github/ISSUE_TEMPLATE/bug-report--software-issue-in-learning-platform.md b/.github/ISSUE_TEMPLATE/bug-report--software-issue-in-learning-platform.md index d56fa178f5..551f1b2802 100644 --- a/.github/ISSUE_TEMPLATE/bug-report--software-issue-in-learning-platform.md +++ b/.github/ISSUE_TEMPLATE/bug-report--software-issue-in-learning-platform.md @@ -6,7 +6,7 @@ about: Reporting a software bug, in learning platform (not for content in guide --- **Looking forward for reporting a security issue:** -Please report security issues by sending an email to `security@freecodecamp.org` instead of raising a Github issue. +Please report security issues by sending an email to `security@freecodecamp.org` instead of raising a GitHub issue. **Describe the bug** A clear and concise description of what the bug is. diff --git a/curriculum/challenges/english/06-information-security-and-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.english.md b/curriculum/challenges/english/06-information-security-and-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.english.md index ab9bf3e2e1..5d60b78807 100644 --- a/curriculum/challenges/english/06-information-security-and-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.english.md +++ b/curriculum/challenges/english/06-information-security-and-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.english.md @@ -7,8 +7,8 @@ challengeType: 2 ## Description
As a reminder, this project is being built upon the following starter project on Glitch, or cloned from GitHub. -The last part of setting up your Github authentication is to create the strategy itself. For this, you will need to add the dependency of 'passport-github' to your project and require it as GithubStrategy like const GitHubStrategy = require('passport-github').Strategy;. -To set up the Github strategy, you have to tell passport to use an instantiated GithubStrategy, which accepts 2 arguments: An object (containing clientID, clientSecret, and callbackURL) and a function to be called when a user is successfully authenticated which we will determine if the user is new and what fields to save initially in the user's database object. This is common across many strategies but some may require more information as outlined in that specific strategy's github README; for example, Google requires a scope as well which determines what kind of information your request is asking returned and asks the user to approve such access. The current strategy we are implementing has its usage outlined here, but we're going through it all right here on freeCodeCamp! +The last part of setting up your GitHub authentication is to create the strategy itself. For this, you will need to add the dependency of 'passport-github' to your project and require it as GithubStrategy like const GitHubStrategy = require('passport-github').Strategy;. +To set up the GitHub strategy, you have to tell passport to use an instantiated GitHubStrategy, which accepts 2 arguments: An object (containing clientID, clientSecret, and callbackURL) and a function to be called when a user is successfully authenticated which we will determine if the user is new and what fields to save initially in the user's database object. This is common across many strategies but some may require more information as outlined in that specific strategy's github README; for example, Google requires a scope as well which determines what kind of information your request is asking returned and asks the user to approve such access. The current strategy we are implementing has its usage outlined here, but we're going through it all right here on freeCodeCamp! Here's how your new strategy should look at this point: 
passport.use(new GitHubStrategy({
     clientID: process.env.GITHUB_CLIENT_ID,
     clientSecret: process.env.GITHUB_CLIENT_SECRET,
@@ -19,7 +19,7 @@ Here's how your new strategy should look at this point: 
passport.use(new Gi
       //Database logic here with callback containing our user object
   }
 ));

-Your authentication won't be successful yet, and actually throw an error, without the database logic and callback, but it should log to your console your Github profile if you try it!
+Your authentication won't be successful yet, and actually throw an error, without the database logic and callback, but it should log to your console your GitHub profile if you try it!
 Submit your page when you think you've got it right.
diff --git a/curriculum/challenges/english/06-information-security-and-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.english.md b/curriculum/challenges/english/06-information-security-and-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.english.md index af53b22710..e563b3aa3b 100644 --- a/curriculum/challenges/english/06-information-security-and-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.english.md +++ b/curriculum/challenges/english/06-information-security-and-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.english.md @@ -7,7 +7,7 @@ challengeType: 2 ## Description
As a reminder, this project is being built upon the following starter project on Glitch, or cloned from GitHub. -The final part of the strategy is handling the profile returned from Github. We need to load the users database object if it exists or create one if it doesn't and populate the fields from the profile, then return the user's object. Github supplies us a unique id within each profile which we can use to search with to serialize the user with (already implemented). Below is an example implementation you can use in your project- it goes within the function that is the second argument for the new strategy, right below the console.log(profile); currently is: +The final part of the strategy is handling the profile returned from GitHub. We need to load the user's database object if it exists, or create one if it doesn't, and populate the fields from the profile, then return the user's object. GitHub supplies us a unique id within each profile which we can use to search with to serialize the user with (already implemented). Below is an example implementation you can use in your project- it goes within the function that is the second argument for the new strategy, right below the console.log(profile); currently is: 
db.collection('socialusers').findAndModify(
     {id: profile.id},
     {},
@@ -28,7 +28,7 @@ The final part of the strategy is handling the profile returned from Github. We
         return cb(null, doc.value);
     }
 );
-With a findAndModify, it allows you to search for an object and update it, as well as upsert the object if it doesn't exist and receive the new object back each time in our callback function. In this example, we always set the last_login as now, we always increment the login_count by 1, and only when we insert a new object(new user) do we populate the majority of the fields. Something to notice also is the use of default values. Sometimes a profile returned won't have all the information filled out or it will have been chosen by the user to remain private; so in this case we have to handle it to prevent an error. +With a findAndModify, it allows you to search for an object and update it, as well as insert the object if it doesn't exist and receive the new object back each time in our callback function. In this example, we always set the last_login as now, we always increment the login_count by 1, and only when we insert a new object(new user) do we populate the majority of the fields. Something to notice also is the use of default values. Sometimes a profile returned won't have all the information filled out or it will have been chosen by the user to remain private; so in this case we have to handle it to prevent an error. You should be able to login to your app now- try it! Submit your page when you think you've got it right. If you're running into errors, you can check out an example of this mini-project's finished code here.
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.spanish.md index 7935edfca6..cbb79f2dfd 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.spanish.md @@ -7,13 +7,13 @@ videoUrl: '' localeTitle: Agregar un margen negativo a un elemento --- -## Description +## Descripción
El margin es una propiedad que controla la cantidad de espacio entre el border de un elemento y los elementos circundantes. Si establece el margin en un valor negativo, el elemento aumentará de tamaño.
-## Instructions +## Instrucciones
Intente establecer el margin en un valor negativo como el del cuadro rojo. Cambie el margin del cuadro azul a -15px , para que llene todo el ancho horizontal del cuadro amarillo que lo rodea.
-## Tests +## Pruebas
```yml @@ -77,7 +77,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-borders-around-your-elements.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-borders-around-your-elements.spanish.md index 9f167d1dbe..71a295a2c7 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-borders-around-your-elements.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-borders-around-your-elements.spanish.md @@ -7,13 +7,13 @@ videoUrl: '' localeTitle: Añadir bordes alrededor de sus elementos --- -## Description -
Los bordes CSS tienen propiedades como style , color y width.
Por ejemplo, si quisiéramos crear un borde rojo de 5 píxeles alrededor de un elemento HTML, podríamos usar esta clase:
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
+## Descripción +
Los bordes CSS tienen propiedades como style , color y width Por ejemplo, si quisiéramos crear un borde rojo de 5 píxeles alrededor de un elemento HTML, podríamos usar esta clase:
<estilo>
.thin-red-border {
color del borde: rojo;
ancho del borde: 5px;
estilo de borde: sólido;
}
</style>
-## Instructions +## Instrucciones
Crea una clase llamada thick-green-border . Esta clase debe agregar un borde verde sólido de 10 px alrededor de un elemento HTML. Aplica la clase a tu foto de gato. Recuerde que puede aplicar varias clases a un elemento utilizando su atributo de class , separando cada nombre de clase con un espacio. Por ejemplo: <img class="class1 class2">
-## Tests +## Pruebas
```yml @@ -61,33 +61,34 @@ tests:

CatPhotoApp

-

Click here to view more cat photos.

+

Haga clic aquí para ver más fotos de gatos.

+ A cute orange cat lying on its back.
-

Things cats love:

+

Cosas que los gatos aman:

    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • +
  • pellizco de gato
    • +
  • punteros laser
    • +
  • lasaña
-

Top 3 things cats hate:

+

3 cosas que odian los gatos:

    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. +
  4. tratamiento de pulgas
    5. +
  5. trueno
    6. +
  6. otros gatos
- -
- - -
+ +
+ + +
- +
@@ -99,7 +100,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.spanish.md index 81b3bc30df..3d34598bce 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Añadir diferentes márgenes a cada lado de un elemento --- -## Description +## Descripción
A veces querrá personalizar un elemento para que tenga un margin diferente en cada uno de sus lados. CSS le permite controlar el margin de los cuatro lados individuales de un elemento con las propiedades margin-top , margin-right , margin-bottom y margin-left .
-## Instructions +## Instrucciones
Dé a la caja azul un margin de 40px en su lado superior e izquierdo, pero solo 20px en su lado inferior y derecho.
-## Tests +## Pruebas
```yml @@ -83,7 +83,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.spanish.md index 3528b32e97..4f7a966be7 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.spanish.md @@ -7,13 +7,13 @@ videoUrl: '' localeTitle: Añadir diferente relleno a cada lado de un elemento --- -## Description +## Descripción
A veces querrá personalizar un elemento para que tenga diferentes cantidades de padding en cada uno de sus lados. CSS le permite controlar el padding de los cuatro lados individuales de un elemento con las propiedades padding-top , padding-right , padding-bottom y padding-left .
-## Instructions +## Instrucciones
Dale a la caja azul un padding de 40px en su lado superior e izquierdo, pero solo 20px en su lado inferior y derecho.
-## Tests +## Pruebas
```yml @@ -84,7 +84,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.spanish.md index 5aefe65ec5..42bb2a07f7 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.spanish.md @@ -7,13 +7,13 @@ videoUrl: '' localeTitle: Añadir esquinas redondeadas con radio de borde --- -## Description +## Descripción
Tu foto de gato tiene actualmente esquinas afiladas. Podemos redondear esas esquinas con una propiedad CSS llamada border-radius .
-## Instructions +## Instrucciones
Puede especificar un border-radius con píxeles. Dale a tu foto de gato un border-radius de 10px de 10px . Nota: este desafío permite múltiples soluciones posibles. Por ejemplo, puede agregar border-radius .thick-green-border clase .thick-green-border o a la clase .smaller-image .
-## Tests +## Pruebas
```yml @@ -61,33 +61,33 @@ tests:

CatPhotoApp

-

Click here to view more cat photos.

+

Haga clic aquí para ver más fotos de gatos.

A cute orange cat lying on its back.
-

Things cats love:

+

Cosas que los gatos aman:

    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • +
  • pellizco de gato
    • +
  • punteros laser
    • +
  • lasaña
-

Top 3 things cats hate:

+

3 cosas que odian los gatos:

    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. +
  4. tratamiento de pulgas
    5. +
  5. trueno
    6. +
  6. otros gatos
- -
- - -
+ +
+ + +
- +
@@ -99,7 +99,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.spanish.md index 5d15f76977..9c46e655a0 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.spanish.md @@ -7,13 +7,13 @@ videoUrl: '' localeTitle: Ajustar el margen de un elemento --- -## Description +## Descripción
El margin un elemento controla la cantidad de espacio entre el border un elemento y los elementos circundantes. Aquí, podemos ver que el cuadro azul y el cuadro rojo están anidados dentro del cuadro amarillo. Tenga en cuenta que el cuadro rojo tiene un margin más margin que el cuadro azul, lo que hace que parezca más pequeño. Cuando aumente el margin del cuadro azul, aumentará la distancia entre su borde y los elementos circundantes.
-## Instructions +## Instrucciones
Cambie el margin del cuadro azul para que coincida con el del cuadro rojo.
-## Tests +## Pruebas
```yml @@ -78,7 +78,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.spanish.md index 2d1d40af67..40e872f5cf 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.spanish.md @@ -7,13 +7,13 @@ videoUrl: '' localeTitle: Ajustar el relleno de un elemento --- -## Description +## Descripción
Ahora vamos a guardar nuestra aplicación Cat Photo por un tiempo y aprender más sobre el estilo de HTML. Es posible que ya hayas notado esto, pero todos los elementos HTML son esencialmente pequeños rectángulos. Tres propiedades importantes controlan el espacio que rodea a cada elemento HTML: padding , margin y border . El padding un elemento controla la cantidad de espacio entre el contenido del elemento y su border . Aquí, podemos ver que el cuadro azul y el cuadro rojo están anidados dentro del cuadro amarillo. Tenga en cuenta que el cuadro rojo tiene más padding que el cuadro azul. Cuando aumente el padding del cuadro azul, aumentará la distancia ( padding ) entre el texto y el borde que lo rodea.
-## Instructions +## Instrucciones
Cambie el padding de su caja azul para que coincida con el de su caja roja.
-## Tests +## Pruebas
```yml @@ -76,7 +76,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.spanish.md index 205e6a8e5f..b712284cee 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Adjuntar un valor de reserva a una variable CSS --- -## Description +## Descripción
Cuando use su variable como un valor de propiedad CSS, puede adjuntar un valor de reserva al que su navegador volverá si la variable dada no es válida. Nota: este respaldo no se utiliza para aumentar la compatibilidad del navegador, y no funcionará en los navegadores IE. Más bien, se usa para que el navegador tenga un color para mostrar si no puede encontrar su variable. Así es como lo haces:
fondo: var (- piel de pingüino, negro);
Esto establecerá el fondo en negro si su variable no se estableció. Tenga en cuenta que esto puede ser útil para la depuración.
-## Instructions +## Instrucciones
Parece que hay un problema con las variables proporcionadas a las .penguin-top y .penguin-bottom . En lugar de corregir el error tipográfico, agregue un valor alternativo de black a la propiedad de background de las .penguin-top y .penguin-bottom .
-## Tests +## Pruebas
```yml @@ -245,7 +245,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/cascading-css-variables.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/cascading-css-variables.spanish.md index 78209c71c4..0d52cf6408 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/cascading-css-variables.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/cascading-css-variables.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Variables CSS en cascada --- -## Description +## Descripción
Cuando creas una variable, queda disponible para que la uses dentro del elemento en el que la creas. También está disponible dentro de cualquier elemento anidado dentro de él. Este efecto se conoce como cascada . Debido a la conexión en cascada, las variables CSS a menudo se definen en el elemento : raíz . :root es un selector de pseudo-clase que coincide con el elemento raíz del documento, generalmente el elemento. Al crear sus variables en :root , estarán disponibles globalmente y se podrá acceder a ellas desde cualquier otro selector más adelante en la hoja de estilo.
-## Instructions +## Instrucciones
Defina una variable llamada --penguin-belly en el selector de :root y dale el valor de pink . Luego puede ver cómo el valor caerá en cascada para cambiar el valor a rosa, en cualquier lugar donde se use esa variable.
-## Tests +## Pruebas
```yml @@ -241,7 +241,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.spanish.md index 6da9fe9648..dfd535eb3b 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Cambiar una variable para un área específica --- -## Description +## Descripción
Cuando cree sus variables en :root , establecerán el valor de esa variable para toda la página. Luego puede sobrescribir estas variables configurándolas nuevamente dentro de un elemento específico.
-## Instructions +## Instrucciones
Cambia el valor de --penguin-belly a white en la clase de penguin .
-## Tests +## Pruebas
```yml @@ -243,7 +243,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-color-of-text.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-color-of-text.spanish.md index 4609af6fd5..58671d065d 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-color-of-text.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-color-of-text.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Cambiar el color del texto --- -## Description +## Descripción
Ahora cambiemos el color de algunos de nuestros textos. Podemos hacer esto cambiando el style de su elemento h2 . La propiedad que es responsable del color del texto de un elemento es la propiedad de estilo de color . A continuación le indicamos cómo establecería el color del texto de su elemento h2 en azul: <h2 style="color: blue;">CatPhotoApp</h2> Tenga en cuenta que es una buena práctica finalizar las declaraciones de style línea con una ; .
-## Instructions +## Instrucciones
Cambia el estilo de tu elemento h2 para que su color de texto sea rojo.
-## Tests +## Pruebas
```yml @@ -34,33 +34,34 @@ tests: ```html

CatPhotoApp

-

Click here to view more cat photos.

+

Haga clic aquí para ver más fotos de gatos.

+ A cute orange cat lying on its back. -
-

Things cats love:

+
+

Cosas que los gatos aman:

    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • +
  • pellizco de gato
    • +
  • punteros laser
    • +
  • lasaña
-

Top 3 things cats hate:

+

3 cosas que odian los gatos:

    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. +
  4. tratamiento de pulgas
    5. +
  5. trueno
    6. +
  6. otros gatos
- -
- - -
+ +
+ + +
- +
@@ -72,7 +73,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.spanish.md index 99114f0d57..d5c535600c 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Cambiar el tamaño de fuente de un elemento --- -## Description +## Descripción
El tamaño de fuente se controla mediante la propiedad CSS de font-size , como esta:
h1 {
tamaño de fuente: 30px;
}
-## Instructions +## Instrucciones
Dentro de la misma etiqueta <style> que contiene su clase de red-text , cree una entrada para los elementos p y establezca el font-size en 16 píxeles ( 16px ).
-## Tests +## Pruebas
```yml @@ -38,33 +38,33 @@ tests:

CatPhotoApp

-

Click here to view more cat photos.

+

Haga clic aquí para ver más fotos de gatos.

A cute orange cat lying on its back. -
-

Things cats love:

+
+

Cosas que los gatos aman:

    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • +
  • pellizco de gato
    • +
  • punteros laser
    • +
  • lasaña
-

Top 3 things cats hate:

+

3 cosas que odian los gatos:

    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. +
  4. tratamiento de pulgas
    5. +
  5. trueno
    6. +
  6. otros gatos
- -
- - -
+ +
+ + +
- +
@@ -76,7 +76,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/create-a-custom-css-variable.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/create-a-custom-css-variable.spanish.md index 2411b15c91..924ad8423b 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/create-a-custom-css-variable.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/create-a-custom-css-variable.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Crear una variable CSS personalizada --- -## Description +## Descripción
Para crear una Variable CSS, solo necesitas darle un name con two dashes delante y asignarle un value como este:
--penguin-piel: gris;
Esto creará una variable llamada --penguin-skin y le asignará el valor de gray . Ahora puede usar esa variable en otra parte de su CSS para cambiar el valor de otros elementos a gris.
-## Instructions +## Instrucciones
En la clase de penguin , crea un nombre de variable --penguin-skin y dale un valor de gray
-## Tests +## Pruebas
```yml @@ -236,7 +236,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.spanish.md index ad0ff434b1..6f486b6ebd 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Dar un color de fondo a un elemento div --- -## Description +## Descripción
Puede establecer el color de fondo de un elemento con la propiedad de background-color . Por ejemplo, si quisiera que el color de fondo de un elemento fuera green , lo pondría dentro de su elemento de style :
.green-background {
color de fondo: verde;
}
-## Instructions +## Instrucciones
Crea una clase llamada silver-background con el background-color de background-color de plata. Asigna esta clase a tu elemento div .
-## Tests +## Pruebas
```yml @@ -63,33 +63,33 @@ tests:

CatPhotoApp

-

Click here to view more cat photos.

+

Haga clic aquí para ver más fotos de gatos.

A cute orange cat lying on its back. -
-

Things cats love:

+
+

Cosas que los gatos aman:

    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • +
  • pellizco de gato
    • +
  • punteros laser
    • +
  • lasaña
-

Top 3 things cats hate:

+

3 cosas que odian los gatos:

    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. +
  4. tratamiento de pulgas
    5. +
  5. trueno
    6. +
  6. otros gatos
- -
- - -
+ +
+ + +
- +
@@ -101,7 +101,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/import-a-google-font.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/import-a-google-font.spanish.md index e3704a294f..cdb681c3a2 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/import-a-google-font.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/import-a-google-font.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Importar una fuente de Google --- -## Description +## Descripción
Además de especificar las fuentes comunes que se encuentran en la mayoría de los sistemas operativos, también podemos especificar fuentes web personalizadas y no estándar para su uso en nuestro sitio web. Existen varias fuentes de fuentes web en Internet, pero, para este ejemplo, nos centraremos en la biblioteca de fuentes de Google. Google Fonts es una biblioteca gratuita de fuentes web que puede utilizar en su CSS haciendo referencia a la URL de la fuente. Entonces, sigamos adelante, importemos y apliquemos una fuente de Google (tenga en cuenta que si Google está bloqueado en su país, deberá saltarse este desafío). Para importar una fuente de Google, puede copiar la URL de la (s) fuente (s) de la biblioteca de fuentes de Google y luego pegarla en su HTML. Para este desafío, importaremos la fuente Lobster . Para hacer esto, copie el siguiente fragmento de código y péguelo en la parte superior de su editor de código (antes del elemento de style apertura): <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> Ahora puede usar la fuente Lobster en su CSS usando Lobster como FAMILY_NAME como en el siguiente ejemplo:
font-family: FAMILY_NAME, GENERIC_NAME; . GENERIC_NAME es opcional y es una fuente alternativa en caso de que la otra fuente especificada no esté disponible. Esto está cubierto en el próximo desafío. Los nombres de las familias distinguen entre mayúsculas y minúsculas y deben estar entre comillas si hay un espacio en el nombre. Por ejemplo, necesita citas para usar la fuente "Open Sans" , pero no para usar la fuente Lobster .
-## Instructions +## Instrucciones
Cree una regla CSS de la font-family que use la fuente Lobster y asegúrese de que se aplicará a su elemento h2 .
-## Tests +## Pruebas
```yml @@ -49,33 +49,33 @@ tests:

CatPhotoApp

-

Click here to view more cat photos.

+

Haga clic aquí para ver más fotos de gatos.

A cute orange cat lying on its back. -
-

Things cats love:

+
+

Cosas que los gatos aman:

    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • +
  • pellizco de gato
    • +
  • punteros laser
    • +
  • lasaña
-

Top 3 things cats hate:

+

3 cosas que odian los gatos:

    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. +
  4. tratamiento de pulgas
    5. +
  5. trueno
    6. +
  6. otros gatos
- -
- - -
+ +
+ + +
- +
@@ -87,7 +87,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.spanish.md index 6e9dade804..b47005e799 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Mejora la compatibilidad con los fallbacks del navegador --- -## Description +## Descripción
Cuando trabaje con CSS, es probable que tenga problemas de compatibilidad con el navegador en algún momento. Esta es la razón por la que es importante proporcionar interrupciones en el navegador para evitar posibles problemas. Cuando su navegador analiza el CSS de una página web, ignora cualquier propiedad que no reconozca o admita. Por ejemplo, si usa una variable CSS para asignar un color de fondo en un sitio, Internet Explorer ignorará el color de fondo porque no admite las variables CSS. En ese caso, el navegador utilizará cualquier valor que tenga para esa propiedad. Si no puede encontrar ningún otro valor establecido para esa propiedad, volverá al valor predeterminado, que generalmente no es ideal. Esto significa que si desea proporcionar un respaldo de navegador, es tan fácil como proporcionar otro valor más ampliamente soportado inmediatamente antes de su declaración. De esa manera, un navegador antiguo tendrá algo en lo que basarse, mientras que un navegador más nuevo simplemente interpretará cualquier declaración que se presente más adelante en la cascada.
-## Instructions +## Instrucciones
Parece que se está utilizando una variable para establecer el color de fondo de la clase .red-box . Mejoremos la compatibilidad de nuestro navegador agregando otra declaración de background justo antes de la declaración existente y establezcamos su valor en rojo.
-## Tests +## Pruebas
```yml @@ -51,7 +51,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.spanish.md index 7ed64323d8..b955e15df0 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Heredar estilos del elemento cuerpo --- -## Description +## Descripción
Ahora hemos comprobado que cada página HTML tiene un elemento de body y que su elemento de body también se puede diseñar con CSS. Recuerde, puede diseñar su elemento de body como cualquier otro elemento HTML, y todos los demás elementos heredarán los estilos de su elemento de body .
-## Instructions +## Instrucciones
Primero, cree un elemento h1 con el texto Hello World Then, vamos a dar a todos los elementos de su página el color green agregando color: green; a la declaración de estilo de tu elemento body . Finalmente, asigne a su elemento body la familia de fuentes de monospace agregando font-family: monospace; a la declaración de estilo de tu elemento body .
-## Tests +## Pruebas
```yml @@ -57,7 +57,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.spanish.md index 780a3ea85b..0d921b7ff1 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Hacer imágenes circulares con un radio de borde --- -## Description +## Descripción
Además de los píxeles, también puede especificar el border-radius del border-radius usando un porcentaje.
-## Instructions +## Instrucciones
Dale a tu foto de gato un border-radius de border-radius del 50% .
-## Tests +## Pruebas
```yml @@ -61,33 +61,33 @@ tests:

CatPhotoApp

-

Click here to view more cat photos.

+

Haga clic aquí para ver más fotos de gatos.

A cute orange cat lying on its back. -
-

Things cats love:

+
+

Cosas que los gatos aman:

    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • +
  • pellizco de gato
    • +
  • punteros laser
    • +
  • lasaña
-

Top 3 things cats hate:

+

3 cosas que odian los gatos:

    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. +
  4. tratamiento de pulgas
    5. +
  5. trueno
    6. +
  6. otros gatos
- -
- - -
+ +
+ + +
- +
@@ -99,7 +99,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.spanish.md index d823ae0e1f..a8a2afc526 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Anular todos los otros estilos usando Importante --- -## Description +## Descripción
¡Hurra! Acabamos de demostrar que los estilos en línea anularán todas las declaraciones de CSS en su elemento de style . Pero espera. Hay una última forma de anular CSS. Este es el método más poderoso de todos. Pero antes de hacerlo, hablemos de por qué querría anular CSS. En muchas situaciones, usarás bibliotecas CSS. Estos pueden anular accidentalmente su propio CSS. Entonces, cuando necesite estar absolutamente seguro de que un elemento tiene un CSS específico, puede usarlo !important Volvamos a nuestra declaración de clase de pink-text . Recuerde que nuestra clase de pink-text fue anulada por las siguientes declaraciones de clase, declaraciones de id y estilos en línea.
-## Instructions +## Instrucciones
Agreguemos la palabra clave !important para la declaración de color de su elemento de texto rosa para asegurarnos al 100% de que su elemento h1 será rosa. Un ejemplo de cómo hacer esto es: color: red !important;
-## Tests +## Pruebas
```yml @@ -66,7 +66,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.spanish.md index d761678b12..f50e42ce75 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Anular declaraciones de clase por atributos de ID de estilo --- -## Description +## Descripción
Acabamos de demostrar que los navegadores leen CSS de arriba a abajo. Eso significa que, en caso de conflicto, el navegador utilizará la declaración de CSS que haya sido la última. Pero aún no hemos terminado. Hay otras formas en que puedes anular CSS. ¿Recuerdas los atributos de identificación? Anulemos sus clases de blue-text pink-text blue-text , y hagamos que su elemento h1 naranja, asignando una identificación al elemento h1 y luego diseñando ese tipo de identificación.
-## Instructions +## Instrucciones
Dale a tu elemento h1 el atributo id del orange-text . Recuerde, los estilos de identificación tienen este aspecto: <h1 id="orange-text"> Deje las clases de pink-text blue-text y pink-text en su elemento h1 . Cree una declaración CSS para su ID de orange-text en su elemento de style . Aquí hay un ejemplo de cómo se ve esto:
# texto marrón {
color marrón;
}
Nota: No importa si declara este CSS por encima o por debajo de la clase de texto rosado, ya que el atributo id siempre tendrá prioridad.
-## Tests +## Pruebas
```yml @@ -65,7 +65,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.spanish.md index 8c403529ae..6e9a8c8083 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Anular declaraciones de clase con estilos en línea --- -## Description +## Descripción
Así que hemos comprobado que las declaraciones de identificación anulan las declaraciones de clase, independientemente de dónde se declaren en su elemento de style CSS. Hay otras formas en que puedes anular CSS. ¿Recuerdas los estilos en línea?
-## Instructions +## Instrucciones
Use un inline style para tratar de hacer que nuestro elemento h1 blanco. Recuerde, los estilos de línea se ven así: <h1 style="color: green;"> Deje las clases de pink-text blue-text y pink-text en su elemento h1 .
-## Tests +## Pruebas
```yml @@ -64,7 +64,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.spanish.md index 2054fb5d30..84bbcaa824 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Anular estilos en CSS subsiguiente --- -## Description +## Descripción
Nuestra clase de "texto rosa" anuló la declaración CSS de nuestro elemento de body . Acabamos de demostrar que nuestras clases anularán el CSS del elemento body . Entonces, la siguiente pregunta lógica es: ¿qué podemos hacer para anular nuestra clase de pink-text ?
-## Instructions +## Instrucciones
Cree una clase CSS adicional llamada blue-text que le dé a un elemento el color azul. Asegúrate de que esté debajo de tu declaración de clase de pink-text . Aplique la clase de blue-text a su elemento h1 además de su clase de pink-text , y veamos cuál gana. La aplicación de múltiples atributos de clase a un elemento HTML se realiza con un espacio entre ellos como este: class="class1 class2" Nota: No importa en qué orden se enumeran las clases en el elemento HTML. Sin embargo, lo que es importante es el orden de las declaraciones de class en la sección <style> . La segunda declaración siempre tendrá prioridad sobre la primera. Debido a que .blue-text se declara segundo, anula los atributos de .pink-text
-## Tests +## Pruebas
```yml @@ -56,7 +56,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/prioritize-one-style-over-another.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/prioritize-one-style-over-another.spanish.md index 28d0f0c15d..ce412234fe 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/prioritize-one-style-over-another.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/prioritize-one-style-over-another.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Priorizar un estilo sobre otro --- -## Description +## Descripción
A veces, sus elementos HTML recibirán múltiples estilos que entren en conflicto entre sí. Por ejemplo, su elemento h1 no puede ser verde y rosa al mismo tiempo. Veamos qué sucede cuando creamos una clase que hace que el texto sea rosa, luego lo aplicamos a un elemento. ¿Nuestra clase anulará el color: green; del elemento del body color: green; Propiedad CSS?
-## Instructions +## Instrucciones
Crea una clase de CSS llamada pink-text que le da a un elemento el color rosa. Dale a tu elemento h1 la clase de pink-text .
-## Tests +## Pruebas
```yml @@ -51,7 +51,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.spanish.md index 3d483b1595..adb64a8627 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Establecer la familia de fuentes de un elemento --- -## Description +## Descripción
Puede establecer qué fuente debe usar un elemento, usando la propiedad de font-family . Por ejemplo, si quisiera establecer la fuente de su elemento h2 en sans-serif , usaría el siguiente CSS:
h2 {
Familia tipográfica: sans-serif;
}
-## Instructions +## Instrucciones
Haz que todos tus elementos p utilicen la fuente monospace .
-## Tests +## Pruebas
```yml @@ -42,33 +42,33 @@ tests:

CatPhotoApp

-

Click here to view more cat photos.

+

Haga clic aquí para ver más fotos de gatos.

A cute orange cat lying on its back.
-

Things cats love:

+

Cosas que los gatos aman:

    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • +
  • pellizco de gato
    • +
  • punteros laser
    • +
  • lasaña
-

Top 3 things cats hate:

+

3 cosas que odian los gatos:

    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. +
  4. tratamiento de pulgas
    5. +
  5. trueno
    6. +
  6. otros gatos
- -
- - -
+ +
+ + +
- +
@@ -80,7 +80,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/set-the-id-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/set-the-id-of-an-element.spanish.md index 3c0e015ec9..7970262c93 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/set-the-id-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/set-the-id-of-an-element.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Establecer la id de un elemento --- -## Description +## Descripción
Además de las clases, cada elemento HTML también puede tener un atributo id . El uso de atributos de id tiene varios beneficios: puede usar una id para diseñar un solo elemento y más adelante aprenderá que puede usarlos para seleccionar y modificar elementos específicos con JavaScript. id atributos de id deben ser únicos. Los navegadores no harán cumplir esto, pero es una buena práctica ampliamente aceptada. Entonces, por favor, no le dé a más de un elemento el mismo atributo de id . Aquí hay un ejemplo de cómo le das a tu elemento h2 el ID de cat-photo-app : <h2 id="cat-photo-app">
-## Instructions +## Instrucciones
Dale a tu elemento de form la identificación cat-photo-form .
-## Tests +## Pruebas
```yml @@ -63,33 +63,33 @@ tests:

CatPhotoApp

-

Click here to view more cat photos.

+

Haga clic aquí para ver más fotos de gatos.

A cute orange cat lying on its back.
-

Things cats love:

+

Cosas que los gatos aman:

    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • +
  • pellizco de gato
    • +
  • punteros laser
    • +
  • lasaña
-

Top 3 things cats hate:

+

3 cosas que odian los gatos:

    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. +
  4. tratamiento de pulgas
    5. +
  5. trueno
    6. +
  6. otros gatos
- -
- - -
+ +
+ + +
- +
@@ -101,7 +101,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/size-your-images.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/size-your-images.spanish.md index 43a846e823..8c27bfec4d 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/size-your-images.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/size-your-images.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Tamaño de sus imágenes --- -## Description +## Descripción
CSS tiene una propiedad llamada width que controla el ancho de un elemento. Al igual que con las fuentes, usaremos px (píxeles) para especificar el ancho de la imagen. Por ejemplo, si quisiéramos crear una clase CSS llamada larger-image que diera a los elementos HTML un ancho de 500 píxeles, usaríamos:
<estilo>
.larger-image {
ancho: 500px;
}
</style>
-## Instructions +## Instrucciones
Cree una clase llamada smaller-image y utilícela para cambiar el tamaño de la imagen de modo que tenga solo 100 píxeles de ancho. Nota
Debido a las diferencias de implementación del navegador, es posible que tenga que estar al 100% del zoom para pasar las pruebas en este desafío.
-## Tests +## Pruebas
```yml @@ -50,33 +50,33 @@ tests:

CatPhotoApp

-

Click here to view more cat photos.

+

Haga clic aquí para ver más fotos de gatos.

A cute orange cat lying on its back.
-

Things cats love:

+

Cosas que los gatos aman:

    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • +
  • pellizco de gato
    • +
  • punteros laser
    • +
  • lasaña
-

Top 3 things cats hate:

+

3 cosas que odian los gatos:

    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. +
  4. tratamiento de pulgas
    5. +
  5. trueno
    6. +
  6. otros gatos
- -
- - -
+ +
+ + +
- +
@@ -88,7 +88,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.spanish.md index a480bab91c..1792bc937b 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Especifique cómo deben degradarse las fuentes --- -## Description +## Descripción
Hay varias fuentes predeterminadas que están disponibles en todos los navegadores. Estas familias de fuentes genéricas incluyen monospace , serif y sans-serif Cuando una fuente no está disponible, puede indicar al navegador que se "degrade" a otra fuente. Por ejemplo, si deseaba que un elemento usara la fuente Helvetica , pero se degradara a la sans-serif cuando Helvetica no estaba disponible, lo especificará de la siguiente manera:
pag {
Familia tipográfica: Helvetica, sans-serif;
}
Los nombres genéricos de las familias de fuentes no distinguen entre mayúsculas y minúsculas. Además, no necesitan comillas porque son palabras clave CSS.
-## Instructions +## Instrucciones
Para empezar, aplique la fuente monospace al elemento h2 , de modo que ahora tenga dos fuentes: Lobster y monospace . En el último desafío, importó la fuente Lobster usando la etiqueta de link . Ahora comente la importación de la fuente Lobster (utilizando los comentarios HTML que aprendió anteriormente) de Google Fonts para que ya no esté disponible. Observe cómo su elemento h2 se degrada a la fuente monospace . Nota
Si tiene la fuente Lobster instalada en su computadora, no verá la degradación porque su navegador puede encontrar la fuente.
-## Tests +## Pruebas
```yml @@ -54,33 +54,33 @@ tests:

CatPhotoApp

-

Click here to view more cat photos.

+

Haga clic aquí para ver más fotos de gatos.

A cute orange cat lying on its back.
-

Things cats love:

+

Cosas que los gatos aman:

    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • +
  • pellizco de gato
    • +
  • punteros laser
    • +
  • lasaña
-

Top 3 things cats hate:

+

3 cosas que odian los gatos:

    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. +
  4. tratamiento de pulgas
    5. +
  5. trueno
    6. +
  6. otros gatos
- -
- - -
+ +
+ + +
- +
@@ -92,7 +92,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.spanish.md index a565d4b81f..5c34ec8df4 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.spanish.md @@ -6,14 +6,14 @@ videoUrl: '' localeTitle: Estilo de elementos múltiples con una clase CSS --- -## Description +## Descripción
Las clases le permiten usar los mismos estilos CSS en varios elementos HTML. Puedes ver esto aplicando tu clase de red-text al primer elemento p .
-## Instructions +## Instrucciones
-## Tests +## Pruebas
```yml @@ -47,33 +47,33 @@ tests:

CatPhotoApp

-

Click here to view more cat photos.

+

Haga clic aquí para ver más fotos de gatos.

A cute orange cat lying on its back.
-

Things cats love:

+

Cosas que los gatos aman:

    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • +
  • pellizco de gato
    • +
  • punteros laser
    • +
  • lasaña
-

Top 3 things cats hate:

+

3 cosas que odian los gatos:

    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. +
  4. tratamiento de pulgas
    5. +
  5. trueno
    6. +
  6. otros gatos
- -
- - -
+ +
+ + +
- +
@@ -85,7 +85,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/style-the-html-body-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/style-the-html-body-element.spanish.md index 68bc44ee80..e1fd953535 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/style-the-html-body-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/style-the-html-body-element.spanish.md @@ -6,13 +6,15 @@ videoUrl: '' localeTitle: Estilo del elemento HTML del cuerpo --- -## Description +## Descripción
Ahora comencemos de nuevo y hablemos de la herencia CSS. Cada página HTML tiene un elemento de body .
-## Instructions -
Podemos probar que el elemento del body existe aquí dándole un background-color de background-color de negro. Podemos hacer esto agregando lo siguiente a nuestro elemento de style :
body {
background-color: black;
}
-## Tests +## Instrucciones +
Podemos probar que el elemento del body existe aquí dándole un background-color de background-color de negro. Podemos hacer esto agregando lo siguiente a nuestro elemento de style :
cuerpo {
color de fondo: negro;
}
+======= + +## Pruebas
```yml @@ -46,7 +48,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.spanish.md index d620d1dff6..d894e9ff2b 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Comprender unidades absolutas versus unidades relativas --- -## Description +## Descripción
Los últimos varios desafíos establecen el margen o el relleno de un elemento con píxeles ( px ). Los píxeles son un tipo de unidad de longitud, que es lo que le dice al navegador cómo dimensionar o espaciar un elemento. Además de px , CSS tiene una serie de opciones de unidades de longitud diferentes que puede utilizar. Los dos tipos principales de unidades de longitud son absolutos y relativos. Unidades absolutas vinculadas a unidades físicas de longitud. Por ejemplo, in y mm refieren a pulgadas y milímetros, respectivamente. Las unidades de longitud absoluta se aproximan a la medida real en una pantalla, pero hay algunas diferencias según la resolución de la pantalla. Las unidades relativas, como em o rem , son relativas a otro valor de longitud. Por ejemplo, em se basa en el tamaño de la fuente de un elemento. Si lo usa para establecer la propiedad de font-size sí, es relativo al font-size de font-size . Nota
Hay varias opciones de unidades relativas que están vinculadas al tamaño de la ventana gráfica. Están cubiertos en la sección Principios de diseño web responsivo.
-## Instructions +## Instrucciones
Agregue una propiedad de padding al elemento con la clase red-box y 1.5em a 1.5em .
-## Tests +## Pruebas
```yml @@ -76,7 +76,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.spanish.md index d49799735c..f15a07d182 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Usa una clase CSS para diseñar un elemento --- -## Description +## Descripción
Las clases son estilos reutilizables que se pueden agregar a elementos HTML. Aquí hay un ejemplo de declaración de clase CSS:
<estilo>
.blue-text {
color azul;
}
</style>
Puede ver que hemos creado una clase CSS llamada blue-text dentro de la etiqueta <style> . Puede aplicar una clase a un elemento HTML como este: <h2 class="blue-text">CatPhotoApp</h2> Tenga en cuenta que en su elemento de style CSS, los nombres de clase comienzan con un punto. En el atributo de clase de los elementos HTML, el nombre de la clase no incluye el período.
-## Instructions +## Instrucciones
Dentro de su elemento de style , cambie el selector h2 a .red-text y actualice el valor del blue de blue a red . Déle a su elemento h2 el atributo de class con un valor de 'red-text' .
-## Tests +## Pruebas
```yml @@ -44,33 +44,33 @@ tests:

CatPhotoApp

-

Click here to view more cat photos.

+

Haga clic aquí para ver más fotos de gatos.

A cute orange cat lying on its back.
-

Things cats love:

+

Cosas que los gatos aman:

    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • +
  • pellizco de gato
    • +
  • punteros laser
    • +
  • lasaña
-

Top 3 things cats hate:

+

3 cosas que odian los gatos:

    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. +
  4. tratamiento de pulgas
    5. +
  5. trueno
    6. +
  6. otros gatos
- +
- -
- - -
+ +
+ + +
- +
@@ -82,7 +82,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-custom-css-variable.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-custom-css-variable.spanish.md index fa319ccdfb..56ed93062c 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-custom-css-variable.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-custom-css-variable.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Use una variable CSS personalizada --- -## Description +## Descripción
Después de crear su variable, puede asignar su valor a otras propiedades de CSS haciendo referencia al nombre que le dio.
fondo: var (- piel de pingüino);
Esto cambiará el fondo de cualquier elemento que estés apuntando a gris porque ese es el valor de la variable --penguin-skin . Tenga en cuenta que los estilos no se aplicarán a menos que los nombres de las variables coincidan exactamente.
-## Instructions +## Instrucciones
Aplique la variable --penguin-skin a la propiedad de background de las clases penguin-top , penguin-bottom , right-hand y left-hand .
-## Tests +## Pruebas
```yml @@ -255,7 +255,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.spanish.md index 33a8bc9b9b..2cc435767e 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Usa una consulta de medios para cambiar una variable --- -## Description +## Descripción
Las Variables CSS pueden simplificar la forma en que utiliza las consultas de medios. Por ejemplo, cuando su pantalla es más pequeña o más grande que el punto de interrupción de su consulta de medios, puede cambiar el valor de una variable y aplicará su estilo donde sea que se use.
-## Instructions +## Instrucciones
En el :root selector de :root de la media query , cámbielo para que --penguin-size se redefina y se le dé un valor de 200px . Además, redefine --penguin-skin y dale un valor de black . Luego cambie el tamaño de la vista previa para ver este cambio en acción.
-## Tests +## Pruebas
```yml @@ -271,7 +271,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-abbreviated-hex-code.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-abbreviated-hex-code.spanish.md index 3bd837c864..93dca85f3c 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-abbreviated-hex-code.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-abbreviated-hex-code.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Use el código hexadecimal abreviado --- -## Description +## Descripción
Muchas personas se sienten abrumadas por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente, puedes acortarlo. Por ejemplo, el código hexadecimal de rojo #FF0000 puede #FF0000 a #F00 . Esta forma abreviada proporciona un dígito para el rojo, un dígito para el verde y un dígito para el azul. Esto reduce el número total de colores posibles a alrededor de 4.000. Pero los navegadores interpretarán #FF0000 y #F00 como exactamente del mismo color.
-## Instructions +## Instrucciones
Adelante, intente usar los códigos hexadecimales abreviados para colorear los elementos correctos.
Color Código hexadecimal corto
Cian #0FF
Verde #0F0
rojo #F00
Fucsia #F0F
-## Tests +## Pruebas
```yml @@ -59,13 +59,13 @@ tests: } -

I am red!

+

Estoy rojo!

-

I am fuchsia!

+

Estoy fucsia!

-

I am cyan!

+

Estoy cian!

-

I am green!

+

Estoy verde!

``` @@ -75,7 +75,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.spanish.md index 1538f2076e..7c7b699611 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Use un atributo de ID para diseñar un elemento --- -## Description +## Descripción
Una cosa interesante acerca de los atributos de id es que, al igual que las clases, puedes aplicarles un estilo usando CSS. Sin embargo, una id no es reutilizable y solo debe aplicarse a un elemento. Una id también tiene una mayor especificidad (importancia) que una clase, por lo que si ambas se aplican al mismo elemento y tienen estilos en conflicto, se aplicarán los estilos de la id . Este es un ejemplo de cómo puede tomar su elemento con el atributo id de cat-photo-element y darle el color de fondo de verde. En su elemento de style :
# cat-photo-element {
color de fondo: verde;
}
Tenga en cuenta que dentro de su elemento de style , siempre hace referencia a las clases poniendo un . delante de sus nombres. Siempre hace referencia a los identificadores colocando un # delante de sus nombres.
-## Instructions +## Instrucciones
Intente darle a su formulario, que ahora tiene el atributo id de cat-photo-form , un fondo verde.
-## Tests +## Pruebas
```yml @@ -69,31 +69,31 @@ tests:

CatPhotoApp

-

Click here to view more cat photos.

+

Haga clic aquí para ver más fotos de gatos.

A cute orange cat lying on its back.
-

Things cats love:

+

Cosas que los gatos aman:

    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • +
  • pellizco de gato
    • +
  • punteros laser
    • +
  • lasaña
-

Top 3 things cats hate:

+

3 cosas que odian los gatos:

    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. +
  4. tratamiento de pulgas
    5. +
  5. trueno
    6. +
  6. otros gatos
- +
- -
- - -
+ +
+ + +
@@ -107,7 +107,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.spanish.md index 79201dd1c9..371c495b47 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Usar selectores de atributos para elementos de estilo --- -## Description +## Descripción
Ha estado asignando atributos de id o class a los elementos que desea diseñar específicamente. Estos son conocidos como ID y selectores de clase. Hay otros selectores de CSS que puede usar para seleccionar grupos personalizados de elementos para personalizar. Vamos a sacar CatPhotoApp de nuevo para practicar el uso de los selectores de CSS. Para este desafío, utilizará el selector de atributo [attr=value] para diseñar las casillas de verificación en CatPhotoApp. Este selector combina y diseña elementos con un valor de atributo específico. Por ejemplo, el código siguiente cambia los márgenes de todos los elementos con el type atributo y el valor de radio correspondiente:
[tipo = 'radio'] {
margen: 20px 0px 20px 0px;
}
-## Instructions +## Instrucciones
Con el selector de atributos de type , intente dar a las casillas de verificación en CatPhotoApp un margen superior de 10 px y un margen inferior de 15 px.
-## Tests +## Pruebas
```yml @@ -67,33 +67,33 @@ tests:

CatPhotoApp

-

Click here to view more cat photos.

+

Haga clic aquí para ver más fotos de gatos.

A cute orange cat lying on its back.
-

Things cats love:

+

Cosas que los gatos aman:

    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • +
  • pellizco de gato
    • +
  • punteros laser
    • +
  • lasaña
-

Top 3 things cats hate:

+

3 cosas que odian los gatos:

    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. +
  4. tratamiento de pulgas
    5. +
  5. trueno
    6. +
  6. otros gatos
- -
- - -
+ +
+ + +
- +
@@ -105,7 +105,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.spanish.md index c6fd8a789a..ce0d78edb2 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Usar la notación de las agujas del reloj para especificar el margen de un elemento --- -## Description +## Descripción
Intentemos esto de nuevo, pero con margin esta vez. En lugar de especificar individualmente las propiedades margin-top , margin-right , margin-bottom y margin-left un elemento, puede especificarlas todas en una línea, como esta: margin: 10px 20px 10px 20px; Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado que utilizando las instrucciones de margen específicas para cada lado.
-## Instructions +## Instrucciones
Use la Clockwise Notation para dar al elemento con la clase de blue-box un margen de 40px en su lado superior e izquierdo, pero solo 20px en su lado inferior y derecho.
-## Tests +## Pruebas
```yml @@ -80,7 +80,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.spanish.md index ee8b754993..a4a32c2daf 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Use la notación de las agujas del reloj para especificar el relleno de un elemento --- -## Description +## Descripción
En lugar de especificar las propiedades padding-top , padding-right , padding-bottom y padding-left individualmente, puede especificarlas todas en una línea, como esta: padding: 10px 20px 10px 20px; Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado que utilizando las instrucciones de relleno específicas para cada lado.
-## Instructions +## Instrucciones
Use la notación de las agujas del reloj para darle a la clase ".blue-box" un padding de 40px en su lado superior e izquierdo, pero solo 20px en su lado inferior y derecho.
-## Tests +## Pruebas
```yml @@ -82,7 +82,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.spanish.md index 1d3446a69a..0a2d0b7a7f 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Usar los selectores de CSS para elementos de estilo --- -## Description +## Descripción
Con CSS, hay cientos de properties de CSS que puedes usar para cambiar la apariencia de un elemento en tu página. Cuando ingresó <h2 style="color: red">CatPhotoApp</h2> , estaba diseñando ese elemento h2 individual con inline CSS , que significa Cascading Style Sheets . Esa es una forma de especificar el estilo de un elemento, pero hay una mejor manera de aplicar CSS . En la parte superior de tu código, crea un bloque de style como este:
<estilo>
</style>
Dentro de ese bloque de estilo, puede crear un CSS selector para todos los elementos h2 . Por ejemplo, si desea que todos los elementos h2 sean rojos, debe agregar una regla de estilo que se vea así:
<estilo>
h2 {color: rojo;}
</style>
Tenga en cuenta que es importante tener llaves de apertura y cierre ( { y } ) alrededor de las reglas de estilo de cada elemento. También debe asegurarse de que la definición de estilo de su elemento se encuentre entre las etiquetas de estilo de apertura y de cierre. Finalmente, asegúrese de agregar un punto y coma al final de cada una de las reglas de estilo de su elemento.
-## Instructions +## Instrucciones
Borre el atributo de estilo del elemento h2 y, en su lugar, cree un bloque de style CSS. Agrega el CSS necesario para convertir todos los elementos h2 azul.
-## Tests +## Pruebas
```yml @@ -40,22 +40,22 @@ tests: ```html

CatPhotoApp

-

Click here to view more cat photos.

+

Haga clic aquí para ver más fotos de gatos.

A cute orange cat lying on its back.
-

Things cats love:

+

Cosas que los gatos aman:

    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • +
  • pellizco de gato
    • +
  • punteros laser
    • +
  • lasaña
-

Top 3 things cats hate:

+

3 cosas que odian los gatos:

    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. +
  4. tratamiento de pulgas
    5. +
  5. trueno
    6. +
  6. otros gatos
@@ -78,7 +78,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.spanish.md index 442ac794bf..d3842e90a5 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Usa las variables CSS para cambiar varios elementos a la vez --- -## Description +## Descripción
Las Variables CSS son una forma poderosa de cambiar muchas propiedades de estilo CSS a la vez cambiando solo un valor. Siga las instrucciones a continuación para ver cómo cambiar solo tres valores puede cambiar el estilo de muchos elementos.
-## Instructions +## Instrucciones
En la clase de penguin , cambie el valor de black a gray , el valor de gray a white y el de yellow a orange .
-## Tests +## Pruebas
```yml @@ -243,7 +243,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.spanish.md index 03d2a8aa16..4b2802ab8e 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Use el código hexadecimal para colores específicos --- -## Description +## Descripción
¿Sabías que hay otras formas de representar los colores en CSS? Una de estas formas se llama código hexadecimal, o hex code para abreviar. Usualmente usamos decimals , o números de base 10, que usan los símbolos del 0 al 9 para cada dígito. Hexadecimals (o hex ) son números base 16. Esto significa que utiliza dieciséis símbolos distintos. Al igual que los decimales, los símbolos 0-9 representan los valores de cero a nueve. Luego, A, B, C, D, E, F representan los valores de diez a quince. En total, de 0 a F puede representar un dígito en hexadecimal , lo que nos da un total de 16 valores posibles. Puede encontrar más información sobre los números hexadecimales aquí . En CSS, podemos usar 6 dígitos hexadecimales para representar colores, dos para cada uno de los componentes rojo (R), verde (G) y azul (B). Por ejemplo, #000000 es negro y también es el valor más bajo posible. Puede encontrar más información sobre el sistema de color RGB aquí .
cuerpo {
color: # 000000;
}
-## Instructions +## Instrucciones
Reemplace la palabra black en el color de fondo de nuestro elemento del body con su representación en hex code , #000000 .
-## Tests +## Pruebas
```yml @@ -46,7 +46,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.spanish.md index 680faae00a..47af4e1a93 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Usa el código hexadecimal para mezclar colores --- -## Description +## Descripción
Para revisar, los códigos hexadecimales usan 6 dígitos hexadecimales para representar los colores, dos para cada uno de los componentes rojo (R), verde (G) y azul (B). ¡De estos tres colores puros (rojo, verde y azul), podemos variar las cantidades de cada uno para crear más de 16 millones de otros colores! Por ejemplo, el naranja es rojo puro, mezclado con un poco de verde y sin azul. En código hexadecimal, esto se traduce en ser #FFA500 . El dígito 0 es el número más bajo en código hexadecimal y representa una ausencia completa de color. El dígito F es el número más alto en código hexadecimal y representa el brillo máximo posible.
-## Instructions +## Instrucciones
Reemplace las palabras de color en nuestro elemento de style con sus códigos hexadecimales correctos.
Color Código hexadecimal
Dodger Blue #1E90FF
Verde #00FF00
naranja #FFA500
rojo #FF0000
-## Tests +## Pruebas
```yml @@ -59,13 +59,13 @@ tests: } -

I am red!

+

Estoy rojo!

-

I am green!

+

Estoy verde!

-

I am dodger blue!

+

Estoy azul de dodger!

-

I am orange!

+

Estoy naranja!

``` @@ -75,7 +75,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.spanish.md index 92f60a6bd6..7150307c83 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.spanish.md @@ -6,13 +6,13 @@ videoUrl: '' localeTitle: Usa RGB para mezclar colores --- -## Description +## Descripción
Al igual que con el código hexadecimal, puede mezclar colores en RGB utilizando combinaciones de diferentes valores.
-## Instructions +## Instrucciones
Reemplace los códigos hexadecimales en nuestro elemento de style con sus valores RGB correctos.
Color RGB
Azul rgb(0, 0, 255)
rojo rgb(255, 0, 0)
Orquídea rgb(218, 112, 214)
Tierra de siena rgb(160, 82, 45)
-## Tests +## Pruebas
```yml @@ -59,13 +59,13 @@ tests: } -

I am red!

+

Estoy rojo!

-

I am orchid!

+

Estoy orquídea!

-

I am sienna!

+

Estoy siena!

-

I am blue!

+

Estoy azul!

``` @@ -75,7 +75,7 @@ tests:
-## Solution +## Solución
```js diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.spanish.md index 72ce6b825f..a2c248fa7a 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.spanish.md @@ -6,7 +6,9 @@ videoUrl: '' localeTitle: Usar valores RGB para elementos de color --- -## Description + +## Descripción +
Otra forma de representar colores en CSS es mediante el uso de valores RGB . El valor RGB para negro se ve así: rgb(0, 0, 0) El valor RGB para blanco se ve así: rgb(255, 255, 255) En lugar de usar seis dígitos hexadecimales como lo hace con el código hexadecimal, con RGB usted Especifique el brillo de cada color con un número entre 0 y 255. Si hace los cálculos, los dos dígitos de un color son 16 veces 16, lo que nos da 256 valores totales. Entonces, RGB , que comienza a contar desde cero, tiene exactamente el mismo número de valores posibles que el código hexadecimal. Aquí hay un ejemplo de cómo cambiarías el fondo del cuerpo a naranja usando su código RGB. ```css body { @@ -15,10 +17,10 @@ body { ```
-## Instructions +## Instrucciones
Reemplazemos el código hexadecimal en el color de fondo de nuestro elemento del body con el valor RGB para negro: rgb(0, 0, 0)
-## Tests +## Pruebas
```yml @@ -52,7 +54,7 @@ tests:
-## Solution +## Solución
```js diff --git a/guide/arabic/certifications/coding-interview-prep/project-euler/problem-7-10001st-prime/index.md b/guide/arabic/certifications/coding-interview-prep/project-euler/problem-7-10001st-prime/index.md index e7cc078f90..5baaaac686 100644 --- a/guide/arabic/certifications/coding-interview-prep/project-euler/problem-7-10001st-prime/index.md +++ b/guide/arabic/certifications/coding-interview-prep/project-euler/problem-7-10001st-prime/index.md @@ -22,7 +22,7 @@ localeTitle: 10001st //Looping until primes array is equal to n while (primes.length < n){ - //All the primes numbers of a number is always <= it's square root + //All the primes numbers of a number is always <= its square root let max = Math.ceil(Math.sqrt(num)); for (let i = 0; primes[i] <= max; i++){ diff --git a/guide/arabic/miscellaneous/freecodecamp-algorithm-insertion-sort-guide/index.md b/guide/arabic/miscellaneous/freecodecamp-algorithm-insertion-sort-guide/index.md index 39ca3b5537..f67be25e84 100644 --- a/guide/arabic/miscellaneous/freecodecamp-algorithm-insertion-sort-guide/index.md +++ b/guide/arabic/miscellaneous/freecodecamp-algorithm-insertion-sort-guide/index.md @@ -45,7 +45,7 @@ localeTitle: Freecodecamp خوارزمية الإدراج دليل فرز arr[j+1] = arr[j]; j = j-1; } - arr[j+1] = key; // place element key at it's correct place + arr[j+1] = key; // place element key at its correct place } } @@ -77,7 +77,7 @@ localeTitle: Freecodecamp خوارزمية الإدراج دليل فرز while j>=0 and key < arr[j] : arr[j+1] = arr[j] j -= 1 - arr[j+1] = key # place element key at it's correct place + arr[j+1] = key # place element key at its correct place # array to be sorted arr = [12, 11, 13, 5, 6] diff --git a/guide/chinese/certifications/coding-interview-prep/project-euler/problem-7-10001st-prime/index.md b/guide/chinese/certifications/coding-interview-prep/project-euler/problem-7-10001st-prime/index.md index 2823cb3894..3ac47f847c 100644 --- a/guide/chinese/certifications/coding-interview-prep/project-euler/problem-7-10001st-prime/index.md +++ b/guide/chinese/certifications/coding-interview-prep/project-euler/problem-7-10001st-prime/index.md @@ -23,7 +23,7 @@ function nthPrime(n) { //Looping until primes array is equal to n while (primes.length < n){ - //All the primes numbers of a number is always <= it's square root + //All the primes numbers of a number is always <= its square root let max = Math.ceil(Math.sqrt(num)); for (let i = 0; primes[i] <= max; i++){ diff --git a/guide/english/agile/continuous-integration/index.md b/guide/english/agile/continuous-integration/index.md index 45cddc342e..1549213c54 100644 --- a/guide/english/agile/continuous-integration/index.md +++ b/guide/english/agile/continuous-integration/index.md @@ -3,7 +3,7 @@ title: Continuous Integration --- ## Continuous Integration -At it's most basic, continuous integration (CI) is an agile development methodology in which developers regularly merge their code directly to the main source, usually a remote `master` branch. In order to ensure that no breaking changes are introduced, a full test suite is run on every potentiual build to regression test the new code, i.e. test that the new code does not break existing, working features. +At its most basic, continuous integration (CI) is an agile development methodology in which developers regularly merge their code directly to the main source, usually a remote `master` branch. In order to ensure that no breaking changes are introduced, a full test suite is run on every potentiual build to regression test the new code, i.e. test that the new code does not break existing, working features. This approach requires good test coverage of the code base, meaning that a majority, if not all, of the code has tests which ensure its features are fully functional. Ideally continuous integration would be practiced together with full Test-Driven Development. diff --git a/guide/english/agile/integration-hell/index.md b/guide/english/agile/integration-hell/index.md index a18edbb148..d56de350fc 100644 --- a/guide/english/agile/integration-hell/index.md +++ b/guide/english/agile/integration-hell/index.md @@ -3,13 +3,13 @@ title: Integration Hell --- ## Integration Hell -Integration Hell is a slang term for when all the members of a development team goes through the process of implementing their code at random times with no way to incorporate the different pieces of code into one seamless sring of code. The development team will have to spend several hours or days testing and tweaking the code to get it all to work. +Integration Hell is a slang term for when all the members of a development team goes through the process of implementing their code at random times with no way to incorporate the different pieces of code into one seamless string of code. The development team will have to spend several hours or days testing and tweaking the code to get it all to work. -In practice, the longer components are developed in isolation, the more the interfaces tend to diverge from what is expected. When the components are finally integrated at the end of the project, it would take a great deal more time than allocated, often leading to deadline pressures, and difficult integration. This painful integration work at the end of the project is the eponymous hell. +In practice, the longer components are developed in isolation, the more the interfaces tend to diverge from what is expected. When the components are finally integrated at the end of the project, it would take a great deal more time than allocated, often leading to deadline pressures and difficult integration. This painful integration work at the end of the project is the eponymous hell. -Continuous Integration, the idea that a development team should use specific tools to "continously integrate" the parts of the code they are working on multiple times a day so that the tools can match the different "chunks" of code together to integrate much more seamlessly than before. +Continuous Integration is the idea that a development team should use specific tools to "continously integrate" the parts of the code they are working on multiple times a day so that the tools can match the different "chunks" of code together to integrate much more seamlessly than before. -Code Repositories, like Git (and it's open source interface we all know and love, GitHub) allow development teams to organize their efforts so that more time can be spent coding and less time on worrying if the different parts of the code will all integrate. +Code Repositories, like Git (and its open source interface we all know and love, GitHub) allow development teams to organize their efforts so that more time can be spent coding and less time on worrying if the different parts of the code will all integrate. Continuous Integration is the Agile antidote to this problem. Integration is still painful, but doing it at least daily keeps interfaces from diverging too much. diff --git a/guide/english/agile/retrospectives/index.md b/guide/english/agile/retrospectives/index.md index ad47f9a6b3..1b93e789da 100644 --- a/guide/english/agile/retrospectives/index.md +++ b/guide/english/agile/retrospectives/index.md @@ -19,7 +19,7 @@ And from this discussion, the team creates a list of behaviors that they work on When commiting to action items, make sure you focus on 1 - 3. It is better to get a couple done, than commiting to more and not doing them. If it is difficult to come up with actions, try running experiments: Write down what you will do and what you want to achieve with that. In the following retro check if what you did achieved what you had planned. If it did not - you can learn out of the experiment and try out something else. -A good approach to find out which topics should be discussed is *"Discuss and mention"*. It consists on a board with as many columns as people in the team (you can use something like Trello or just a regular whiteboard) and two more for the things to "discuss" and those to be "mentioned". Everybody has 10 minutes to fill their column with things from the last sprint they want to highlight (these are represented with cards or Post-it's). Afterwards, each team member explains each of their own items. Finally, each team member chooses which topics they think should be mentioned or discussed, by moving the card/post-it to the respectively column. The team then decides which topics should be discussed and talk about them for about 10 minutes. +A good approach to find out which topics should be discussed is *"Discuss and mention"*. It consists on a board with as many columns as people in the team (you can use something like Trello or just a regular whiteboard) and two more for the things to "discuss" and those to be "mentioned". Everybody has 10 minutes to fill their column with things from the last sprint they want to highlight (these are represented with cards or Post-its). Afterwards, each team member explains each of their own items. Finally, each team member chooses which topics they think should be mentioned or discussed, by moving the card/post-it to the respectively column. The team then decides which topics should be discussed and talk about them for about 10 minutes. Invite the scrum team only to the Retrospective. (Delivery Team, Product Owner, Scrum Master). Discourage managers, stakeholders, business partners, etc. They are a distraction and can hinder the sense of openness the team needs. diff --git a/guide/english/algorithms/binary-search-trees/index.md b/guide/english/algorithms/binary-search-trees/index.md index 0e723e68dd..76698c7119 100644 --- a/guide/english/algorithms/binary-search-trees/index.md +++ b/guide/english/algorithms/binary-search-trees/index.md @@ -17,7 +17,7 @@ A binary search tree (BST) adds these two characteristics: The BST is built up on the idea of the binary search algorithm, which allows for fast lookup, insertion and removal of nodes. The way that they are set up means that, on average, each comparison allows the operations to skip about half of the tree, so that each lookup, insertion or deletion takes time proportional to the logarithm of the number of items stored in the tree, `O(log n)`. However, some times the worst case can happen, when the tree isn't balanced and the time complexity is `O(n)` for all three of these functions. That is why self-balancing trees (AVL, red-black, etc.) are a lot more effective than the basic BST. -**Worst case scenario example:** This can happen when you keep adding nodes that are *always* larger than the node before (it's parent), the same can happen when you always add nodes with values lower than their parents. +**Worst case scenario example:** This can happen when you keep adding nodes that are *always* larger than the node before (its parent), the same can happen when you always add nodes with values lower than their parents. ### Basic operations on a BST - Create: creates an empty tree. diff --git a/guide/english/algorithms/sorting-algorithms/index.md b/guide/english/algorithms/sorting-algorithms/index.md index fefa1a23f4..5e740a7c7c 100644 --- a/guide/english/algorithms/sorting-algorithms/index.md +++ b/guide/english/algorithms/sorting-algorithms/index.md @@ -46,7 +46,7 @@ Sorting algorithms are said to be `in place` if they require a constant `O(1)` e * `Insertion sort` and `Quick-sort` are `in place` sort as we move the elements about the pivot and do not actually use a separate array which is NOT the case in merge sort where the size of the input must be allocated beforehand to store the output during the sort. -* `Merge Sort` is an example of `out place` sort as it require extra memory space for it's operations. +* `Merge Sort` is an example of `out place` sort as it require extra memory space for its operations. ### Best possible time complexity for any comparison based sorting Any comparison based sorting algorithm must make at least nLog2n comparisons to sort the input array, and Heapsort and merge sort are asymptotically optimal comparison sorts.This can be easily proved by drawing the desicion tree diagram. diff --git a/guide/english/bootstrap/get-started/index.md b/guide/english/bootstrap/get-started/index.md index 988e4fe96f..bed81d9e88 100644 --- a/guide/english/bootstrap/get-started/index.md +++ b/guide/english/bootstrap/get-started/index.md @@ -13,7 +13,7 @@ Adding bootstrap to your page is a fast process, just add the following to the ` ``` -You will also need to add the following between the `body` tags in your code. With bootstrap you'll be using `
` tags when using many of Bootstrap's features, each tag will have it's own unique set of classes applied that allows the tag to perform it's task. Other sections of this Bootstrap guide will show more examples of how Bootstrap uses `
` tags. (`
` tags are not exclusive to Bootstrap however Bootstrap makes use of them.). Below is the code that would would add to the `body` tags in your code to finish getting started. Keep in mind that while this creates the container, the page will still remain blank until you add content to the container. +You will also need to add the following between the `body` tags in your code. With bootstrap you'll be using `
` tags when using many of Bootstrap's features, each tag will have its own unique set of classes applied that allows the tag to perform its task. Other sections of this Bootstrap guide will show more examples of how Bootstrap uses `
` tags. (`
` tags are not exclusive to Bootstrap however Bootstrap makes use of them.). Below is the code that would would add to the `body` tags in your code to finish getting started. Keep in mind that while this creates the container, the page will still remain blank until you add content to the container. ```html