From 1598987241344d4e88c5b4343bc0206fd5539bb3 Mon Sep 17 00:00:00 2001 From: Elvira Quiroz Date: Mon, 5 Jul 2021 17:48:15 +0000 Subject: [PATCH] reviewing instructions --- exercises/01-Hello-World/README.es.md | 4 ++-- exercises/01-Hello-World/README.md | 6 ++--- exercises/01.1-The-Style-Tag/README.md | 4 ++-- exercises/01.2-Your-First-Style/README.es.md | 3 ++- exercises/01.2-Your-First-Style/README.md | 3 ++- exercises/01.3-Your-Second-Style/README.es.md | 2 +- exercises/01.3-Your-Second-Style/README.md | 2 +- exercises/02-Separate-Stylesheet/README.es.md | 2 +- exercises/02-Separate-Stylesheet/README.md | 4 ++-- exercises/02.1-Background/README.es.md | 9 ++++++-- exercises/02.1-Background/README.md | 9 ++++++-- exercises/03-Inline-Styles/README.es.md | 5 ++++- exercises/03-Inline-Styles/README.md | 8 ++++--- exercises/04-Class-Selector/README.es.md | 10 +++++++-- exercises/04-Class-Selector/README.md | 9 ++++---- exercises/04.1-Combined-Rules/README.es.md | 5 +++-- exercises/04.1-Combined-Rules/README.md | 5 +++-- .../04.2-Apply-several-classes/README.es.md | 4 ++-- .../04.2-Apply-several-classes/README.md | 2 +- exercises/04.3-id-Selector/README.es.md | 6 +++-- exercises/04.3-id-Selector/README.md | 7 ++++-- exercises/05-Specificity/README.es.md | 6 ++--- exercises/05-Specificity/README.md | 12 +++++----- exercises/06-Practicing-Rules/README.es.md | 16 ++++++-------- exercises/06-Practicing-Rules/README.md | 22 ++++++++----------- exercises/07-Very-Specific-Rules/README.es.md | 8 ++++--- exercises/07-Very-Specific-Rules/README.md | 8 ++++--- exercises/08-Rounded-Image/README.es.md | 6 ++--- exercises/08-Rounded-Image/README.md | 7 +++--- exercises/09-Anchor-Styles/README.es.md | 10 ++++----- exercises/09-Anchor-Styles/README.md | 5 ++--- exercises/10-Your-Own-Font/README.es.md | 9 ++++---- exercises/10-Your-Own-Font/README.md | 9 ++++---- exercises/11-Font-Awesome-Icons/README.es.md | 13 ++++++----- exercises/11-Font-Awesome-Icons/README.md | 6 +++-- .../12-Relative-Length-EM-REM/README.es.md | 17 +++++++------- exercises/12-Relative-Length-EM-REM/README.md | 19 +++++++++------- exercises/13-Anchor-Like-Button/README.es.md | 18 ++++++++------- exercises/13-Anchor-Like-Button/README.md | 16 +++++++------- 39 files changed, 175 insertions(+), 141 deletions(-) diff --git a/exercises/01-Hello-World/README.es.md b/exercises/01-Hello-World/README.es.md index 537c4a46..ea0be5b8 100644 --- a/exercises/01-Hello-World/README.es.md +++ b/exercises/01-Hello-World/README.es.md @@ -6,7 +6,7 @@ tutorial: "https://www.youtube.com/watch?v=rbtHLA813pU" CSS trata sobre estilos (styles). Para aplicar estilos, siempre debes seguir estos pasos: -1. Lee el HTML y elije en tu mente a qué elemento deseas decorar o aplicar estilos. +1. Lee el HTML y elije qué elemento deseas decorar o aplicar estilos. 1. Programáticamente selecciona el elemento que deseas decorar con los selectores de CSS. 2. Escribe el estilo que quieras usando las reglas CSS. @@ -35,4 +35,4 @@ Pega este código en tu sitio web para ver los resultados. Debería verse así: -![01 Hello World Exercise Preview](https://ucarecdn.com/7e9496c0-549a-4767-b771-13b9bfc5d9c2/) \ No newline at end of file +![01 Hello World Exercise Preview](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/01-1.png?raw=true) \ No newline at end of file diff --git a/exercises/01-Hello-World/README.md b/exercises/01-Hello-World/README.md index 50db2a76..798d0a19 100644 --- a/exercises/01-Hello-World/README.md +++ b/exercises/01-Hello-World/README.md @@ -5,9 +5,9 @@ tutorial: "https://www.youtube.com/watch?v=rbtHLA813pU" CSS is about styles. To apply styles you always have to follow this steps: -1. Read the HTML and pick in your mind what element you want to decorate or apply styles to. -1. Programatically select the element you want to style using CSS Selectors. -2. Write the styling that you want by using CSS rules. +1. Read the HTML and pick what element do you want to decorate or apply styles to. +2. Programatically select the element you want to style using CSS Selectors. +3. Write the styling that you want by using CSS rules. That is it! The rest is just semantics! 😁 diff --git a/exercises/01.1-The-Style-Tag/README.md b/exercises/01.1-The-Style-Tag/README.md index 1318ea16..df26f527 100644 --- a/exercises/01.1-The-Style-Tag/README.md +++ b/exercises/01.1-The-Style-Tag/README.md @@ -4,7 +4,7 @@ tutorial: "https://www.youtube.com/watch?v=C5sOchuD2d4" # `01.1` The Style Tag -If you want to add styles into a website by writing CSS you have to always add it withing a `` tag. +If you want to add styles into a website by writing CSS you have to always add it within a `` tag. You can have as many style tags as you want but it is recomended to have only one at the beginning of your website code. ```HTML @@ -14,7 +14,7 @@ You can have as many style tags as you want but it is recomended to have only on ## 📝 Instructions -Add a `` tag into your website and using CSS select the all `

` tags to turn their text into blue color. +Add a `` tag into your website and using CSS select all `

` tags to turn their text into blue color. ## 💻 Preview diff --git a/exercises/01.2-Your-First-Style/README.es.md b/exercises/01.2-Your-First-Style/README.es.md index b1c7613c..b63d6d1b 100644 --- a/exercises/01.2-Your-First-Style/README.es.md +++ b/exercises/01.2-Your-First-Style/README.es.md @@ -1,6 +1,6 @@ # `01.2` Tu Primer Estilo -Cuando usas CSS, la idea es aplicar `reglas css` a tus` elementos html`, siempre debes seleccionar primero el elemento y luego especificar qué reglas deseas aplicarle: +Cuando usas CSS, la idea es aplicar `reglas css` a tus` elementos html`, siempre debes seleccionar primero el elemento y luego especificar qué reglas deseas aplicarle. Por ejemplo, este es el código si quiero que todos los anchors de mi sitio web (etiquetas ``) sean azules (blue): @@ -13,4 +13,5 @@ a { ## 📝 Instrucciones: 1. En este momento, se está aplicando un estilo que se encarga de hacer el enlace rojo (red). + 2. Cambia el estilo para que tu enlace se vea amarillo (yellow). diff --git a/exercises/01.2-Your-First-Style/README.md b/exercises/01.2-Your-First-Style/README.md index 1e006510..ddba0982 100644 --- a/exercises/01.2-Your-First-Style/README.md +++ b/exercises/01.2-Your-First-Style/README.md @@ -6,7 +6,7 @@ tutorial: "https://www.youtube.com/watch?v=8b12AFC6bWs" When doing CSS, the idea is to apply `css rules` to your `html elements`, you always have to select the element first, and then specify what rules you want to apply to it: -For example, this is the code if I want to make all my website anchors (` tag's`) blue: +For example, this is the code if you want to make all my website anchors (` tag's`) blue: ```css a { @@ -17,4 +17,5 @@ a { ## 📝 Instructions: 1. Right now there is a style being applied that is responsable of making the anchor red. + 2. Change the style to make your anchor look yellow. diff --git a/exercises/01.3-Your-Second-Style/README.es.md b/exercises/01.3-Your-Second-Style/README.es.md index e5dd9f44..825c10a1 100644 --- a/exercises/01.3-Your-Second-Style/README.es.md +++ b/exercises/01.3-Your-Second-Style/README.es.md @@ -13,4 +13,4 @@ a { ## 📝 Instrucciones: 1. Haz que el fondo de tu sitio web sea azul (blue) seleccionando el `body` y aplicando la regla `background` con valor `blue`. -2. Compila y muestra una vista previa del ejercicio y tu resultado debe ser un body azul en la página (toda la página azul). +2. Compila y muestra una vista previa del ejercicio y tu resultado debe ser un body azul (toda la página azul). diff --git a/exercises/01.3-Your-Second-Style/README.md b/exercises/01.3-Your-Second-Style/README.md index fea640b4..e1d363a0 100644 --- a/exercises/01.3-Your-Second-Style/README.md +++ b/exercises/01.3-Your-Second-Style/README.md @@ -17,4 +17,4 @@ a { ## 📝 Instructions: 1. Make your website background blue by selecting the `body` and applying the `background` rule with a `blue` value. -2. Build and preview the exercise and your result should be a blue body of the page (the whole page blue). +2. Build and preview the exercise and your result should be a blue `body` (the whole page blue). diff --git a/exercises/02-Separate-Stylesheet/README.es.md b/exercises/02-Separate-Stylesheet/README.es.md index 88208dea..bdcc285d 100644 --- a/exercises/02-Separate-Stylesheet/README.es.md +++ b/exercises/02-Separate-Stylesheet/README.es.md @@ -2,7 +2,7 @@ Si usas la etiqueta html ``, puedes tener tus estilos en un archivo separado que normalmente se llama `styles.css`. -Esa es una práctica aún mejor porque te permite tener un sitio web a quien no le importe el diseño, puedes cambiar el CSS después y hacer que tu sitio web se vea 100% diferente, pero teniendo exactamente el mismo HTML. +Esa es una mejor práctica porque te permite tener un sitio web a sin diseño, puedes cambiar el CSS después y hacer que tu sitio web se vea 100% diferente, pero teniendo exactamente el mismo HTML. ## 📝 Instrucciones: diff --git a/exercises/02-Separate-Stylesheet/README.md b/exercises/02-Separate-Stylesheet/README.md index 24fc0c6a..acfcabdb 100644 --- a/exercises/02-Separate-Stylesheet/README.md +++ b/exercises/02-Separate-Stylesheet/README.md @@ -4,9 +4,9 @@ tutorial: "https://www.youtube.com/watch?v=T0anCc5fvSg" # `02` Separate Stylesheet -If you use the html `` tag, you can also have your styles on a separate file that we normally call `styles.css`. +If you use the html `` tag, you can also have your styles on a separate file that we usually call `styles.css`. -That is an event better practice because it lets you have an CSS agnostic website, you can change the CSS later and make the website look 100% different, but still have the same exact HTML. +That is an even better practice because it lets you have an CSS agnostic website, you can change the CSS later and make the website look 100% different, but still have the same exact HTML. ## 📝 Instructions: diff --git a/exercises/02.1-Background/README.es.md b/exercises/02.1-Background/README.es.md index 5c728192..3a5700ec 100644 --- a/exercises/02.1-Background/README.es.md +++ b/exercises/02.1-Background/README.es.md @@ -2,15 +2,20 @@ La regla `background` del CSS nos permite asignar y trabajar con el background de cualquier contenedor (container). Los valores de background pueden ser `color` o una `imagen`. -Si es una imagen, puedes especificar si quieres que la imagen se repita horizontalmente, verticalmente, ambas o ninguna, y también puedes especificar si quieres cambiar el tamaño y ajustar su tamaño al contenedor completo, entre otras propiedades eso puede ser modificado. +Si es una imagen, puedes especificar si quieres que la imagen se repita horizontalmente, verticalmente, ambas o ninguna, y también puedes especificar si quieres cambiar el tamaño y ajustar su tamaño al contenedor completo, entre otras propiedades eso puede modificarse. ## 📝 Instrucciones: 1. Construye el ejercicio. + 2. Verifica la vista previa. -3. En el archivo styles.css pon el background-size a 'contain' (verifica la pestaña styles.css) + +3. En el archivo styles.css pon el background-size a 'contain' (verifica la pestaña styles.css). + 4. Construye y previsualiza el ejercicio nuevamente. + 5. Cambia el background-repeat a 'inherit' para que se repita sobre el eje x y el eje y. + 6. Construye y previsualiza el ejercicio nuevamente. diff --git a/exercises/02.1-Background/README.md b/exercises/02.1-Background/README.md index 383149ad..d81d440a 100644 --- a/exercises/02.1-Background/README.md +++ b/exercises/02.1-Background/README.md @@ -6,16 +6,21 @@ tutorial: "https://www.youtube.com/watch?v=MJI0-sFmTe8" The `background` CSS rule allows us to assign and work with the background of any container. The background values can be a `color` or an `image`. -If it is an image you can specify if you want the image to repeat horizontally, vertically, both, or not at all, and you can also specify if you want it to resize and fit the whole container where its being applied, among other properties that can be modified. +If it is an image, you can specify if you want the image to be repeated horizontally, vertically, or both, or not at all, and you can also specify if you want it to resize and fit the whole container where its being applied, among other properties that can be modified. ## 📝 Instructions: 1. Build the exercise. + 2. Check the Preview. -3. On the styles.css file the background-size to 'contain' (check the styles.css tab). + +3. On the styles.css file change the background-size to 'contain' (check the styles.css tab). + 4. Build and Preview the exercise again. + 5. Change the background-repeat to 'inherit' to make it repeat over the x axis and y axis. + 6. Build and Preview the exercise again. diff --git a/exercises/03-Inline-Styles/README.es.md b/exercises/03-Inline-Styles/README.es.md index addc132b..36e1ed60 100644 --- a/exercises/03-Inline-Styles/README.es.md +++ b/exercises/03-Inline-Styles/README.es.md @@ -19,7 +19,10 @@ Nota: Puedes agregar tantas reglas CSS como desees, dentro de la misma línea, s 1. Establece un estilo inline para cambiar el color de fondo de la tabla a verde (green). Para este ejercicio, NO uses el styles.css :( +**Nota:** -### Pista: +Puedes agregar tantas reglas CSS como desees, dentro de la misma línea, separadas por punto y coma. + +### 💡Pista: - Como usar el background-size: http://lmgtfy.com/?q=css+inline+style diff --git a/exercises/03-Inline-Styles/README.md b/exercises/03-Inline-Styles/README.md index 4646c90b..87fb2848 100644 --- a/exercises/03-Inline-Styles/README.md +++ b/exercises/03-Inline-Styles/README.md @@ -4,7 +4,7 @@ tutorial: "https://www.youtube.com/watch?v=jIMPLzpryuI" # `03` Inline Styles -Inline styles are a very bad idea unless you have no choice (and that's a very uncommon situation). Sadly, we have to teach you how to do it because there is a chance you will need to use them at some point. +Inline styles are a very bad idea unless you have no other choice (and that's a very uncommon situation). Sadly, we have to teach you how to do it because you may need to use them at some point. To use inline styles, instead of declaring a tag in the header of the document, you have to set the "style" attribute of any element with the CSS code you need to apply to that specific element. @@ -16,7 +16,9 @@ For example: Will set the color of that specific link to red and the font-size to 14px -Note: You can append as many CSS rules as you want, within the same line, separated by semi-colon. +**Note:** + +You can append as many CSS rules as you want, within the same line, separated by semi-colon. ## 📝 Instructions: @@ -24,6 +26,6 @@ Note: You can append as many CSS rules as you want, within the same line, separa 1. Set an inline style to change the background color of the table to green. For this exercise, do NOT use styles.css :( -### Hint: +### 💡 Hint: - How to use the background-size: http://lmgtfy.com/?q=css+inline+style diff --git a/exercises/04-Class-Selector/README.es.md b/exercises/04-Class-Selector/README.es.md index c9d2364b..ccbfa6c8 100644 --- a/exercises/04-Class-Selector/README.es.md +++ b/exercises/04-Class-Selector/README.es.md @@ -4,14 +4,20 @@ Hay muchas formas de seleccionar los elementos HTML para aplicarles estilos, has #### 1) Selector de clase -Es el selector de CSS más popular, probablemente lo usarás cada 5 minutos. Usa la propiedad de clase del elemento HTML para seleccionar. La reglas de estilo se aplicarán a todos los elementos con la misma clase. +Es el selector de CSS más popular, probablemente lo usarás cada 5 minutos. + + Usa la propiedad de clase del elemento HTML para seleccionarlo. La reglas de estilo se aplicarán a todos los elementos con la misma clase. ```css .small{ font-size: 9px; } ``` -Nota: cualquier etiqueta html con `class="small"` tendrá un font-size de 9px. +**Nota:** + + Cualquier etiqueta html con `class="small"` tendrá un font-size de 9px. + + # 📝 Instrucciones: diff --git a/exercises/04-Class-Selector/README.md b/exercises/04-Class-Selector/README.md index aa8eb110..fd476e56 100644 --- a/exercises/04-Class-Selector/README.md +++ b/exercises/04-Class-Selector/README.md @@ -9,6 +9,7 @@ There are many ways to select HTML elements to apply styles to them, so far we h #### 1) `.class` Selector It is the most popular css selector, you will probably use it every 5 minutes. + Use the class property of the HTML element to select it. Styling rules will apply to all elements with the same class value ```css @@ -16,12 +17,12 @@ Use the class property of the HTML element to select it. Styling rules will appl font-size: 9px; } ``` -Note: any html tag with the `class="small"` will have a font-size of 9px. +**Note:** -# 📝 Instructions: +Any html tag with the `class="small"` will have a font-size of 9px. -Right now there is a class selected on the CSS that is called `.b-blue`. +# 📝 Instructions: -Please apply that class to both of the `

` tags in HTML. +Right now there is a class selected on the CSS that is called `.b-blue`. Please apply that class to both of the `

` tags in HTML. diff --git a/exercises/04.1-Combined-Rules/README.es.md b/exercises/04.1-Combined-Rules/README.es.md index 6bc1fcc9..4018ac21 100644 --- a/exercises/04.1-Combined-Rules/README.es.md +++ b/exercises/04.1-Combined-Rules/README.es.md @@ -23,10 +23,11 @@ border: black 1px solid; 2. Combina todas las reglas de background, menos el background size, en una sola línea usando la regla "background:". +*Nota:** -P.S: The background size no se puede combinar, los navegadores aún no lo admiten.\*\* + El background size no se puede combinar, los navegadores aún no lo admiten.\*\* -# Hint: +### Pista: - Como usar el background-size: http://lmgtfy.com/?q=css+background - Como usar el padding: http://lmgtfy.com/?q=css+padding diff --git a/exercises/04.1-Combined-Rules/README.md b/exercises/04.1-Combined-Rules/README.md index 8d2deab5..6b72a4d2 100644 --- a/exercises/04.1-Combined-Rules/README.md +++ b/exercises/04.1-Combined-Rules/README.md @@ -24,11 +24,12 @@ border: black 1px solid; 1. Combine the 4 padding rules into just one using the "padding" rule. -2. Combine the all background rules, but the background size, into just one line using the "background:" rule. +2. Combine the all background rules, but the background size, into just one line using the "background:" rule. +**Note:** -P.S: The background size cannot be combined, the browsers don't support it yet.\*\* + The background size cannot be combined, the browsers don't support it yet.\*\* # Hint: diff --git a/exercises/04.2-Apply-several-classes/README.es.md b/exercises/04.2-Apply-several-classes/README.es.md index 9555b6f3..47fe9c9e 100644 --- a/exercises/04.2-Apply-several-classes/README.es.md +++ b/exercises/04.2-Apply-several-classes/README.es.md @@ -7,11 +7,11 @@ Vamos a usar clases y aplicarlas al mismo elemento `

`.
9
``` -La clase `card`contiene las reglas de estilo para hacer que el div se vea como una carta: Bordes, ancho, etc. +La clase `card` contiene las reglas de estilo para hacer que el div se vea como una carta: bordes, ancho, etc. La clase `spades` contienes las reglas de estilo requeridas para convertir la carta a la pinta de picas (negra con el símbolo de picas). -Hay dos posibles clases de pintas que puedes aplicar al elemento html y hará que se vea como una carta de poker real. +Hay dos posibles clases de palos/pintas que puedes aplicar al elemento html y hará que se vea como una carta de poker real. # 📝 Instrucciones: diff --git a/exercises/04.2-Apply-several-classes/README.md b/exercises/04.2-Apply-several-classes/README.md index 0a38d6f0..27e90240 100644 --- a/exercises/04.2-Apply-several-classes/README.md +++ b/exercises/04.2-Apply-several-classes/README.md @@ -15,7 +15,7 @@ We are going to use to classes and apply them to the same `
` element. The class `card` contains the styling rules to make the div look like a card: Borders, Height, Width, etc. The class `spades` contains the styling rules needed to make the card turn into a spades suite (black and with a spades symbol). -There are two possible suite classes you can apply to the html element and it will make it look like a real poker card. +There are two possible suite classes you can apply to the html element to make it look like a real poker card. # 📝 Instructions: diff --git a/exercises/04.3-id-Selector/README.es.md b/exercises/04.3-id-Selector/README.es.md index 30df0b3b..e97a93fa 100644 --- a/exercises/04.3-id-Selector/README.es.md +++ b/exercises/04.3-id-Selector/README.es.md @@ -9,9 +9,11 @@ También puedes seleccionar un elemento por su `#id` y aplicarle estilos. font-size: 9px; } ``` -Usa la propiedad id del elemento HTML para seleccionar. Las IDs deberían ser únicas, solo un elemento puede tener la misma ID. +Usa la propiedad id del elemento HTML para seleccionarlo. Las IDs deben ser únicas, solo un elemento puede tener la misma ID. -Nota: La etiqueta HTML con `id="my_number_one"` tendrá un font-size de 9px. +**Nota:** + +La etiqueta HTML con `id="my_number_one"` tendrá un font-size de 9px. # 📝 Instrucciones: diff --git a/exercises/04.3-id-Selector/README.md b/exercises/04.3-id-Selector/README.md index fd4a6f67..f56541d9 100644 --- a/exercises/04.3-id-Selector/README.md +++ b/exercises/04.3-id-Selector/README.md @@ -13,8 +13,11 @@ You can also select an element by `#id` and apply stiles to it. font-size: 9px; } ``` -Use the id property of the HTML element to select it. IDs should be unique, only one element must have the same ID. -Note: The html tag with the `id="my_number_one"` will have a font-size of 9px. +Use the id property of the HTML element to select it. ID's should be unique, only one element must have the same ID. + +**Note:** + + The html tag with the `id="my_number_one"` will have a font-size of 9px. # 📝 Instructions: diff --git a/exercises/05-Specificity/README.es.md b/exercises/05-Specificity/README.es.md index 32721c69..aed4fe28 100644 --- a/exercises/05-Specificity/README.es.md +++ b/exercises/05-Specificity/README.es.md @@ -8,11 +8,11 @@ Porque cuanto más específico, más prioridad tiene. ## 📝 Instrucciones: -```Plain/Text + 1. Anula el color de fondo (background-color) de #thirditem sin eliminar ningún código CSS, simplemente agrega al CSS una regla más específica al final del documento para anular el color de fondo a verde. -``` -Tip: + +### 💡 Pista: Puedes usar la anotación **!important** : https://css-tricks.com/when-using-important-is-the-right-choice/ diff --git a/exercises/05-Specificity/README.md b/exercises/05-Specificity/README.md index c64d7a8b..0db7bd27 100644 --- a/exercises/05-Specificity/README.md +++ b/exercises/05-Specificity/README.md @@ -4,20 +4,18 @@ tutorial: "https://www.youtube.com/watch?v=3JxXkhxyAnI" # `05` Specificity -When creating a CSS document, you need to start from the most generic selector and end with the most specific ones, that is the way CSS works. +When creating a CSS document, you need to start from the most generic selectors and end with the most specific ones, that is the way CSS works. -It's all about the level of Specificity. -If you specify that your div with id="thirditem" has a blue background, and later in the document you specify that all divs will have yellow background, #thirditem will keep his blue background. punto! +It's all about the level of Specificity. If you specify that your `div` with `id="thirditem` has a blue background, and later in the document you specify that all `divs` will have yellow background, `#thirditem` will keep his blue background. punto! -Because the more specific, the more priority it has. +**Because the more specific, the more priority it has** ## 📝 Instrucciones: -```Plain/Text 1. Override the background-color of #thirditem without deleting any css code, simply append to the css a more specific rule at the end of the document to override the background-color to green. -``` -Tip: + +### 💡 Hint: You can use the **!important** annotation: https://css-tricks.com/when-using-important-is-the-right-choice/ diff --git a/exercises/06-Practicing-Rules/README.es.md b/exercises/06-Practicing-Rules/README.es.md index 2991fe70..dcf68f92 100644 --- a/exercises/06-Practicing-Rules/README.es.md +++ b/exercises/06-Practicing-Rules/README.es.md @@ -6,21 +6,19 @@ 1. Establece esta URL como la imagen de fondo de la página y repítela solo verticalmente: https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/background-vertical.jpg?raw=true -2. Cambia el tipo de fuente (font-type) del h1 a Courier - y el resto del sitio web a Times New Roman. +2. Cambia el tipo de fuente (`font-type`) del `h1` a `Courier` y el resto del sitio web a `Times New Roman`. -3. Cambia el color del h1 a rojo. +3. Cambia el color del `h1` a rojo(`red`). -4. Haz todos los h2 con un subrayado. +4. Haz todos los `h2` tengan subrayado. -5. Centra el h1 en el medio. +5. Centra el `h1`. -6. Agrega un left padding a todo el documento de 20px para que sea más fácil de leer. +6. Agrega un `left padding` a todo el documento de `20px` para que sea más fácil de leer. -7. Agrega un fondo blanco semitransparente (0.2) al primer párrafo de "3 reasons you know you are learning" para que sea más fácil de leer (tienes que usar rgba para esto), y luego aplica un padding de 5px a todos los lados de ese párrafo. +7. Agrega un fondo blanco semitransparente (0.2) al primer párrafo de "3 reasons you know you are learning" para que sea más fácil de leer (tienes que usar rgba para esto), y luego aplica un `padding` de `5px` a todos los lados de ese párrafo. -8. Cambia el color del anchor/enlace "hover" a verde (green) y elimina el subrayado. -    (tienes que colocar el anchor para probarlo). +8. Cambia el color del `anchor`/enlace "hover" a verde (`green`) y elimina el subrayado (tienes que colocar el anchor para probarlo). El resultado debería ser algo como esto: diff --git a/exercises/06-Practicing-Rules/README.md b/exercises/06-Practicing-Rules/README.md index 5d3e6e4c..1cf8c33d 100644 --- a/exercises/06-Practicing-Rules/README.md +++ b/exercises/06-Practicing-Rules/README.md @@ -10,25 +10,21 @@ tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU" 1. Set this URL as the background image of the page, and repeat it vertically only: https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/background-vertical.jpg?raw=true -2. Change the font-type of the h1 to Courier - and the rest of the website to Times new Roman. +2. Change the font-type of the `h1` to `Courier` + and the rest of the website to `Times new Roman`. -3. Change the color of h1 to red. +3. Change the color of `h1` to `red`. -4. Make all the h2's with an underline. +4. Make all the `h2's` with an `underline`. -5. Center the h1 to the middle. +5. Center the `h1` to the middle. -6. Add a left padding to the whole document - of 20px to make it easier to read. +6. Add a `left padding` to the whole document + of `20px` to make it easier to read. -7. Add a white semi-transparent background (0.2) to the first paragraph - of "3 reasons you know you are learning" to make it easier to - read (you have tu use rgba for that), and then apply a padding - of 5px to all sides of that paragraph. +7. Add a white `semi-transparent background (0.2)` to the `first paragraph` to make it easier to read (you have tu use rgba for that) and write down "3 reasons you know you are learning". Then apply a `padding` of `5px` to all sides of that paragraph. -8. Change the anchor "hover" color to green and remove the underline. - (you have to actually hover the anchor to test it). +8. Change the `anchor` "hover" color to `green` and remove the underline (you have to actually hover the anchor to test it). The result should be something like this: diff --git a/exercises/07-Very-Specific-Rules/README.es.md b/exercises/07-Very-Specific-Rules/README.es.md index a8b31623..a27eb0d4 100644 --- a/exercises/07-Very-Specific-Rules/README.es.md +++ b/exercises/07-Very-Specific-Rules/README.es.md @@ -7,9 +7,11 @@ En este ejercicio, puedes agregar tu código solo arriba del **READ ONLY BLOCK** ## 📝 Instrucciones: -1. Establece el color de texto **ul** a rojo (red) (anula los conflictos siendo más específico). -2. Establece el color de fondo (backgrounf-color) del segundo **li** del **ol** a verde (green) (no uses el selector #id). -3. Haz que las filas impares de las tablas tengan fondo amarillo usando **tr:nth-child**. +1. Establece el color de texto `ul` a rojo (`red`) (anula los conflictos siendo más específico). + +2. Establece el color de fondo (`backgrounf-color`) del segundo `li` del `ol` a verde (`green`) (no uses el selector #id). + +3. Haz que las filas impares de las tablas tengan fondo amarillo usando `tr:nth-child`. ![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/07-1.png?raw=true) diff --git a/exercises/07-Very-Specific-Rules/README.md b/exercises/07-Very-Specific-Rules/README.md index 57bd680b..90c25ecd 100644 --- a/exercises/07-Very-Specific-Rules/README.md +++ b/exercises/07-Very-Specific-Rules/README.md @@ -11,9 +11,11 @@ In this exercise, you can add your code only above the **READ ONLY BLOCK** of th ## 📝 Instructions: -1. Set the **ul** text color to red (override conflicts with specificity). -2. Set the background color of the second **li** of the **ol** to green (don't use the #id selector). -3. Make the odd rows of the tables with yellow background using **tr:nth-child**. +1. Set the `ul` text color to `red` (override conflicts with specificity). + +2. Set the background color of the second `li` of the `ol` to `green` (don't use the #id selector). + +3. Change the odd rows of the tables to a yellow background using `tr:nth-child`. ![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/07-1.png?raw=true) diff --git a/exercises/08-Rounded-Image/README.es.md b/exercises/08-Rounded-Image/README.es.md index c2aade86..e7375c8d 100644 --- a/exercises/08-Rounded-Image/README.es.md +++ b/exercises/08-Rounded-Image/README.es.md @@ -2,14 +2,14 @@ Muchos sitios web usan imágenes de perfil redondeadas ¡una técnica que realmente hace que un sitio web sea más hermoso! -La forma obvia de crear una imagen de perfil redondeada es crear una etiqueta de imagen y aplicar un border-radius: 100%. El problema con este enfoque es que solo funciona para imágenes cuadradas ... las imágenes de perfil con diferentes altura y ancho no se verán como un círculo, se verán como óvalos: +La forma obvia de crear una imagen de perfil redondeada es crear una etiqueta de imagen y aplicar un `border-radius: 100%`. El problema con este enfoque es que solo funciona para imágenes cuadradas... Las imágenes de perfil generalmente tienen diferente altura y ancho no se verán como un círculo, se verán como óvalos: ![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/08-1.png?raw=true) ## 📝 Instrucciones: -Adicionalmente a border-radius tenemos que tambien utilizar la propiedad `object-fit`, [aqui hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721). +Adicionalmente a `border-radius` tenemos que tambien utilizar la propiedad `object-fit`, [aqui hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721). -Si la imagen es mas grande que el div y quieres centrarla o enfocarte en una zona en particular puedes utilizar `object-position`. +Si la imagen es más grande que el `div` y quieres centrarla o enfocarte en una zona en particular puedes utilizar `object-position`. En este articulo puedes leer más [sobre la propiedad object fit](https://css-tricks.com/on-object-fit-and-object-position/) diff --git a/exercises/08-Rounded-Image/README.md b/exercises/08-Rounded-Image/README.md index 22bf00c9..3e262440 100644 --- a/exercises/08-Rounded-Image/README.md +++ b/exercises/08-Rounded-Image/README.md @@ -2,16 +2,15 @@ A lot of websites use rounded profile images, a technique that really makes a website more beautiful! -The obvious way create a rounded profile picture is to create an image tag and apply border-radius:100%. The problem with this approach, is that it only works for squared pictures... profile pictures with different height and width will not look like a circle, they will look like ovals: +The obvious way create a rounded profile picture is to create an image tag and apply `border-radius:100%`. The problem with this approach, is that it only works for squared pictures... Profile pictures with different height and width will not look like a circle, they will look like ovals: ![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/08-1.png?raw=true) ## 📝 Instructions: +In this case, in addition to `border-radius`, you will have to use the `object-fit` css property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721). -In addition to the border-radius you have to use the `object-fit` css property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721). - -If the image ends up being bigger than the div (or with different proportions) we can adjust the object-position to choose what part of the image we want to display inside of the circle. +If the image ends up being bigger than the `div` (or with different proportions) you can adjust the `object-position` to choose what part of the image you want to display inside of the circle. You can also read [this great article about object fit](https://css-tricks.com/on-object-fit-and-object-position/) diff --git a/exercises/09-Anchor-Styles/README.es.md b/exercises/09-Anchor-Styles/README.es.md index 49e7507d..29ab2500 100644 --- a/exercises/09-Anchor-Styles/README.es.md +++ b/exercises/09-Anchor-Styles/README.es.md @@ -1,22 +1,20 @@ # `09` Estilos de enlaces (anchor) 3D -A las personas les gusta sentir que están haciendo clic en algo, un gran enfoque para lograrlo es fingir un efecto 3D. Para hacerlo, los diseñadores normalmente juegan con los bordes. Ejemplo: +A las personas les gusta sentir que están haciendo clic en algo, uuna manera de lograrlo es fingir un efecto 3D. Para hacerlo, los diseñadores normalmente juegan con los bordes, por ejemplo: ![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/09-1.png?raw=true) -Puedes controlar qué reglas css se aplican a cada estado de un enlace utilizando los selectores: ":hover" (para el mouse) o "active" (para presionar el mouse), por ejemplo: +Puedes controlar qué reglas css se aplican a cada estado de un `anchor` utilizando los selectores: `:hover` (para el mouse) o `active` (para presionar el mouse), por ejemplo: ```css a:active { - /* aquí puedes especificar cualquier regla de css que aplique -   al anchor mientras se presiona' */ + /* aquí puedes especificar cualquier regla de css que aplique al anchor mientras se presiona' */ } ``` ## 📝 Instrucciones: - -1. Cambia los colores del borde del enlace (anchor), cuando la presionas, a lo siguiente: +1. Cambia los colores del borde del anchor, cuando lo presionas, a lo siguiente: ```css border-color: #000 #aaa #aaa #000; diff --git a/exercises/09-Anchor-Styles/README.md b/exercises/09-Anchor-Styles/README.md index abf0bc33..0340bc88 100644 --- a/exercises/09-Anchor-Styles/README.md +++ b/exercises/09-Anchor-Styles/README.md @@ -1,10 +1,10 @@ # `09` 3D Anchor Styles -People like to feel that they are clicking on something, a great approach to accomplish that is by faking a 3D effect. To do so, designers normally play with the borders. Example: +People like to feel that they are clicking on something, a great approach to accomplish that is by faking a 3D effect. To do so, designers normally play with the borders, for example: ![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/09-1.png?raw=true) -You can control what css rules apply to each state of an anchor by using the ":hover" (for mouse hover) or ":active" (for mouse pressing) selectors, example: +You can control what css rules apply to each state of an anchor by using the `:hover` (for mouse hover) or `:active` (for mouse pressing) selectors, example: ```css a:active { @@ -15,7 +15,6 @@ a:active { ## 📝 Instructions: - 1. Change the border colors of the anchor, when being pressed, to the following: diff --git a/exercises/10-Your-Own-Font/README.es.md b/exercises/10-Your-Own-Font/README.es.md index 978ca31c..2af962f6 100644 --- a/exercises/10-Your-Own-Font/README.es.md +++ b/exercises/10-Your-Own-Font/README.es.md @@ -1,18 +1,19 @@ # `10` Tu Propia Fuente -Las fuentes de Google se pueden encontrar aquí: https://fonts.google.com +Aquí puedes encontrar las fuentes de Google: https://fonts.google.com -Después de elegir su favorita, puedes usarla al vincular su sitio web con la URL en la que se almacena la fuente. Tienes que hacer eso en la etiqueta del documento HTML de esta manera: +ELige la que más te guste, y úsala vinculando tu sitio web con la URL en la que se almacena la fuente. Tienes que hacer eso en la etiqueta del documento HTML de esta manera: ```Plain/Text ``` -Después de vincular tu fuente, debes asignar la regla CSS "font-family" a lo que quieras aplicarle la fuente, por ejemplo, un

. +Después de vincular tu fuente, debes asignar la regla CSS `font-family` a lo que quieras aplicarle la fuente, por ejemplo, un

. ## 📝 Instrucciones: 1. Enlaza cualquier fuente de google que desee en el sitio web. -2. Aplica esa familia de fuentes específica a #myTitle. + +2. Aplica esa `font-family`(familia de fuentes)específica a #myTitle. diff --git a/exercises/10-Your-Own-Font/README.md b/exercises/10-Your-Own-Font/README.md index a872e4be..e563b0a1 100644 --- a/exercises/10-Your-Own-Font/README.md +++ b/exercises/10-Your-Own-Font/README.md @@ -1,18 +1,19 @@ # `10` Your Own Font -Google Fonts can be found here: https://fonts.google.com +Yo canfind Google Fonts here: https://fonts.google.com -After you pick your favorite one, you can use it by linking your website with the URL in which the font is stored. You have to do that in the tag of the HTML document like this: +Pick your favorite one, and then use it by linking your website with the URL in which the font is stored. You have to do that in the tag of the HTML document like this: ```Plain/Text ``` -After your font is linked you need to assign the "font-family" CSS rule to whatever you want to apply the font, for example an `

`. +After your font is linked you need to assign the `font-family` CSS rule to whatever you want to apply the font, for example an `

`. ## 📝 Instructions: 1. Link any google-font that you like into the website. -2. Apply that specific font-family to #myTitle. + +2. Apply that specific `font-family` to #myTitle. diff --git a/exercises/11-Font-Awesome-Icons/README.es.md b/exercises/11-Font-Awesome-Icons/README.es.md index 8dedafe1..b0abc9da 100644 --- a/exercises/11-Font-Awesome-Icons/README.es.md +++ b/exercises/11-Font-Awesome-Icons/README.es.md @@ -1,20 +1,21 @@ # `11` Iconos Font Awesome -Como desarrollador / diseñador, desea utilizar ciertos iconos para que tu sitio web sea fácil de entender; Por ejemplo, sabemos que un icono de "papelera" significa "eliminar". +Como desarrollador / diseñador, querrás utilizar ciertos iconos para que tu sitio web sea fácil de entender. Por ejemplo, sabemos que el icono de "papelera" significa "eliminar". ¡Pero usar iconos puede ser frustrante y llevar mucho tiempo! porque cada icono es una imagen y trabajar con imágenes ¡es horrible! -Font-awesome resuelve el problema de la "imagen" creando una nueva fuente: cada letra es un ícono diferente y ahora puedes importar toda la fuente en su sitio web y usar el ícono que desees. +Font-awesome resuelve el problema de la "imagen" creando una nueva fuente en donde cada letra es un ícono diferente y ahora puedes importar toda la fuente desde el sitio web y usar el ícono que quieras. Después de vincular tu sitio web con font-awesome, puedes usar lo siguiente para codificar e insertar un icono específico: ```html - "camera-retro" será el nombre de tu icono, -puedes encontrar todos los nombres disponibles aquí: http://fontawesome.io/icons/ + + +``` +Puedes encontrar todos los nombres disponibles aquí: http://fontawesome.io/icons/ ``` ## 📝 Instrucciones: - -Agrega dos elementos más a tu lista y agregua un icono diferente al comienzo de cada elemento. +Agrega dos elementos más a tu lista(`li`) y agrega un icono diferente al comienzo de cada elemento. diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/11-Font-Awesome-Icons/README.md index 7a03a637..0228acd0 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/11-Font-Awesome-Icons/README.md @@ -9,9 +9,11 @@ Font-awesome solve the "image" problem by creating a new font- each letter is a After linking your website with font-awesome, you can use the following to code to insert a specific icon: ```html - "camera-retro" will be the name of the icon, -you can find all the available names here: http://fontawesome.io/icons/ + + ``` +You can find all the available names here: http://fontawesome.io/icons/ + ## 📝 Instructions: diff --git a/exercises/12-Relative-Length-EM-REM/README.es.md b/exercises/12-Relative-Length-EM-REM/README.es.md index 48b13c26..03622fe8 100644 --- a/exercises/12-Relative-Length-EM-REM/README.es.md +++ b/exercises/12-Relative-Length-EM-REM/README.es.md @@ -1,24 +1,25 @@ # `12` Longitud Relativa EM, REM -Hasta ahora, hemos trabajado con píxeles como unidad de medida, por ejemplo, diciendo que una caja tiene 100 px de ancho. +Hasta ahora, hemos trabajado con píxeles como unidad de medida, por ejemplo, diciendo que un contenedor o caja tiene `100px` de ancho. -Hay otros tipos de unidades que no son fijas, sino relativas. Las usamos cuando queremos que el tamaño del elemento esté relacionado con otro elemento o unidad de medida. +Hay otros tipos de unidades que no son absolutas, sino relativas. Las usamos cuando queremos que el tamaño del elemento esté relacionado con otro elemento o unidad de medida. -### Ejemplo usando EM: +### Ejemplo usando em: -En este ejercicio tenemos dos encabezados

. Ambos son

, pero uno es más grande que el otro porque los encabezados tienen font-size relativos por defecto. Dado que el primer div tiene un font-size más grande, el título cambia de tamaño en consecuencia y el heading se adapta. +En este ejercicio tenemos dos encabezados

. Ambos son

, pero uno es más grande que el otro porque los encabezados tienen `font-size` relativos por defecto. Dado que el primer div tiene un font-size más grande, el título cambia de tamaño en consecuencia y el heading se adapta. -```Plain/Text em: Relativo al font-size actual del padre. + rem: Relativo al font-size original de la página. -``` + ## 📝 Instrucciones: -1. Proporciona un font-size de 0.8 em a ambos h2 -2. Ahora asigna un font-size de 0.8rem a ambos h3 +1. Proporciona un `font-size` de `0.8em` a ambos `h2` +2. Ahora asigna un `font-size` de `0.8rem` a ambos `h3` El resultado debería verse así: + ![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/raw/master/.learn/assets/12-1.png?raw=true) diff --git a/exercises/12-Relative-Length-EM-REM/README.md b/exercises/12-Relative-Length-EM-REM/README.md index 009bfc87..51d14481 100644 --- a/exercises/12-Relative-Length-EM-REM/README.md +++ b/exercises/12-Relative-Length-EM-REM/README.md @@ -1,21 +1,24 @@ # `12` Relative Length EM, REM -By now, we are used to working with pixels as measurement unit, for example, saying that a box has 100px of width. +By now, we are used to working with pixels as measurement unit, for example, saying that a box has `100px` of width. There are other types of units that are not fixed, but relative. We use them when we want the element size to be related to another element or measurement unit. -### Example using em: +### Example using EM: + In this exercise we have two `

` headings. They are both `

`, but one is bigger than the other because headings have relative font-sizes by default. Since the first div has a bigger based font-size, then the heading resizes accordingly. -```Plain/Text -em: Relative to the current font-size of the parent. -rem: Relative to the original font-size of the page. -``` + +EM: Relative to the current font-size of the parent. + +REM: Relative to the original font-size of the page. + ## 📝 Instructions: -1. Give a font-size of 0.8em to both h2's -2. Now give a font-size of 0.8rem to both h3's +1. Give a `font-size` of `0.8em` to both `h2`'s + +2. Now give a `font-size` of `0.8rem` to both `h3`'s The result should look like this: diff --git a/exercises/13-Anchor-Like-Button/README.es.md b/exercises/13-Anchor-Like-Button/README.es.md index d9291540..1a7b5d08 100644 --- a/exercises/13-Anchor-Like-Button/README.es.md +++ b/exercises/13-Anchor-Like-Button/README.es.md @@ -6,16 +6,18 @@ Los enlaces (anchors) no solo se usan dentro del texto: cuando va a usar enlaces Siga estos pasos para que su enlace (anchor) se vea así -1. Haz que se vea como una caja: establece el padding en 10px -2. Bordes redondeados: establece el border-radius en 4px -3. Encuentra y aplica el color: usa el selector de color para encontrar el color y aplicar el background de ese color. -4. Eliminar subrayado: establece text-decoration a none -5. Establecer el color del texto en blanco +1. Haz que se vea como una caja: establece el padding en `10px`. -![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/13-1.gif?raw=true) +2. Bordes redondeados: establece el `border-radius` en `4px`. + +3. Encuentra y aplica el color: usa el selector de color para encontrar el color y aplicar el background de ese color. -Para que el botón se vea diferente cuando el usuario pasa el mouse por encima, usamos el selector "hover":http://lmgtfy.com/?q=how+to+use+the+hover +4. Eliminar subrayado: establece `text-decoration` a `none`. +5. Establecer el color del texto en blanco (`white`) -1. Dentro del selector de hover: cambie el fondo del botón a un color naranja más oscuro. +**Para que el botón se vea diferente cuando el usuario pasa el mouse por encima, usamos el selector "hover": http://lmgtfy.com/?q=how+to+use+the+hover** +6. Dentro del selector de hover: cambie el fondo del botón a un color naranja más oscuro. + +![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/13-1.gif?raw=true) diff --git a/exercises/13-Anchor-Like-Button/README.md b/exercises/13-Anchor-Like-Button/README.md index 5ef9e812..c8078b84 100644 --- a/exercises/13-Anchor-Like-Button/README.md +++ b/exercises/13-Anchor-Like-Button/README.md @@ -4,18 +4,18 @@ Anchors are not only used within text- when you are going to use anchors outside ## 📝 Instructions: +1. Make it look like a box: Set `padding` to `10px`. -1. Make it look like a box: Set padding to 10px -2. Rounded borders: Set border-radius to 4px -3. Find and apply the color: Use the color picker to find the color and apply make the background to that color. -4. Remove underline: Set text-decoration to none -5. Set the color of the text to white +2. Rounded borders: Set `border-radius` to `4px`. +3. Find and apply the color: Use the color picker to find the color and apply make the background to that color. -![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/13-1.gif?raw=true) +4. Remove underline: Set `text-decoration` to `none`. -To make the button look different when the user hovers over with the mouse, we use the "hover" selector: http://lmgtfy.com/?q=how+to+use+the+hover +5. Set the color of the text to `white`. +**To make the button look different when the user hovers over with the mouse, we use the "hover" selector: http://lmgtfy.com/?q=how+to+use+the+hover ** -1.Inside of the :hover selector change the background of the button to a darker orange. +6. Inside of the :hover selector change the background of the button to a darker orange. +![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/13-1.gif?raw=true) \ No newline at end of file