Ironhack | Learnings traducidas.

Basic_Data_Types_Arrays.md

Tipos de datos básicos: Arrays

Objetivos

Después de esta lección aprenderás a:

• Explicar qué es un array y para qué se utiliza.
• Crear un array en JavaScript.
• Realizar algunas operaciones simples en un array.
• Agregue y elimine elementos de un array.

Introducción a las estructuras de datos

Las estructuras de datos son datos almacenados en colecciones. Estas colecciones almacenarán datos como listas (matrices) o como colecciones asociativas (objetos).

Hay muchas estructuras de datos simples y complejas, muchas veces variando según el lenguaje de programación que estás usando. En los lenguajes dinámicos como JavaScript, Arrays y Objects (serán tratados más adelante) serán los más comunes.

Hay cursos dedicados exclusivamente al tema de las estructuras de datos, que a menudo se cubren en gran medida en las clases introductorias de informática. ¡Puede ser una buena idea investigar esto en profundidad después del curso!

¿Qué es una array?

Un array o arreglo es una de las primeras estructuras de datos que usará. Los array son ampliamente utilizados en casi todos los lenguajes de programación. ¿Pero por qué?

El significado semántico detrás de una cadena es una "lista de caracteres". Los array y otras estructuras de datos nos permiten describir y manipular otros tipos de datos de manera más eficiente.

Un array es solo una colección de cualquier cosa. Puede poner cualquier cosa en su lista: strings, numbers, objects y otras estructuras de datos. Incluso puede mezclar tipos en el mismo array.

Creando un array

Un array vacío

En JavaScript, un arreglo se declara utilizando corchetes ([]). Esto también se llama crear un arreglo literal.

Un ejemplo, usando animales:

var arregloAnimales = [];

¡Felicitaciones, has creado tu primer arreglo!

Un arreglo prepoblado

Puedes crear arreglos con datos en su inicialización:

var arregloAnimales = ['perro', 'gato', 'serpiente'];

Operaciones básicas con arreglos

Al crear un arreglo:

• Cada "cosa" dentro del arreglo se llama elemento. Cada elemento en el arreglo está separado por comas.
• Podemos acceder a un elemento particular en un array con su índice. Al igual que las cadenas, el índice comienza en 0.

https://codepen.io/ironhack/pen/VKYOqP

Puedes recuperar la longitud de un arreglo con el método length:

https://codepen.io/ironhack/pen/mAykJX

Obtener el último elemento en un arreglo puede ser un poco complicado. Usemos un poco de matemáticas y lógica para hacerlo posible usando el método length:

https://codepen.io/ironhack/pen/ozgRRB

Agregando y quitando elementos

Tu arreglo no sería tan útil si no pudiera cambiar lo que contenía después de su creación. Aprenderás cómo insertar un elemento:

• Al final del arreglo.
• En una posición específica en el conjunto.
• Al comienzo del arreglo.

Agregar al final de un arreglo

El método push agrega un nuevo elemento al final del arreglo.

https://codepen.io/ironhack/pen/EgaBPK

Se llama a Push en el arreglo y toma como argumento el elemento que deseas agregar. En este caso, el arreglo es animalArray, y el elemento para agregar es Lizard.

Agregar un elemento en una posición específica del arreglo

Puedes agregar elementos en una posición específica en un arreglo, pero ten en cuenta cómo funciona.

JavaScript completará todos los demás elementos con undefined. El elemento undefined se representa como una cadena vacía.

Esto también se usa para actualizar un valor de elemento en situaciones donde ese índice de elemento ya existe.

https://codepen.io/ironhack/pen/gwbNAK

Agregar un elemento al comienzo del arreglo

El método push siempre agregará al final, por lo que si deseas agregar desde el principio, lo que estás buscando es el método unshift.

https://codepen.io/ironhack/pen/ORPZXo

Eliminar elementos del arreglo

Quitar elementos es un poco más complicado de lo que parece. La pregunta que debes hacer es: "¿qué hacer con el elemento que se eliminó después?".

Hay un método de eliminación que elimina un elemento de un arreglo, pero reemplaza el elemento con indefinido.

https://codepen.io/ironhack/pen/QKwXKP

En cambio, es más probable que deseemos eliminar el elemento y mover los índices de la matriz hacia atrás. Utiliza un método llamado splice para hacer eso. Recibe dos argumentos:

• El primero define el índice que deseas eliminar.
• El segundo define cuántos elementos se eliminarán a partir de esta posición.

https://codepen.io/ironhack/pen/qaEZWY

Ejercicio

Realicemos algunas operaciones del arreglo de arriba.

• Agrega dos de tus animales favoritos al final del arreglo.
• Elimina los dos primeros elementos del arreglo.
• Reemplaza el último elemento del arreglo con la palabra "último".

Iterando un arreglo

Uno de los usos más comunes de un ciclo es iterar sobre un arreglo. Esto simplemente significa pasar por cada elemento de un arreglo.

Se puede usar cualquier ciclo para iterar a través de un arreglo, pero algunos son preferibles porque son más simples y generalmente se ven mejor.

Veamos 2 formas de imprimir cada elemento en un arreglo. Con los ciclos for y while, aprovechará el índice de la matriz para seleccionar elementos específicos.

Cliclo for

Vamos a crear un bucle para contar desde 0 hasta el final de la matriz, y luego usar nuestro contador para hacer referencia a un elemento en particular.

https://codepen.io/ironhack/pen/YGzJrY

Ten en cuenta dos cosas diferentes:

• El índice o contador comienza en 0. Esto corresponde al primer índice de elementos de nuestro arreglo.
• Sigue girando hasta que alcanzo la longitud del arreglo.

❗ Recuerda Si una matriz tiene 3 elementos, el índice '2' será el último. Esto se llama Numeración de Base Cero.

var lastIndex = array.length - 1;

Ciclo while

La estructura del ciclo while permanece igual. Al igual que el bucle for, inicia su contador en 0 y cuenta hasta que llega al final del arreglo.

https://codepen.io/ironhack/pen/BLaqXv

Bonus: forEach

La herramienta de iteración de matriz más reciente se llama foreach. Es preferible para los demás debido a la legibilidad.

ForEach es un método de matriz que itera por cada elemento de la matriz por ti.

Estructura

https://codepen.io/ironhack/pen/kkaQNr

Como habrás notado, estás pasando por cada función como parámetro. Esto se llama callback. No te preocupes por esto ahora, lo aprenderás más adelante en el pre-work.

Ejercicio Foreach

• Crea una matriz con 6 de tus comidas favoritas.
• Con el ciclo que elijas, recorre el conjunto, pero solo imprime los alimentos con un índice par.

Ejercicio: operaciones comunes en arreglos

Sumar los números

Sumar una lista de números en el código es muy común. En este ejercicio, completarás los espacios en blanco en el codigo para encontrar la suma de un arreglo de números. Los pasos para sumar un arreglo de números son:

• Crea una variable para mantener el total. Esto a menudo se llama algo así como suma o total. En este ejercicio, es suma, y ya lo hemos establecido en 0.
• Crea un arreglo de números. Esto ya se ha hecho, y simplemente se llama números.
• Itera sobre cada elemento en el arreglo. Ya hemos creado la estructura para un bucle for, pero debes completar los espacios en blanco. Recuerda, su condición final se basará en la variable de incremento que alcance la longitud de los arreglos.
• • En el ciclo for, agrega cada elemento del arreglo a la suma. Al iterar sobre cada número, toma el valor y agrégalo a la suma variable.
• (Opcional) Imprime la suma.

La suma final debería ser 29.

https://codepen.io/ironhack/pen/VbyoyE

Promedio de los números

En estrecha relación con la suma de números, promediar también es extremadamente común. El proceso para generar un promedio es muy similar.

Comienza completando todos los pasos para sumar el arreglo.

Después de haber sumado el arreglo, divide la suma entre la cantidad total de elementos en el arreglo y asígnalo a una variable llamada promedio.

El promedio debería ser: 8.1666.

https://codepen.io/ironhack/pen/PmQYbN

Encuentra el más grande

La búsqueda de arreglos para elementos particulares ocurre todo el tiempo. Vamos a crear un programa para encontrar el número más grande en una serie.

Los pasos para encontrar el número más grande en un arreglo son:

• Crea una variable para contener el número más grande actual llamado currentLargest. Antes de iterar sobre el arreglo, el valor será nulo.
• Itera a través de el arreglo. Para cada número en el conjunto, compáralo con el valor más grande.
• • Si el número iterado es mayor que currentLargest, es el nuevo currentLargest.
• • Si es menor que el actual Mayor, no pasa nada
• haz console.log de currentLargest para ver el número más grande en el arreglo.

https://codepen.io/ironhack/pen/WjMeJZ

Resumen

En esta lección, has aprendido qué son los arreglos, algunas operaciones básicas que puedes realizar en ellas y cómo agregar y eliminar elementos.

Estas operaciones son vitales para tu éxito, ya que los arreglos y cadenas se encuentran entre algunos de los tipos de datos más comunes que encontrarás en el código.

Recursos extras

• Mozilla Developer Network Array

Basic_Data_types_Objects.md

Tipos de datos básicos: Arrays

Objetivos

Después de esta lección aprenderás a:

• Comprender los objetos como una colección.
• Explicar las relaciones clave-valor.
• Usar Object en JavaScript y comprenda su importancia.
• Agregar, elimine y cambie claves y valores en objetos.
• Usar objetos usando notación de puntos y corchetes.
• Listar las propiedades de un objeto.

Introducción

Un objeto en JavaScript es una colección compuesta de pares clave-valor.

El par clave-valor es un concepto muy importante para comprender cómo funcionan los tipos de datos de Object en JavaScript.

En la programación, un par clave-valor es un conjunto de dos elementos de datos vinculados:

• La clave es una cadena que identifica una propiedad de un objeto.

• El valor es el contenido asociado a la clave indicada. Las claves también son únicas en un objeto, una tecla siempre tendrá solo un valor asociado. Este valor podría ser cualquier tipo de valor de JavaScript.

El ejemplo más común para explicar este concepto es un diccionario. La clave es la palabra que estás buscando, mientras que el valor es la descripción de esa palabra:

Sitio web: grupo de páginas conectadas en la World Wide Web considerado como una entidad única, generalmente mantenida por una persona u organización y dedicada a un solo tema o varios temas estrechamente relacionados.

La palabra sitio web es la clave, y la definición es el valor asociado de esta clave, que es única en el Diccionario.

¿Por qué deberíamos usar objetos?

Los objetos son útiles para agrupar valores que pertenecen juntos en una sola unidad. Los objetos pueden almacenar relaciones entre variables y propiedades usando asociaciones de clave y valor.El valor de un objeto puede ser de cualquier tipo que necesite: strings, números, arreglos, funciones, ¡e incluso otros objetos!

Este tipo de composición es muy útil, ya que puede almacenar variables que contienen información relacionada en un objeto.

Al usar esta notación, tu código será mucho más claro y fácil de entender. Te ayudará a tener más código semántico, y la mantenibilidad del código será mucho más fácil.

❗ Crea un nuevo codepen y sigue junto con los fragmentos de código.

Definición de objeto

Crear objetos es súper fácil, todo lo que necesitas hacer es usar las llaves { y }, y agregarle sus claves y valores separados por comas:

{
  key1: value1,
  key2: value2,
  key3: value3
}

A pesar de que le decimos que las claves siempre son strings, normalmente no es necesario ajustar estas teclas entre comillas al definir un objeto:

{
  name: "Ironhack"
}

Será traducido a:

{
  "name": "Ironhack"
}

Objeto (ejemplo)

Hemos preparado una definición de Objeto para mostrarte su estructura. En el ejemplo, tienes un objeto con un historial de los juegos olímpicos:

{
  athletics100Men: "Justin Gatlin"
}

En este ejemplo, solo tienes una propiedad, athletics100Men, que le dará el valor para el atletismo masculino de 100 metros de registro olímpico.

• La clave es athletics100Men.
• • El valor asociado es Justin Gatlin.

Recuerde que las claves no pueden tener espacios como mi clave, y deben ser camelCase.

Los objetos son literales, y se pueden almacenar en variables. Guardemos nuestro objeto en la variable olympicRecords:

var olympicRecords = {
  athletics100Men: "Justin Gatlin"
}

Si deseas almacenar Mike Powel y su registro de salto de longitud de 8.95m, puedes hacerlo agregando otra clave:

var olympicRecords = {
  athletics100Men: "Justin Gatlin",
  athleticsLongJumpMen: "Mike Powel"
}

❗ Debes separar las propiedades athletics100Men y athleticsLongJumpMen con una coma después del valor, de lo contrario, ¡le dará un error!

Accediendo a los valores

Si intenta acceder a olympicRecords, devolverá un objeto, el contenedor de todas las propiedades.

console.log(olympicRecords)
=> Object { athletics100Men: "Justin Gatlin", athleticsLongJumpMen: "Mike Powel" }

¿No sería útil acceder a los valores dentro del objeto? Tienes dos formas diferentes de hacer esto: notación de puntos y notación de corchetes.

Accediendo a valores con notación de puntos

olympicRecords.athletics100Men // => "Justin Gatlin"

Accediendo a valores con notación de corchetes

olympicRecords["athletics100Men"] // => "Justin Gatlin"

💡 Con algunas excepciones, hay pocas diferencias entre los dos. Sin embargo, es una buena práctica usar la notación de puntos tanto como puedas porque es más corta y más limpia.

Agregar propiedades al objeto

Agreguemos algunas propiedades nuevas (pares clave-valor) a su objeto. Tiene dos formas diferentes de agregar nuevas propiedades al objeto: mientras declara el objeto y después de haberlo declarado.

Agreguemos al atleta olímpico más condecorado de todos los tiempos, el récord olímpico en la categoría de natación para hombres de 200 metros Michael Phelps.

Puede agregar una nueva propiedad al objeto cuando lo declara. Fácil:

var olympicRecords = {
  athletics100Men: "Justin Gatlin",
  athleticsLongJumpMen: "Mike Powel",
  swimming200Men: "Michael Phelps"
}

Como puede ver, puede agregar muchas claves como desee dentro de un objeto, todo lo que necesita hacer es separar todas las propiedades con una coma.

Agregar propiedades con notación de puntos

También puedes agregar propiedades a un objeto después de definirlo. De la misma manera que declaras una variable, necesitas darle un nombre y un valor. Para ello, crea una nueva clave asociada al objeto y asígnale un valor:

var olympicRecords = {
  athletics100Men: "Justin Gatlin",
  athleticsLongJumpMen: "Mike Powel",
}

olympicRecords.swimming200Men = "Michael Phelps";

Como puede ver, puede agregar una nueva clave al hacer referencia directamente con un punto. ¡Nada más! Impresionante, ¿eh? ;)

Agregar propiedades con notación de brackets

También hay otra forma de agregar nuevas propiedades al objeto. Puede tratarlo como si fuera una matriz. Agreguemos al campeón olímpico y al nueve veces campeón del mundo Katie Ledecky al objetivo:

var olympicRecords = {
  athletics100Men: "Justin Gatlin",
  athleticsLongJumpMen: "Mike Powel",
  swimming200Men: "Michael Phelps"
}

olympicRecords["swimming400Women"] = "Katie Ledecky";

De modo que puedes usar los corchetes para agregar nuevos pares de pares clave-valor al objeto. Debes nombrar la clave entre los corchetes y asignarle un valor.

❗ Recuerda que si utiliza la notación de corchetes, debes encerrar la clave con comillas("), a menos que sea una variable que contenga una cadena.

Valores de actualización

Espera ... Justin Gatlin ?? ¿Qué pasó con el mejor velocista de todos los tiempos, Usain Bolt? ¡Está desactualizado! No te preocupes, lo actualizarás. Tienes que modificar la propiedad athletics100Men en el objeto. Justin Gatlin ya no es el hombre más rápido del mundo, es Usain Bolt.

Tienes dos formas diferentes de actualizar los valores en un objeto. ¿Puedes adivinar cuales? ¡Exactamente! De la misma manera que acabas de aprender:

Actualización de valores con notación de puntos

olympicRecords.athletics100Men = "Usain Bolt";

Actualización de valores con notación de corchetes

olympicRecords["athletics100Men"] = "Usain Bolt";

Eliminar propiedades

Vamos a trabajar un poco más con nuestro Objeto. Supongamos que ha agregado una nueva clave, el récord mundial de Doble Ollie:

olympicRecords.doubleOllie = "Chris Chann"

Después de una cuidadosa consideración, te das cuenta de que en realidad no es un deporte olímpico. ¿Cómo puedes eliminar esta clave?

En JavaScript tienes el operador delete para eliminar claves de un objeto. Solo tiene que especificar qué tecla desea eliminar:

Borrado de valores con notación de puntos

delete olympicRecords.doubleOllie;

Borrado de valores con notación de corchetes

delete olympicRecords["doubleOllie"];

Ahora, si echas un vistazo al objeto olympicRecords, ¡obtendrás los registros olímpicos reales!

console.log(olympicRecords);

// => olympicRecords = {
//     athletics100Men: "Usain Bolt",
//     athleticsLongJumpMen: "Mike Powel",
//     swimming200Men: "Michael Phelps",
//     swimming400Women: "Katie Ledecky"
//   }

Listar propiedades

Para finalizar la lección, le mostrará un método de Objeto que le ayudará a enumerar todas las propiedades del objeto.

Esto es útil cuando tienes un objeto enorme y no estás seguro de qué propiedades tiene. Object.keys() recibe un objeto como un parámetro. En nuestro caso sería:

Object.keys(olympicRecords);
// => ["athletics100Men", "athleticsLongJumpMen", "swimming200Men", "swimming400Women"]

La función devuelve una matriz con todas las claves de propiedades del objeto. Una vez que tengas la matriz, puedes iterar sobre los elementos y hacer lo que te plazca.

Bonus: Listar valores

En JavaScript, hay un bucle específicamente diseñado para iterar sobre objetos. Este ciclo es llamado for..in.

La sintaxis es la siguiente:

for (< placeholder for key> in <placeholder for object>){
  < code to be run >
}

imprimiendo claves

for (var recordName in olympicRecords){
  // recordName is a **key** in the object
  console.log("recordName: " + recordName);
}

imprimiendo valores

for (var recordName in olympicRecords){
  // When we access a property in an object using a variable
  // ...we must use bracket notation
  console.log("Value: " + olympicRecords[recordName]);
}

imprimir ambas

for (var recordName in olympicRecords){
  console.log("The value of " + recordName + " is " + olympicRecords[recordName]);
}

Resumen

En esta lección, has aprendido algunos fundamentos de programación como pares clave-valor, y has visto cómo JavaScript usa los Objetos para crear estos pares, y por qué es una buena práctica usarlos.

Ahora puedes crear objetos e interactuar con sus propiedades y valores.

Los objetos y matrices son muy comunes y útiles en la programación. Las matrices son útiles para listas, pero los objetos son el rey cuando intentas etiquetar información. ¡Elije la estructura de datos correcta para el trabajo!

Recursos Extra

• Object

• Property Accessors

• delete operator - Eliminar una propiedad de un Objeto.

• Metodo Object.keys() - Enumera todas las propiedades de un objeto

CSS_Box_Model.md

CSS: Modelo de caja

Objetivos

Después de esta lección aprenderás a:

• Entender las propiedades de margen, relleno y borde, y las diferencias entre ellos.
• Aplicar bordes, almohadillas y márgenes para bloquear elementos.
• Comprender cómo estas propiedades afectan las propiedades de otros elementos.

Introducción

Para dominar CSS y el diseño web tenemos que discutir una premisa básica: cada elemento HTML es un cuadro rectangular.

El modelo de caja de CSS describe el contenido del espacio tomado por un elemento. Cada caja tiene cuatro áreas diferentes: contenido, borde, relleno y margen.

Al final de esta lección, tendrás un claro ejemplo de bordes, rellenos, márgenes y los efectos que tienen sobre cualquier elemento.

El modelo de caja

Discutiremos cada aspecto de la siguiente imagen en detalle a lo largo de la lección:

Comportamiento de espaciado

El comportamiento de espaciado se refiere al espacio real tomado por una caja. La fórmula de comportamiento de espaciado equivale a:

ContentSpace + PaddingSpace + BorderSpace + MarginSpace

¡No te preocupes si aún no tiene sentido! Esto simplemente debe ser referenciado mientras trabajas en la lección.

Configuración

https://codepen.io/ironhack/pen/ALAKNO

En esta lección, construirás en este proyecto de Codepen. Aplicarás cambios en un <div> para aprender los nuevos conceptos.

En el código del proyecto Codepen, el elemento <div> tiene un color de fondo verde. Esto te permitirá ver su espaciado predeterminado. Este es el espacio que ocupa el contenido.

También aplicamos un ancho fijo para que puedas ver qué sucede cuando cada propiedad se aplica a <div>.

Propiedad: Border

La propiedad border le permite establecer el borde de un elemento.

Puedea especificar tres valores para el borde: ancho, estilo y color. Cada propiedad tiene un valor predeterminado, por lo que si no especificas uno de ellos, aún tendrá un valor.

Si los bordes no están declarados, son cero o el valor predeterminado del navegador.

Agreguemos un borde a tu <div>:

border: 1px solid #17212e;

El resultado será algo como esto:

border: propiedades

En el ejemplo anterior, el borde se define con 3 valores:

• width(1px): puedes especificar cualquier tamaño de unidad para establecer el ancho del borde. También puedes usar la propiedad border-width para hacer eso.

border-width: 1px;

• style(solid): puedes especificar cualquier valor de estilo de borde, dependiendo del diseño que desees. También puedes usar la propiedad border-style para hacer eso.

border-style: solid;

• color(# 17212e): finalmente, puedes especificar un color, en cualquiera de los formatos que ya ha visto. Nuevamente, también puedes usar la propiedad border-color para hacer eso.

border-color: #17212e;

Abreviado

border: 1px solid #17212e;

Completo

border-width: 1px;
border-style: solid;
border-color: #17212e;

En general, es mejor (y más rápido) usar la forma abreviada.

Comportamiento de espaciado con borde

Si echas un vistazo a nuestro CSS, el elemento <div> debe tener un ancho de 170px. Después de aplicar el borde, el ancho ya no es 170px. Es 172px. ¿Por qué?

Cuando aplicas un borde a un elemento, aumenta su ancho, incluso si has especificado un ancho fijo. El borde de nuestro elemento es 1px de ancho. El ancho total de <div> será 172px:

• 170px <div> width
• + 1px border-left
• + 1px border-right
• = 172px

Cuando aplicas un borde a un elemento, modificas el ancho total de ese elemento.

Border individual

¿Qué pasa si quieres tener un borde en un solo lado? Supongamos que solo quieres tener el borde inferior en tu <div>. Hay dos formas diferentes de hacerlo.

simple

border-bottom: 1px solid #17212e;

Compleja, pero personalizable

La otra forma es un poco más larga. Implica establecer el valor del borde con la propiedad de estilo y color. Luego, configurar el ancho del borde de la siguiente manera:

border: solid #17212e;
border-width: 0 0 1px 0;

Como puedes ver, el ancho del borde recibe 4 valores diferentes. Estos valores corresponden a:

border-width: [border-top] [border-right] [border-bottom] [border-left];

La propiedad border-bottom tiene un valor de 1px, y es el único que se muestra.

Puedes utilizar esta técnica con todos los elementos de la propiedad del borde, pero no es común:

border-color: red blue green yellow;
border-style: solid dashed dotted double;

Repasaremos esta nomenclatura con más detalle en la siguiente sección.

En este punto, tu CSS en codepen debería ser:

div {
  background-color: #00D1AE;
  border: 1px solid #17212e;
  width: 170px;
}

Propiedad: padding

¿Que es padding?

La propiedad padding establece el espacio entre el contenido y el borde de un elemento. Agrega un padding a tu código:

padding: 10px 10px 10px 10px;

La imagen a continuación muestra el espacio adicional entre el contenido y el borde de la <div>:

Comportamiento de espaciado

Al igual que la propiedad border, la propiedad de relleno aumenta el tamaño de <div>. El ancho total no será el especificado en el CSS, será la suma de todos los modificadores. En este caso, será 192px:

• 170px <div> width
• + 10px padding-left
• + 10px padding-right
• + 1px border-left
• + 1px border-right
• = 192px

No olvides el borde cuando calcules el ancho total de <div>.

Padding: valores

Como has visto, puedes especificar diferentes valores en el relleno. Su comportamiento es el mismo que viste con la propiedad border-width.

padding: [padding-top] [padding-right] [padding-bottom] [padding-left];

No tienes que establecer los cuatro valores siempre. Al igual que con la propiedad de borde, puedes especificar uno, dos, tres o cuatro valores:

padding: 10px 20px 15px;
    /* padding-top 10px */
    /* padding-right and padding-left 20px */
    /* padding-bottom 15px */

padding: 10px 20px;
    /* padding-top and padding-bottom 10px */
    /* padding-right and padding-left 20px */

padding: 10px;
    /* All the sides are set to 10px of padding */

Cambia tu código y establece el relleno en 10px en cada lado:

padding: 10px;

En este punto, tu CSS debería verse así:

div {
  background-color: #00D1AE;
  border: 1px solid #17212e;
  padding: 10px;
  width: 170px;
}

Propiedad: Margin

¿Que es el Margin?

La propiedad margin establece el espacio entre el borde de un elemento y los otros elementos que lo rodean. Si no hay elementos, establecerá el espacio entre el elemento y la etiqueta <body>.

Agrega un margen a tu código y ve qué sucede:

margin: 10px 10px 10px 10px;

Como puede ver, el <div> ahora tiene espacio a su alrededor.

Comportamiento de espaciado

Cuando aplicas margen, el tamaño <div> sigue siendo el mismo: 192px. Pero el espacio utilizado en el HTML es más grande. Ahora es 212px:

• 170px <div> width
• + 10px padding-left
• + 10px padding-right
• + 1px border-left
• + 1px border-right
• + 10px margin-right
• + 10px margin-left
• = 212 pixels

Debes considerar estos tamaños en el futuro cuando estés creando un diseño con HTML, o puedes tener problemas al replicar un diseño en tu HTML.

Margin: valores

La propiedad margin también funciona como propiedad padding. Puedes especificar los valores de margen al declararlos de la siguiente manera:

margin: [margin-top] [margin-right] [margin-bottom] [margin-left];

De nuevo, no tienes que especificar cada valor.

margin: 10px 20px 15px;
    /* margin-top 10px */
    /* margin-right and margin-left 20px */
    /* margin-bottom 15px */

margin: 10px 20px;
    /* margin-top and margin-bottom 10px */
    /* margin-right and margin-left 20px

margin: 10px; /* All the margins are set to 10px */

Juega con el ejemplo agregando bordes, almohadillas, márgenes y colores. ¡Deberías poder manipular todas las propiedades, ya que lo harás a menudo!

Ejercicio: IronSkydive | Modelo de caja

Acabas de aprender sobre el modelo de caja. ¡Aprovechemos este conocimiento y usemoslo en tu sitio web IronSkydive! Recuerda que has estado trabajando en Codepen, donde debes tener la estructura de HTML, así como las propiedades de texto y color en el CSS.

Nav

Agreguemos algo de espacio a la etiqueta nav. En la clase nav-bar, en el CSS, agregue 14px de relleno en la parte superior e inferior del elemento.

Ahora, agreguemos una clase nav-bar-ul a la etiqueta ul, que tendrá dos propiedades:

• Width: 1200px.
• Margin: 0 auto.

También eliminemos los estilos predeterminados de la lista. Tampoco queremos los puntos que normalmente tiene una lista. Para hacer esto, agrega una clase nav-bar-li con la siguiente propiedad: list-style-type: none. También puedes agregar una propiedad text-align con vaor center a la clase nav-bar-li. Aplique esta clase a cada elemento <li> con un selector múltiple.

Header

En la clase header, agrega un padding superior de 50px para agregar espacio entre el título y la parte superior del header. Ya deberías tener una clase .header en tu pestaña CSS.

Section 1

Tienes que agregar dos cosas diferentes aquí. Primero, crea una clase container que vas a usar para:

• Darle un ancho específico a las secciones.
• Centre estas secciones aplicando un margin.
• Agregue un poco de espacio entre las secciones, con padding.

Primero, crea la clase .container. Envolverá todo el contenido de cada sección. Agrega las siguientes propiedades a la clase:

• Width: 1200px.
• Margin: 0 auto (para centrar los elementos).
• Padding: 75px 0.

Una vez que hayas creado la clase, agrégala a la división div dentro de la primera sección con id general-information.

¡Increíble! Ahora, solo necesitas agregar 20px de margen en la parte superior e inferior de los párrafos. Recuerde que creaste una clase .text que se aplicó a los párrafos. Agrega el margen en esa clase.

Section 2

Esta sección debe tener el mismo ancho que la anterior. La diferencia entre este y el anterior es que la sección 2 no tiene un color de fondo. Significa que podemos aplicar la clase container directamente al section.

Agrega las siguientes propiedades, con sus valores correspondientes a la clase service-box:

• Border: 2px of width, solid, and #eee color.
• Border Radius: 20px.
• Box Sizing: border-box.
• Box Shadow: 2px 2px 10px 0 #eee.
• Margin: top, 50px; right: 5%; bottom: 0; left: 5%.
• Padding: 20px on all sides.
• Width: 40%.

Cada artículo debe verse así:

Acabas de usar tres propiedades nuevas que no viste durante la lección. Puede consultar la documentación, pero aquí tiene un breve resumen:

• Border radius: Permitirle cambiar el borde de un cuadro, convirtiéndolo en redondo.
• Box sizing: Le permite mantener el ancho de un elemento cuando aplica relleno a él.
• Box Shadow: Agrega una pequeña sombra a una caja.

Para finalizar esta sección, agrega un margin de 15px en la parte inferior de todas las etiquetas <h4> en el HTML. Recuerda que tienes un selector para la etiqueta <h4> en tu CSS.

Section 3

Como en la sección 1, esta sección tiene un elemento div que envuelve todo el contenido de la sección. Agregue la clase container a este div.

Luego, cambia el estilo de párrafo para usar el 60% del ancho y céntrelo usando un margen 10px auto.

Ahora, demos un poco de estilo a la etiqueta hr. Cree un selector en el CSS para seleccionar la etiqueta hr dentro del contenedor con el id team. Agrega las siguientes propiedades en este selector:

• Margin: top: 20px; right: auto; bottom: 30px; left: auto.
• Width: 40%.

El resultado que deberías ver en tu proyecto es el siguiente:

Section 4

En esta sección, solo tienes que agregar la clase de contenedor a la sección de programación. No notarás ningún cambio visible aquí.

Footer

Tienes que hacer un par de cambios en la clase de footer.

Primero, agrega algo de padding. Agrega 100px en los lados izquierdo y derecho.

Luego, agregue un margen de 25px en la parte inferior del footer. Esto creará un espacio pequeño entre el footer y la parte inferior del sitio web.

Finalmente, agrega un margen de 30px en la parte inferior de la etiqueta address. El resultado final de esta sección debe ser el siguiente:

Excelente trabajo!

Resumen

En esta lección, has aprendido todo sobre el modelo de caja y sus propiedades:

• Propiedad de borde: agrega un borde al elemento. El ancho del borde se agrega al ancho y alto total del elemento. Puede establecer el ancho, el estilo y el color del borde a través de sus valores.
• Propiedad de relleno: el espacio entre el borde del elemento y su contenido. El relleno también se agrega al ancho y alto total del elemento.
• Propiedad de margen: el espacio entre el borde y otros elementos. No afecta el ancho y la altura del elemento. Te ayuda a colocar elementos en un lugar en particular.

Recursos extra

• MDN Border - Mozilla Developer Network resumen de la propiedad fronteriza.
• MDN Padding - Mozilla Developer Network resumen de la propiedad de relleno.
• MDN Margin: Resumen de la red de desarrolladores de Mozilla de la propiedad de margen.
• El modelo de caja de CSS: este artículo explica algunas de las consecuencias de aplicar estas propiedades a los elementos.
• Modelo de caja de CSS explicado a través de vivir en un barrio suburbano

CSS_Color_Properties.md

CSS: Propiedades de color

Objetivos

Después de esta lección aprenderás a:

• Representar colores en CSS en una variedad de formas.
• Establecer el color de la fuente.
• Cambiar el color de fondo.

Introducción

En esta lección aprenderás más sobre los colores en CSS. Verás las 3 formas en que podemos representar un color y cómo incluirlas en las reglas de CSS. En este Codepen hemos creado un ejemplo para jugar con los colores en nuestro HTML:

https://codepen.io/ironhack/pen/BzXbja

Colores en html

HTML tiene tres formas de crear colores:

• Por nombre.
• Hexadecimal
• RGB.

También tiene RGBA, pero esta alternativa se usa con menos frecuencia.

Por nombre del color

La primera y más fácil forma de representar un color es especificando su nombre. Por ejemplo, si quieres usar el color rojo, puede escribir:

p {
  color: red;
}

Esto establecerá el color de fuente de la etiqueta <p> en red. Puede encontrar una lista completa de todos los colores preestablecidos disponibles aquí.

Hexadecimal

También puedes establecer un valor hexadecimal para especificar el color que deseas usar. Cada valor hexadecimal consiste en un hash (#) seguido de seis números entre 0 y 9 o letras entre A y F. Cada par de valores representa uno de los componentes (rojo, verde, azul) del color. Esto le permite especificar cualquier color.

En este caso, para representar el color rojo, debe hacer lo siguiente:

p {
  color: #ff0000;
}

Si cada par de valores tiene el mismo valor, como en el ejemplo, puedes simplificarlo usando solo un dígito. En tu ejemplo, puedes obtener el color rojo de la siguiente manera:

p {
  color: #f00;
}

Si usas otro color, por ejemplo #123456, no puedes reducirlo usando esta técnica. Puedes encontrar un selector de color aquí para elegir tu color favorito en hexadecimal.

RGB

Un valor RGB es una función rgb() que recibe tres parámetros: rojo, verde y azul. Representan los valores de canal de los colores, al igual que los valores hexadecimales. La diferencia con la notación RGB es que cada componente está representado por un número decimal entre 0 y 255.

p {
  color: rgb(255, 0, 0);
}

Aquí puedes encontrar tu color favorito para usar en tu CSS.

Jugando con transparencia: RGBA

Por último, pero no menos importante, el método rgba() le permite usar rgb() con otro valor de componente como el cuarto parámetro: el canal alfa. Esto te permite establecer la transparencia del color, con un número entre 0 y 1. 0 indica que el color será 0% sólido (por lo que será transparente) y 1 100% sólido.

Tratemos de agregar un 50% de transparencia a tu color rojo en el párrafo:

p {
  color: rgba(255, 0, 0, 0.5);
}

De nuevo, puedes elegir tu color favorito aquí.

Color de la fuente

Ahora que has visto cómo representar diferentes colores en HTML, puedes jugar con tu ejemplo. Cambiemos el color del texto en tu HTML. ¿Sabes como hacer esto?

Con la propiedad de color! Cambiemos el color de las siguientes etiquetas:

• <h1>: use la función de nombre para establecer el color en forestgreen.
• <h2>: usa la función hexadecimal para establecer el color en teal.
• <p>: Finalmente, usemos la función RGB para establecer el color en steelblue.

solución

Deberías tener algo como esto:

h1 {
  color: forestgreen;
}

h2 {
  color: #008080;
}

p {
  color: rgb(70, 130, 180);
}

Color de fondo

Veamos ahora cómo puede cambiar el color de fondo de su sitio web. Puedes cambiar la propiedad de background en el CSS para hacer esto.

Para terminar con esta lección, modifiquemos el color de fondo. Intenta usar la función rgba para establecer tu color favorito como color de fondo.

solución

Aquí hay una posible solución:

body {
  background: rgba(173, 216, 230, 0.4);
}

Ejercicio: IronSkydive | Propiedad de color

En iteraciones anteriores, has creado la estructura HTML básica, al agregar las diferentes etiquetas de bloque para dar una cierta estructura semántica al sitio. Luego, agregaste los diferentes elementos en línea que necesita para agregar todo el texto del sitio.

En la iteración anterior, usaste las propiedades de texto de CSS para cambiar la apariencia del sitio web, agregando una fuente y tamaños personalizados, según la etiqueta. ¡Ahora es el momento de darle un poco de color a tu sitio web!

Cuando estés desarrollando un sitio web, es una buena práctica tener en cuenta una tabla con los diferentes colores que vas a utilizar. En este caso, la tabla es:

Color	RGB
Blue	67, 163, 230
Dark Blue	25, 33, 41
Text	0,0,0

Esta tabla te ayudará a comunicarte con tu equipo de diseño de UX / UI. Cuando te digan que apliques el azul oscuro como color de fondo, sabrás de inmediato qué color es.

Describiremos uno por uno los cambios que debes aplicar sobre las diferentes secciones que definimos en la primera iteración de este ejercicio. Recuerda el diseño que creamos:

Abre el codepen en tu navegador, ¡y empecemos!

Nav

El resultado final de la barra de navegación es el siguiente:

Vamos a enfocarnos solo en el color. Debe aplicar como color de fondo el color dark blue, mientras que el color de la fuente debe ser white.

Es una buena práctica usar selectores de clase en lugar de usar selectores de etiquetas HTML para definir estilos. ¿Qué sucede si aplicas un estilo a nav y en el futuro lo cambias a header? Perderías todos los estilos y los cambiarías uno por uno en el CSS.

Crea un selector en su pestaña CSS llamada .nav-bar, y asigna los estilos descritos anteriormente. Luego, asigna la clase a la etiqueta de navegación en tu HTML.

Está funcionando... más o menos. Los enlaces tienen un estilo predeterminado, por lo que el color de la fuente no se cambia con la clase de nav-bar. Cree otra clase, llamada nav-bar-item, y cambie el color, text-decoration, y font-size para obtener el resultado deseado. El tamaño de letra es 2em. Deberá usar el selector .nav-bar-item a para que funcione.

En las siguientes iteraciones, vas a completar el menú. Estás listo para pasar a la siguiente sección.

Header

¡No tengas miedo! Es más fácil de lo que parece. En primer lugar, debes establecer la imagen de fondo. Las propiedades de la imagen de fondo son:

• URL: https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironhack-skydive-background.jpg.
• Position: 0 0.
• Repeat: no-repeat.
• Size: cover.

Recuerda que debes crear una clase, en este caso header, y asignarla a la etiqueta de header en su HTML para usar este estilo. Ahora, simplemente configure la altura del header en 650px.

The next step is to change the h2 color to white, and then add some text-shadow to it. The text-shadow property should have as a value #020819 8px -20px 9px.

El siguiente paso es cambiar el color del h2 a white y luego agregarle la propiedad de sombra text-shadow. La propiedad text-shadow debe tener como valor #020819 8px -20px 9px.

Para finalizar esta sección, cambia el tamaño de fuente de cotización. Ajústa lo a 2.5em. Crea una clase para hacer eso y agrega la clase a la etiqueta de reserva en el HTML.

Section 1

En una iteración anterior, aplicaste un id de general-information a esta sección. Al final del ejercicio, esta sección debería verse así:

Crea un selector de clase dark-background, que aplique las siguientes propiedades:

• Background color: dark blue (echa un vistazo a la tabla al comienzo de esta iteración).
• Color: white.

Una vez que haya creado la clase en su CSS, agréguela a la sección. Después de aplicar la clase, puedes ver que el texto en <p> es muy pequeño y no está centrado. Vamos a resolver este problema.

Primero, a cada párrafo dentro de la sección de general-information, agrega una clase text. Luego crea un selector múltiple, que selecciona todos los elementos con una clase .text dentro del elemento general-information. Este selector debe tener las siguientes propiedades de CSS:

• Font size: 2em.
• Font weight: 100.
• Text Align: center.

Mucho mejor. Terminemos esta sección agregando algunos estilos a los enlaces. Los enlaces se verán como botones, y todos los enlaces de esta sección tendrán el mismo aspecto. Significa que debes crear una clase que aplique las propiedades de CSS necesarias a un enlace para que parezca un botón.

¿Por qué no deberíamos simplemente usar un botón? Vea esta muy concisa respuesta stackflow para una buena regla general.

Vamos a crear una clase link-btn con las siguientes propiedades:

• Background color: blue (echa un vistazo a la tabla al comienzo de esta iteración).
• Color: white.
• Font family: Roboto Condensed.
• Font size: 2em.
• Letter Spacing: 0.5px.
• Text align: center.
• Text decoration: none.

Agrega la clase a los tres enlaces que tienes en la sección.

Raro, ¿verdad? Necesitamos una forma de reorganizar nuestros elementos y ponerlos en ciertas posiciones. Este será el objetivo de la próxima iteración, CSS Layouts.

Section 2

En la segunda sección, aplicaste un id structure. En esta sección, solo tienes que configurar el tamaño de la fuente y las propiedades de alineación. También eliminará la propiedad de ancho de img y la establecerá en el CSS.

Crea una clase service-box en CSS, con las siguientes propiedades:

• Font Size: 1.7em.
• Text Align: center.

Asigne esta clase a cada article dentro de la sección de structure.

Ahora, crea un nuevo selector múltiple para todas las clases de img, dentro de la clase service-box. Agrega una propiedad adentro para establecer el ancho de estas imágenes a 125px. Asigna la clase img a los iconos dentro de los artículos del cuadro de servicio.

Volverás a esta sección en la siguiente iteración.

Section 3

El objetivo más importante para escribir CSS de calidad es crear clases que podamos reutilizar. En esta sección, nuevamente tenemos azul oscuro como color de fondo. Acabas de crear una clase dark-background en un paso anterior en esta sección. Agrega esta clase a la sección de team.

Ahora, tienes que crear dos clases diferentes. Una para el texto de la sección y otro para los nombres de los miembros del equipo. La primera clase, section-text, habrá establecido el tamaño de la fuente en 1.9em, y el texto debe estar alineado con el centro.

Por otro lado, la clase member-name establecerá el tamaño de fuente en 1.5em, con un peso de fuente de 700. Agrega la primera clase a la p en el HTML, y la segunda clase a todas las etiquetas b.

Para evitar que las propiedades sobrescriban otras clases, crea un selector múltiple para establecer estas clases específicamente dentro del elemento de id team:

#team .section-text { }
#team .member-name { }

Section 4

¡Nada que hacer aquí! ... aún

Footer

De nuevo, tenemos un fondo oscuro y texto blanco. Agrega la clase dark-background a la etiqueta de footer en el HTML. Crea una clase footer para centrar todo el texto dentro de este elemento. Use la misma clase para configurar el tamaño de fuente en 1.9em.

Ahora, cree una nueva clase address y asígnela a la etiqueta HTML address. En esta clase, define:

• Font style:normal.
• Font size: 0.8em.

Casi terminamos. Cree una nueva clase que seleccione todo el link dentro del footer, para cambiar los estilos para tener:

• Color: blue (echa un vistazo a la tabla al comienzo de esta iteración).
• Text decoration: none.

Asigna esta clase a cada elemento dentro de la lista que tienes en el footer.

Lo tienes!

Resumen

En esta lección, aprendiste cómo establecer valores de propiedad de color de varias formas diferentes, nombre, hexadecimal, rgb y transparencia de canal alfa con rgba. También aprendiste que esto se puede aplicar a la fuente y al fondo.

Cambiar los colores es una de las características originales de HTML y CSS, sigue siendo una de las características más comunes en la actualidad. Afortunadamente, ¡es una de las cosas más simples que harás en CSS!

Recursos Extra

• HTML Color Codes: Genera colores hexadecimales para usar en tus sitios web.

css_text_properties.md

Propiedades de texto CSS

Objetivos

Después de esta lección aprenderás a:

• Establecer y cambiar las fuentes en tu sitio.
• Cambiar la alineación en el documento.
• Explicar qué es la altura de las líneas y podrás cambiarla.

Introducción

Por defecto, el texto en tu HTML es feo. Hay algunas propiedades establecidas por defecto (tipo, tamaño, color, etc.). Aprenderá a cambiar todas estas propiedades para personalizar los estilos de texto de su sitio web.

En este codepen encontrarás un ejemplo para jugar con el cambio de texto HTML a través de CSS.

Fuentes

Antes que nada, aprenderás a estilizar las fuentes en tu html.

font-family

De forma predeterminada, la cara de la fuente dependerá del navegador y del sistema operativo del usuario. Puedes encontrar una lista de las fuentes predeterminadas aquí. Podemos cambiar el valor predeterminado con la propiedad font-family. Cambiemos la fuente de la página para usar Arial:

body {
  font-family: Arial;
}

No podemos garantizar la disponibilidad de las fuentes que desees utilizar en tus páginas web. Las diferentes combinaciones de navegadores y sistemas operativos tienen diferentes fuentes instaladas. ¡Nunca sabes quién es tu usuario!

Para estar seguros, podemos suministrar una pila de fuentes para que el navegador tenga muchas fuentes para elegir. Si falta una fuente, el navegador elegirá la siguiente:

body {
  font-family: Arial, Verdana, sans-serif;
}

Si se produce un error, es decir, no se encuentra Arial, el navegador intentará usar Verdana. Si no se encuentra Verdana, sans-serif será la fuente utilizada por el navegador. Finalmente, si ninguna de las fuentes se encuentra en la pila de fuentes, el navegador usará la fuente predeterminada.

Genial, ¿eh? :)

Propiedad font-size

El font-size de un elemento se hereda del elemento primario (elemento) del elemento.

Este comportamiento implica que cada elemento hereda del elemento raíz de un documento completo. Todo comienza con el elemento raíz de un documento HTML, <html>. El font-size estándar para la etiqueta <body> es de 16px en todos los navegadores.

Algunos elementos tienen diferentes tamaños por defecto. Esta es la razón por la cual <h1> parece más grande. Su tamaño estándar es 2em (otra medida de tamaño de fuente que discutiremos más adelante), que se traduce a 32px. Si desea obtener más información sobre unidades y tamaños, puede leer este artículo.

Cambiemos el tamaño de la fuente en su HTML. Establezcamos el tamaño <h1> en 20px, el tamaño <h2> en 16px y, finalmente, establezcamos el resto del documento en 14px.

body {
  font-size: 14px;
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 16px;
}

Otras Propiedades

CSS tiene diferentes propiedades para cambiar el peso / énfasis visual del texto. Lea el uso de cada propiedad e intente aplicarlos todos en el codepen :)

font-style

font-style se usa para convertir el texto en cursiva u oblicuo:

<iframe height='265' scrolling='no' title='VpMwxb' src='//codepen.io/ironhack/embed/VpMwxb/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen VpMwxb by Ironhack (@ironhack) on CodePen. </iframe>

En este artículo puedes encontrar la diferencia entre cursiva y oblicua.

font-weight

La propiedad font-weight se usa para convertir el texto en negrita, más audaz o más claro. Se puede expresar como un valor numérico:

<iframe height='265' scrolling='no' title='MpEWzg' src='//codepen.io/ironhack/embed/MpEWzg/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen MpEWzg by Ironhack (@ironhack) on CodePen. </iframe>

text-transform

text-transform se utiliza para transformar texto en minúsculas, mayúsculas o para poner en mayúsculas(lowercase, uppercase or to capitalize) las letras:

<iframe height='265' scrolling='no' title='mWBdgx' src='//codepen.io/ironhack/embed/mWBdgx/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen mWBdgx by Ironhack (@ironhack) on CodePen. </iframe>

¿Por qué?

Estas propiedades son especialmente útiles para el desarrollo de la marca, y las situaciones en las que siempre necesitas una palabra en mayúscula. Por ejemplo, Target es una tienda, y su logotipo / marca indica que Target estará en mayúscula: Sería muy útil en el sitio web de Target crear una clase css para que puedan mayúsculas fácilmente todo su texto de marca.

text-decoration

text-decoration se utiliza para establecer/desactivar decoraciones de texto en fuentes.

<iframe height='265' scrolling='no' title='GWMZqR' src='//codepen.io/ironhack/embed/GWMZqR/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen GWMZqR by Ironhack (@ironhack) on CodePen. </iframe>

Los valores para esta propiedad son:

• none: desata cualquier decorado de texto ya presente. Es el valor predeterminado para la mayoría de las etiquetas HTML.
• underline: subraya el texto.
• overline: le da al texto una línea superpuesta.
• line-through: pone un tachado sobre el texto.

Diseño del texto

Ya has visto las propiedades básicas de la fuente. Ahora, echemos un vistazo a algunas de las propiedades que puede usar para cambiar el diseño del texto.

text-align

text-align se usa para controlar el alineamiento de texto dentro de su cuadro conteniendo contenido.

<iframe height='265' scrolling='no' title='QpqNgv' src='//codepen.io/ironhack/embed/QpqNgv/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen QpqNgv by Ironhack (@ironhack) on CodePen. </iframe>

Los diferentes valores posibles son:

• left: izquierda justifica el texto.
• right: derecha justifica el texto.
• center: centra el texto.
• justify: hace que el texto se extienda, variando los espacios entre las palabras para que todas las líneas de texto tengan el mismo ancho.

line-height

line-height se usa para establecer la altura de cada línea de texto, tanto arriba como debajo de la línea.

<iframe height='265' scrolling='no' title='LWzNjv' src='//codepen.io/ironhack/embed/LWzNjv/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen LWzNjv by Ironhack (@ironhack) on CodePen. </iframe>

Si no especifica ningún tipo de unidad para el valor de line-height, multiplicará por X la altura de la fuente que usaría. En nuestro ejemplo, la altura de la línea será 15px, 1.5 veces el 13px de la fuente.

Ejercicio: IronSkydive | Propiedades del texto

En esta iteración, aplicará las diferentes propiedades de texto que acaba de aprender en la lección. Recuerde abrir el Codepen que ha estado utilizando durante las lecciones para seguir trabajando en el ejercicio.

font-family

En el sitio web de IronSkydive, vamos a usar una fuente llamada Roboto. Puedes encontrarla en https://fonts.google.com/, el repositorio de Google que alberga una gran cantidad de fuentes. Por lo general, debe pasar por un proceso para insertar una de estas fuentes en su sitio, pero lo hemos simplificado por usted.

Al principio de la pestaña CSS en tu CodePen, copia la siguiente línea:

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700|Roboto:100,300,700');

No pasa nada todavía Simplemente agrega una referencia a dos fuentes diferentes:

• Roboto, con weights de 100, 300, y 700.
• Roboto Condensed, con weight 700.

Vas a usar ambas en tu sitio web. Cambiemos la fuente de todo el documento. El documento completo debe tener el texto formateado de la siguiente manera:

• Font: Roboto.
• Size: 10px.
• Line height: 3.5em.
• Weight: 300.

Debes crear un selector para la etiqueta de body y agregarle las respectivas propiedades de CSS. Una vez que haya definido la fuente del documento, cambiemos el comportamiento de los encabezados.

Estás utilizando encabezados del 1 al 5, usa un multiselector que los seleccionará a todos. Dentro de este selector, configura la fuente para Roboto Condensed. Modificaremos el tamaño de los encabezados en un selector diferente, ya que cada uno de ellos tendrá un tamaño diferente.

El resultado debería ser algo como esto:

En este momento todas las fuentes tienen el mismo tamaño, cambiemos eso. Primero, digitemos los encabezados incluyendo las siguientes propiedades:

Header	Propiedades
h1	Size: 9em, Align: center, Transform: uppercase
h2	Size: 5em, Align: center, Transform: uppercase
h3	Size: 4.2em, Align: center
h4	Size: 1.5em, Letter spacing: 0.4px
h5	Size: 1.2em

Una vez que aplicas estos estilos a los diferentes encabezados que tienes, <h1> y <h2> necesitan más espacio entre ellos. Agreguemos más espacio estableciendo la propiedad <h2> height-height en 4em.

Ya ha especificado todos los estilos de texto que necesita tener en su sitio web.

Resumen

En esta lección, has aprendido cómo manipular fuentes en CSS. Tener un buen texto es una pieza clave para tener un hermoso sitio web. Escoger fuentes y tamaños es una cuestión de gusto, ¡pero ahora puedes ejecutar cualquier diseño que desees!

Recursos extra

• MDN Font-Family
• MDN Font-Size
• MDN Fundamental text and styles

Form_tag.md

Form Tag

Objetivos

Después de esta lección aprenderás a:

• Crea un formulario HTML.
• Use una variedad de tipos de entrada
• Crear etiquetas para campos de entrada.
• Crea botones que enviarán datos de formulario a un servidor.

Introducción

En esta lección, aprenderás qué formas hay y cómo crearlas. Podrás distinguir entre los diferentes tipos de campos de entrada que puede crear en un formulario. Finalmente, aprenderás cómo agregar etiquetas y botones al formulario para que pueda enviar los datos a un servidor.

Etiqueta form

form: elemento de bloque

La etiqueta form (<form> ... </ form>) es un elemento que representa una forma. Este formulario contiene una serie de entradas, etiquetas y botones que se usarán para recuperar datos del usuario y luego enviar esos datos al servidor.

https://codepen.io/ironhack/pen/bgQRqd

Atributos

acción: la tarea del formulario, cuando lleguemos al desarrollo de backend más tarde, es tomar la información de un usuario y enviarla a un servidor. La acción apunta a la URL a la que el formulario enviará sus datos. La acción predeterminada de un formulario es enviar los datos a la misma página en la que se encuentra actualmente. Nos enfocaremos más en este tema cuando lleguemos al desarrollo de back-end.

Etiquetas Input

input: elemento inline

La etiqueta de entrada (<input>) es un elemento que permite a un usuario ingresar datos de diferentes tipos.

Tipo: Text

La entrada de texto (<input type = "text">) permite al usuario completar la entrada con cualquier tipo de texto. type = text también es el tipo de entrada predeterminado.

https://codepen.io/ironhack/pen/jydxgY

Tipo: textarea

La entrada textarea (<textarea> </ textarea>) también permite al usuario enviar texto.

https://codepen.io/ironhack/pen/VPgEav

La diferencia entre <input type = "text"> y <textarea> </ textarea> es que textarea permite el tipado de forma libre en varias líneas. Esto se usa principalmente cuando se requiere escritura de forma libre, como ingresar descripciones de productos o comentarios en un blog. La entrada de texto acepta una sola línea con una longitud máxima de 255 caracteres.

El tamaño de un textarea se modifica utilizando los atributos rows y cols. No debes usar CSS para cambiar el tamaño de un textarea, ya que el texto dentro estará fuera del centro.

https://codepen.io/ironhack/pen/VbGVEg

Tipo: number

La entrada de número (<input type = "number">) permite al usuario ingresar números. Además, cuando hace clic en este tipo de entrada, se agregarán dos flechas a la entrada para que el usuario pueda aumentar o disminuir el número.

Cuando se envía el formulario, se validará si lo que el usuario ingresó es un número válido o no.

https://codepen.io/ironhack/pen/QdYxLO

❌ Algunos navegadores no permiten ingresar texto en un campo de entrada numérica.

💡 Para enviar el formulario, presione Enter mientras el cursor está en una entrada.

Tipo: email

El tipo de entrada de correo electrónico (<input type = "email">) permite al usuario ingresar texto, específicamente texto en el formato de un correo electrónico.

Cuando se envía el formulario, valida si la entrada contiene un correo electrónico válido.

💡 To send the form, press enter while you are inside of any input.

Tipo: radio

El campo de entrada de la radio (<input type = "radio" />) permite al usuario marcar solo una de las múltiples opciones. Seleccione la opción deseada haciendo clic en el círculo que desea seleccionar.

https://codepen.io/ironhack/pen/QdYZGm

Atributos

• type: "radio".
• value: representa el valor que se enviará al servidor.
• name: representa botones de radio que pertenecen al mismo grupo. Si tiene múltiples grupos de entrada de radio, tendrán diferentes nombres.

https://codepen.io/ironhack/pen/EmeGae

Tipo: checkbox

El campo de entrada casilla de verificación (<input type = "checkbox" />) permite al usuario seleccionar una o más opciones. Se usa con dos propósitos diferentes:

• Seleccione múltiples opciones:

https://codepen.io/ironhack/pen/LxqXeO

• Marque una opción como seleccionada:

https://codepen.io/ironhack/pen/BpMGrb

Atributos

• type: "casilla de verificación".
• value: representa el valor que se enviará al servidor.
• name: representa el grupo de entradas que pertenecen al mismo campo.

El atributo comprobado le permite marcar una entrada de radio o casilla de verificación de forma predeterminada.

Tipo: select

El campo de entrada de selección (<select> ... </ select>) permite al usuario seleccionar una opción de una lista desplegable.

Cada una de las opciones está representada por una etiqueta de opción (<opción> ... </ option>).

https://codepen.io/ironhack/pen/OWddQO

A diferencia de los botones de opción, cada opción está envuelta por la entrada de selección, por lo que no es necesario agregar el atributo de nombre a las opciones. El valor es obligatorio, ya que este será finalmente el valor enviado al servidor.

Labels

label: elemento inline

Etiqueta label

La etiqueta label representa un título para los input en HTML de todos los tipos.

https://codepen.io/ironhack/pen/xgMBXd

La relación entre etiqueta y entrada

Como puedes ver en el codigo anterior, el atributo de entrada de ID se asocia con el atributo for del label.

Esta no es solo una relación semántica, sino que tiene una funcionalidad simple: se puede centrar en un input haciendo clic en el o en el label asociado. ¡Intentalo!

Creando botones

button: elemento inline

Hay diferentes formas de representar un botón en HTML5.

• Puedes usar la etiqueta input.

<input type="button" value="Click me!">
<input type="submit" value="Click me!">

• Puedes usar la etiqueta button.

<button type="submit">Click me!</button>
<button type="button">Click me!</button>

La principal diferencia es el tipo de botones:

• submit: este tipo de botón normalmente se usa dentro de formularios para enviar los datos que contiene.
• button: este tipo de botón se utiliza como un botón general para cualquier otro propósito cuando se hace clic, como reproducir un video o mostrar una ventana emergente.

Boton: input

La etiqueta de entrada (<input type = "button">) es un elemento que representa un botón simple. Por defecto, no hace nada cuando haces clic en él.

https://codepen.io/ironhack/pen/EZJyOg

Atributos

• type: “button”.
• value: Indica el texto que se mostrará en el botón.

Boton: input | submit

La input tipo submit(<input type = "submit">) es un elemento que representa un botón simple. De forma predeterminada, no hace nada cuando hace clic en él, a menos que esté ubicado en un formulario.

https://codepen.io/ironhack/pen/qRwaZp

• type: "submit".
• value: El texto que se mostrará en el botón. Por defecto, el valor es "Submit".

Etiqueta button

La etiqueta button (<botón> Texto </ botón>) es un elemento que representa un botón simple. Al igual que input, podemos establecer el atributo de tipo button en el botón o submit. El tipo predeterminado se envía en la mayoría de los navegadores. Por defecto, no hace nada cuando haces clic en él.

https://codepen.io/ironhack/pen/ygragJ

Comportamiento del botón dentro de un formulario

De forma predeterminada, cuando colocas un botón de enviar, input o button dentro de un formulario, intentará enviar los datos del formulario a una url a través del atributo action. Si no se especifica ninguna acción, se enviará a la página actual.

Intenta hacer clic en estos dos botones para ver la diferencia, y sientete libre de cambiar los tipos y valores de cada botón.

https://codepen.io/ironhack/pen/egodVR

Referencia rápida

En la tabla a continuación, puedes encontrar una referencia rápida con los controles, su sintaxis HTML y una breve descripción sobre cómo usarlos en nuestros formularios:

Nombre	HTML	Descripción
Form	<form></form>	Envía datos de usuario al servidor
Text Input	<input type="text">	Permite a un usuario ingresar texto
Textarea	<textarea></textare>	Permite a un usuario ingresar texto multilínea
Number Input	<input type="number">	Permite a un usuario ingresar números
Email Input	<input type="email">	Permite a un usuario ingresar un correo electrónico
Radio button	<input type="radio">	Permite al usuario marcar una de las múltiples opciones
Checkbox	<input type="checkbox">	Permite al usuario seleccionar una o más opciones
Select	<select></select>	Permite al usuario seleccionar una opción de una lista desplegable
Label	<label></label>	Representa un título para una entrada de HTML
Button	<button></button>	Representa un botón que realizará una acción en la página o enviará un formulario

Ejercicio: IronSkydive | Formularios

Forms

En esta última iteración del ejercicio IronSkydive, vas a agregar un formulario que permitirá a tus visitantes programar un vuelo con la nueva compañía Ironhack.

Para hacer eso, vas a trabajar con la Sección 4, como en la iteración anterior del ejercicio. Antes que nada, creemos las etiquetas HTML. En la segunda <h3> de la sección, agregue un formulario con dos propiedades:

• Class: slot-form.
• Action: /register.

Ahora, necesitas crear pares de elementos de label / input. Cada par de elementos se envolverá dentro de elementos div con una clase slot-form-container. Los elementos que debes crear se describen en la tabla siguiente:

campo	tipo	placeholder
Email	Email	Ingresa tu email
Participants	Number	Numero de participantes
Date	Date
Time	Select
Button	Submit

El campo de selección debe tener tres opciones diferentes:

Texto	Valor
9:00 - 11:00	early
12:00 - 14:00	mid
15:00 - 17:00	late

El texto del botón será "¡Reserve su lugar!", Y el resultado es algo como esto:

Ahora agreguemos algo de CSS al formulario. Crea un selector para la clase slot-form-container y añade las siguientes propiedades:

• Width: 40%.
• Margin: top: 18px; right: auto; bottom: 0; left: auto.
• Font size: 1.5em.
• Text align: center.

Luego, crea una clase para cambiar el comportamiento de todas las etiquetas. En este caso, las etiquetas tendrán que mostrarse como elementos de bloque, con un margen de 5px en la parte inferior. Agregue una propiedad más para establecer la altura de línea del elemento a 15px.

Estas casi listo. Crea otra clase para seleccionar todas los input y section dentro del slot-form-container. Agrega las siguientes propiedades a esta clase:

• Height: 20px.
• Outline: none.
• Padding: 3px on all the sides.
• Width: 100%.

El resultado debería ser el siguiente:

Terminemos el ejercicio agregando algunos estilos al botón. Crea un selector para el botón en el div del slot-form-container y agrega los siguientes estilos:

• Border: weight: 1px; style: solid; color: black.
• Color: black.
• Background color: white.
• Padding: 9px on all the sides.
• Marginon the top : 15px.

Con esta iteración, has completado el sitio web IronSkydive. ¡Felicitaciones! 🎉🎉🎉

Puedes encontrar el enlace al código completo aquí en Codepen.

Excelente trabajo !

Resumen

En esta lección, has aprendido qué es un formulario y por qué usarlos. También aprendiste sobre los diferentes tipos de input que puedes usar en un formulario, incluidos botones como input o como etiquetas.

Finalmente, has aprendido todo lo que necesitas sobre las etiquetas y cómo estas etiquetas están relacionadas con los input.

Recursos extra

• El elemento botón
• Diferencia entre anclas, entradas y botones

Functions.md

Funciones

Objetivos

Después de esta lección aprenderás a:

• Explicar qué es una función.
• Crear una función en JavaScript.
• Usar valores de retorno en funciones.
• Explicar qué argumentos son y cómo usarlos.
• Comprender qué significa el alcance de la función.

¿Qué es una función?

En términos generales, una función es un "subprograma" que puede llamarse mediante un código externo a la función. Al igual que el programa en sí, una función se compone de una secuencia de enunciados llamada cuerpo de función. Los valores se pueden pasar a una función y la función volverá a su valor.

Las funciones son uno de los bloques de construcción fundamentales en JavaScript. Una función es un conjunto de declaraciones que realiza una tarea particular del programa. Esta tarea podría ser solo una pequeña parte, o incluso todo el programa.

¿Por qué usar funciones?

Reutilización de funcionalidad

Una vez que defines una función, puedes usarla tantas veces como desees. En Ingeniería de Software, esto se llama Reutilización. La capacidad de reutilización depende de la capacidad de construir cosas más grandes a partir de piezas más pequeñas, y de poder identificar aspectos comunes entre esas partes. La reutilización es a menudo una característica requerida del desarrollo de software.

Por ejemplo, imagina que estás creando una aplicación de venta de entradas para conciertos. Probablemente vas a necesitar validar el ticket en algunas áreas diferentes de la aplicación. Una función que le permite saber si el ticket está en el registro probablemente sea bastante útil.

❗ Esto es solo un pseudocódigo, no necesitas entender lo que está pasando.

function validateTicket(ticketNumber){
  if (ticketRegistry.includes(ticketNumber)){
    return "Valid!";
  } else {
    return "Invalid! Go Away";
  }
}

Ahora puedes usar esta función en cualquier lugar de nuestro programa donde necesites verificar si un ticket es válido o no.

Abstración de una función

La segunda ventaja de usar funciones es que te permiten usar abstracción. La abstracción funciona al separar lo que hace una función de cómo lo hace.

Las funciones implementan la abstracción al ocultar cómo implementan las funcionalidades: no nos importa cómo el validador valida el ticket, solo nos importa si ese número es válido o no.

Imagina que tienes una calculadora. Por lo general, las calculadoras tienen una variedad de operaciones, pero a los fines de este ejemplo, nos enfocaremos en cuatro:

• sumar
• restar
• multiplicar
• dividir

Cada una de estas operaciones es una función diferente, por lo que puede llamarlas cuando un usuario toma acciones diferentes. Por ejemplo, si un usuario tiene esta interfaz:

Cada uno de los botones estaría asociado a su función correspondiente.

Declarar una función en JavaScript

Funciones nombradas

La estructura habitual de una función de JavaScript es la siguiente:

function functionName(argument1, argument2,...){
  // Instruction 1
  // Instruction 2
  // ...
}

Esta será la forma preferida de crear funciones. Verás cómo usar esa función en la siguiente sección.

Funciones anonimas como valores

Puedes crear funciones anónimas y asociarlas a los valores de una variable:

var functionName = function (argument1, argument2,...) {
  // Instruction 1
  // Instruction 2
  // ...
}

Nuestra primera función

Vamos a escribir una función simple para dar salida a "Hello World". Para comenzar, debe darle un nombre a su función para que pueda llamarlo más tarde.

💡 En JavaScript, la convención para nombrar funciones es usar camelCase, no subrayar:

• myFunction es un buen nombre.
• my_function o my-function son malos nombres.

Primero, debemos declarar (definir) nuestra función

function sayHello() {
  console.log("Hello World");
}

Después de declarar la función, puedes llamar (ejecutar) la función. ¿Cómo? Súper simple! Solo necesitas usar su nombre, seguido de paréntesis (()).

https://codepen.io/ironhack/pen/LRVbkP

❗ ¡No te olvides de los () paréntesis! Esto realmente dice a la función, hey, ¡ejecuta tu código !. Si los olvidas, nada va a suceder.

Devolver valores

Las funciones no siempre van a imprimir algo en la consola. Algunas veces quieres realizar un cálculo y devolver un valor.

Cuando le das a una calculadora dos números para agregar, devuelve el resultado. Puede pensar en el valor devuelto como el valor de retorno.

Para devolver un valor, usa la palabra clave return en tu función.

function addNumbers(){
  return 2 + 2;
}

Luego, cuando llamas a la función, asignas el resultado a una variable.

function addNumbers() {
  return 2 + 2;
}

var result = addNumbers();
console.log(result);

❗ Cuidado, devolver termina la función de inmediato. Úsalo solo cuando desees devolver un valor y finalizar la función. Una función solo puede tener un valor de retorno, pero puede ser de cualquier tipo.

https://codepen.io/ironhack/pen/amOBmx

Intenta cambiar este Codepen para imprimir "el resultado es 9" llamando a la función multiplyNumbers.

Argumentos

No deseas agregar 2 y 2 cada vez que llamas a la función. Algunas veces, tus funciones necesitan información del exterior para ejecutar su código.

Puedes pasar argumentos a tu función para pasar datos dinámicos (cambiantes o variables) a la función.

Cambiemos tu calculadora. Primero, debes definir el nombre de los argumentos. Puede ser lo que quieras. Los nombres son solo marcadores de posición para valores reales.

En este caso, tus marcadores de posición se llaman numberOne y numberTwo.

function sumNumbers(numberOne, numberTwo){
  return numberOne + numberTwo;
}

Luego, cuando llamas a la función, debes pasar los valores que desea usar entre los paréntesis, separados por comas.

https://codepen.io/ironhack/pen/evgpOv

Intenta modificar los argumentos de la función.

¿Por qué el siguiente trabajo, o no funciona?

✔️

function sumNumbers(num, otherNum){
 return num + otherNum;
}

✔️

function sumNumbers(potato, zzzzFfffff){
 return potato + zzzzFfffff;
}

❌

function sumNumbers(potato, someNum){
 return potato + num;
}

Valor de los argumentos de una función

Al igual que los valores devueltos, los argumentos pueden contener cualquier tipo: matrices, números, cadenas, etc.

https://codepen.io/ironhack/pen/ORWLLz

Puedes pasar tantos argumentos como quieras, pero como guía, querrás mantenerlos por debajo de 4.

Alcance de la función (scope)

El alcance en JavaScript define dónde se puede acceder a las variables (o funciones) y en qué contexto se ejecutan. Depende de dónde se declara la variable o función. Cuando creas una función, crea un alcance propio.

En otras palabras, las variables definidas dentro de un bloque de funciones con la palabra clave var solo existen dentro de esa función. Esto es lo que llamamos variable local.

Por otro lado, las variables que definas fuera del bloque de funciones con la palabra clave var existen tanto dentro como fuera de la función.

Las variables declaradas fuera de cualquier ámbito de función se denominan variables globales.

❗ Evite el uso de variables globales. Esto se repetirá a lo largo del curso.

Las variables globales pueden:

• Causa vulnerabilidades de seguridad.
• Crea confusión entre las funciones que pueden modificar la variable.
• Causa que accidentalmente crees el mismo nombre de variable dos veces.
• Confunde a los desarrolladores en tu equipo.

Ejemplo

Diferencia entre variable global y variable local:

https://codepen.io/ironhack/pen/dpNbyp

Los argumentos se tratan como variables locales:

function printName(name) {
  console.log(name);
}

En realidad estás declarando una variable para ese argumento:

function printName(name) {
  var name = "The value";
  console.log(name);
}

Además, JavaScript se verá primero en el ámbito local. De lo contrario, buscará un alcance global.

https://codepen.io/ironhack/pen/RpKzqX

Ejercicio

Obten uno de los Codepen incluido en esta lección. Crea un programa que logre lo siguiente:

• Crea una función addNumbers que tome 2 parámetros y devuelve la suma de esos parámetros.
• Crea una función substractNumbers que toma 2 parámetros y devuelve la diferencia de esos parámetros.
• Crea una función multiplyNumbers que tome 2 parámetros y devuelve el producto de esos parámetros.
• Crea una función divideNumbers que tome 2 parámetros y devuelve el cociente de esos parámetros.
• Crea una calculadora de funciones que tome 3 parámetros. Los primeros dos parámetros son los números. El tercer parámetro, llamado operación, es la operación que ejecutará.
• • Si la operación es "suma", debe ejecutar la función addNumbers.
• • Si la operación es "resta", debe ejecutar la función substractNumbers.
• • Si la operación es "multiplicación", debe ejecutar la función multiplyNumbers.
• • Si la operación es "división", debe ejecutar la función divideNumbers.

Resumen

En esta lección, aprendiste los principios básicos de la función. Las funciones son el núcleo de JavaScript, te ayudan a reutilizar tu código y, a través de la abstracción, puedes resolver un problema una vez y luego usar la solución para resolver un problema más abstracto.

¡Cubrirás algunos usos más avanzados de funciones más tarde también! Hay mucho más para discutir.

Recursos extra

• MDN Functions Reference
• MDN Return
• Six ways to declare Javascript functions - Si deseas ir más allá de aprender mucho más acerca de la declaración de funciónes.
• Functions chapter - Eloquent JavaScript

Git & GitHub_Remote_Repositories.md

Git y GitHub | Repositorios Remotos

Objetivos

Después de esta lección, podrás:

• Forkear el repositorio remoto de otra persona.
• Clona un repositorio remoto en tu máquina local.
• Crea una solicitud de pull en repositorios remotos que no te pertenecen.

Introducción

GitHub es una plataforma que fomenta la codificación social. Debido a esto, GitHub tiene características de GUI para comandos comunes de Git que fomentan esta colaboración.

En esta lección, vamos a discutir algunos temas relacionados con este código compartido y, de hecho, jugar con un repositorio remoto para probarlos.

Bifurcación - Fork

What is Forkear?

Al forkear un repositorio, se toma el código de otra persona y se crea una copia propia. Eventualmente, los cambios que realices pueden incluirse en el repositorio original. En GitHub, esto simplemente significa tomar el repositorio remoto de alguien y copiarlo en tu repositorio remoto.

Suena como plagio ¿eh? Realmente no. Hay algunos escenarios diferentes en los que esto está totalmente bien:

• Contribuciones de código abierto: la mayoría de los repositorios públicos de GitHub están ahí para que contribuyas. Ya sea express.js o jQuery, abiertamente aceptan contribuciones. El único método para hacerlo de manera eficiente es forkeando sus repositorios.
• Crear un proyecto nuevo: en ocasiones, a ti o a un grupo de personas puede no gustarles la forma en que se está ejecutando un proyecto de código abierto. Si el proyecto es de fuente abierta y tiene una licencia adecuada, entonces simplemente pueden forkear el proyecto y ejecutar su propia versión. Ve esta lista de proyectos de software forkeados.
• Enviar trabajo aquí en Ironhack: tenemos un informe central de todos los ejercicios que completarás durante el curso. Para presentar su trabajo durante el curso, estarás haciendo un fork de estos repositorios.

Como hacer fork

Afortunadamente, forkear por sí mismo es súper simple. Navega hasta este repositorio y haz clic en el botón de la esquina superior derecha de la página:

En el siguiente diálogo, elije tu propia cuenta como el lugar para forkear:

¡Ahora tienes tu propia versión de nuestro repositorio!

Clonar

Que es clonar un repo?

Clonar un repositorio es simplemente tomar un repositorio remoto y copiarlo a su máquina local. Esto puede ser útil en un par de escenarios diferentes:

• Has creado un fork de un proyecto y ahora necesitas copiarlo a tu computadora.
• Estás colaborando en un proyecto en el que alguien te ha invitado a tu repositorio como colaborador, como un repositorio privado en una empresa, y necesitas copiarlo en tu computadora.

Cómo clonar

Ahora que hemos forkeado nuestra propia versión del repositorio de ejercicios, debemos copiarlo en nuestra computadora para poder trabajar en ello. En tu propia copia del repositorio, da clic en el botón Copiar o Descargar y copia el enlace a su portapapeles:

Luego, en tu terminal, ve a tu carpeta de códigos y ejecuta el comando git clone con el enlace del repositorio:

$ cd ~/code
$ git clone < aquí el link que acabas de copiar >

Si todo salió bien, deberías tener una nueva carpeta llamada lab-github-practice:

$ ls
# => lab-github-practice

Los repositorios clonados ya tienen un repositorio de Git. No es necesario ejecutar git init nuevamente.

$ cd lab-github-practice
$ ls -a
# .          ..         .git       index.html

abre el proyecto en tu editor de código

$ code .

Ejercicio

En el index.html del sitio de cartera que acabamos de clonar, hay algunos textos de relleno que debes completar con tus propios datos.

Donde dice actualmente Bienvenido a Ironhacker's Page, completa tu nombre para Ironhacker. En las dos listas Cosas que me gustan y Cosas que no me gustan, completa la lista con tus propios datos. Después de realizar estos cambios, agrega y confirma esos cambios.

El repositorio ahora está en nuestra computadora y hemos realizado cambios. Ahora veamos cómo enviar nuestros cambios al repositorio principal del propietario original.

Solicitud de pull

¿Qué es una solicitud de pull?

Una solicitud de pull es una forma de notificar al propietario del repositorio original que has realizado algunos cambios y deseas fusionar esos cambios en su repositorio, a discreción del propietario.

Para entender por qué harías una solicitud de pull, primero necesitas una perspectiva ligeramente diferente. En este momento, eres una persona, trabajando en un archivo, en un proyecto.

En sus empresas profesionales, proyectos de código abierto e incluso más adelante en el curso, cuando colaboras en algunos ejercicios grupales, puede ser muy difícil administrar qué cambios se realizan, cómo se hacen y evitar conflictos.

Por ejemplo, echemos un vistazo a todas las personas que intentan contribuir al framework express.js que utilizaremos más adelante en el curso:

Estas son personas que han forkeado el repositorio, han realizado algunos cambios y luego han creado una solicitud pull. ¿Por qué?

• Le da al propietario del repositorio la oportunidad de revisar el código antes de incluirlo en la base de código. Los proyectos de código abierto están abiertos después de todo, pero tienen estándares. A menudo, los propietarios del proyecto querrán revisar el código para asegurarse de que no haya interrupciones en los cambios, ni siquiera ataques peligrosos en el PR (pull request). En otros casos, incluso puede ser que su jefe revise su código para asegurarse de que está haciendo un buen trabajo.
• Deja espacio para el debate entre las partes interesadas: en los proyectos de código abierto, a menudo hay muchas partes interesadas que desean aprobar o denegar características antes de que se incluyan en el proyecto. Por ejemplo, mira esta solicitud pull. No te preocupes por el tema, no tendrá sentido por un buen tiempo.

Como hacer una solicitud pull

Tus cambios locales en nuestro proyecto de práctica deben organizarse y comprometerse ahora ... ¿no? El siguiente paso es presionar a su repositorio.

Si recuerdas en una lección anterior, tuvimos que agregar un control remoto a nuestro repositorio para poder enviar a GitHub. Una ventaja de clonar un repositorio de GitHub es que el control remoto ya está conectado:

$ git remote
# origin

Recuerda que el origen del nombre remoto es simplemente la convención de GitHub para el nombre de tu repositorio remoto. En el ejemplo anterior, se llamaba github-repo, y se puede llamar cualquier cosa. Sin embargo, por defecto, GitHub nombrará el origen remoto cuando clones un repositorio.

El siguiente paso es enviarlo a tu propio repositorio:

$ git push origin master

Si esto tuvo éxito, estás listo para pasar a la solicitud de pull. Navega hasta el repositorio original (https://github.com/ironhack-labs/lab-github-practice) y da clic en "Pull Requests":

Y luego haga clic en "Comparar a través de los forks":

En el menú desplegable del lado derecho, elija su fork como el fork de la cabeza:

El fork base es el repositorio original. Estás diciendo "Comparar mi rama con el original". Si has ejecutado esto correctamente, deberías ver aparecer una pantalla con una comparación lado a lado de los dos proyectos:

Esto es súper útil, especialmente en el futuro cuando tienes muchos archivos para comparar. da clic en "Crear pull request":

Finalmente, se te presentará un cuadro de diálogo solicitando un título y una descripción de la solicitud de pull. Normalmente, esto se usará para describir los cambios que ha realizado. En Ironhack, utilizamos esto como una herramienta para verificar tu trabajo.

En el título, incluye eu nombre y el campus al que asistes; "Ironhacker - México" y "Portafolio Personal GitHub completado". En la descripción, deja uno (o muchos) de tus problemas al aprender Git o GitHub. Pulsa el botón "Crearpull request", y eso es todo!

Ejercicio

En nombre de la colaboración, visita la página de solicitudes de extracción. Encuentra la solicitud de extracción de otra persona y trata de resolver la pregunta en la descripción de su solicitud de extracción en los comentarios.

Si aún no hay solicitudes de extracción, intenta volver a visitar la página en una fecha posterior.

Referencia rápida

Aquí tienes los comandos más importantes que deberías haber aprendido en esta lección:

• Clonar un proyecto

$ git clone <url-del-repo>

Resumen

En esta lección, discutimos la colaboración en GitHub.

Esto incluyó la creación de un repositorio, lo que significa crear una copia de un repositorio remoto en sus propios repositorios.

También discutimos cómo descargar un repositorio remoto de git a su máquina usando git clone.

Finalmente, discutimos cómo fusionar tus cambios locales en el repositorio principal de otra persona utilizando solicitudes pull, y por qué esas solicitudes pull son importantes para los proyectos de desarrollo del mundo real.

La colaboración es uno de los propósitos principales de GitHub. Usando las herramientas que hemos resaltado en esta sección, puede hacer cosas como contribuir a proyectos de código abierto.

Además, podemos utilizar estas características para otras cosas, como enviar trabajos en Ironhack y trabajar en un equipo de desarrollo en el mundo real.

Git_GitHub_Github.md

Git & GitHub | GitHub

Objetivos

despues de esta lección aprenderás a:

• Conocer que es github y para que se usa.
• Comprender que es un repositorio remoto y por qué es útil.
• Ser capaz de empujar y extraer el código entre tus repositorios locales y remotos.

Que es Github

Como se discutió anteriormente, GitHub es una herramienta para colaborar con otros (DVCS) usando Git. En resumen, GitHub nos permite alojar nuestros repositorios Git en la nube para que puedan ser compartidos por otros. GitHub también tiene características para:

• Administrar Repos: la colaboración del equipo puede ser complicada. Cuando varias personas trabajan en el mismo proyecto, es difícil encontrar una fuente de verdad y administrar quién puede cambiar el repositorio. GitHub tiene características para facilitar esto.
• Gestión de proyectos: con los proyectos de código abierto, a menudo es difícil establecer la dirección general del producto, mostrar de forma transparente qué características se están implementando y la prioridad de esas características.
• Redes sociales: GitHub tiene funciones para buscar y encontrar otros desarrolladores, buscar repositorios con un lenguaje específico y seguir / dejar de seguir a otros programadores.
• Organizaciones y administración de equipos: si tienes una empresa o un proyecto en el que trabajan varias personas, puedes crear una organización o un grupo de personas con diferentes permisos y capacidades en el repositorio.

…y muchos más.

Actualmente, tenemos un repositorio local de Git. Tal como están las cosas, no podemos compartir este repositorio con nadie, así que cambiemos eso.

Creando un repositorio en Github

Hay bastantes maneras de crear un repositorio de GitHub, pero hablemos de lo más simple primero. La forma más fácil de comenzar a trabajar es visitar GitHub. Si aún no lo has hecho, crea una cuenta y luego visita la página de inicio.

Has clic en el signo 'más' en la esquina superior derecha de la página, y luego haga clic en "Nuevo repositorio":

Verás la siguiente página. Completa los datos tal como están en la captura de pantalla:

Algunas cosas que debe tener en cuenta sobre esta página:

• Nombre del depósito: este es el nombre del depósito tal como aparecerá en GitHub. Este no tiene que ser el mismo nombre que tu repositorio local.
• Descripción: esto es útil para personas externas que pueden tropezar con su proyecto en GitHub.
• Público / privado: si tu repositorio es público, eso significa que cualquiera puede descubrir tu proyecto en Google o su perfil. Los proyectos del mundo real muchas veces serán repos privados, por lo que solo aquellos que sean colaboradores pueden verlo. Esta es una función paga, así que por ahora será pública.

Deje el resto como predeterminado por ahora, y haga clic en "Crear repositorio". A continuación, se le dirigirá a una página que se parece a la siguiente:

Prestemos especial atención a la siguiente sección "empujar un repositorio existente desde la línea de comandos", ya que ya tenemos un repositorio local en nuestras computadoras:

GitHub nos da algunas instrucciones aquí, pero echemos un vistazo más profundo.

Añadiendo un Repositorio remoto: git remote

Nuestro repositorio remoto y nuestro repositorio local son dos repos completamente diferentes. Cuando hagamos cambios a nivel local, tendremos que enviarlos a nuestro repositorio remoto. Cuando hacemos cambios de forma remota, tendremos que llevarlos a nuestro repositorio local.

El primer paso en esto es conectar los dos repos. Esto se puede hacer utilizando el comando add remoto de git, mientras se brindan algunas opciones:

• Alias. Usted crea un alias en su sistema para el repositorio remoto, que apuntará al repositorio de GitHub. Es muy común llamar a este origen de Alias, pero puede usar el nombre que desee.
• URL del repositorio GitHub. URL única que GitHub proporciona para cada uno de sus repositorios.

Ve a tu carpeta practica-git en tu computadora si aún no estás allí, y ejecuta lo siguiente:

$ git remote add github-repo https://github.com/<tu-usuario-de-githu>/git-practice.git

En este caso, estamos usando github-repo como alias para nuestro primer proyecto GitHub.

💡 Puedes recuperar el enlace utilizado en el fragmento de código anterior a tu repositorio de GitHub aquí:

Esto le dice a tu repositorio local de Git: "Agregue un repositorio remoto llamado github-repo, y haga que apunte a https://github.com/jalexy12/git-practice.git".

Podemos ver una lista de repos remotos adjuntos a nuestro repositorio local actual ejecutando git remote sin opciones:

$ git remote

Puedes tener tantos o tan pocos enlaces remotos como desees. GitHub es solo un servicio remoto de alojamiento de Git. Hay otros como Bitbucket, Gitlab y muchos más.

Ahora que nuestro repositorio local y el repositorio remoto están conectados a través de un control remoto, ¡introduzcamos algo de código!

Empujar cambios a un repositorio remoto: git push

Empujar a un repositorio remoto es bastante simple en la mayoría de las situaciones. Usamos el comando git push, junto con un par de opciones para enviar nuestro repositorio local a nuestro repositorio remoto:

$ git push github-repo master

• git-push: comando para pasar el código de un repositorio local a un remoto.
• github-repo: Alias del repositorio remoto al que queremos presionar. Eventualmente, podemos tener múltiples repositorios remotos, por lo tanto le damos un nombre.
• master: Branch al que estamos presionando a GitHub. Nos adentraremos en las ramas más adelante, así que no te preocupes por este poco.

La línea de comando puede solicitar un nombre de usuario y contraseña. Este es el nombre de usuario y la contraseña de tu cuenta de GitHub. Actualiza GitHub, ¡y deberías ver el código que has confirmado!

Traer cambios de un repositorio remoto: git pull

Pull

Ocasionalmente, los repositorios de GitHub tendrán cambios que no tenemos en nuestra computadora local. Esto puede suceder cuando los compañeros de equipo envían el código al repositorio, o cuando actualizamos el código en GitHub manualmente.

En esta situación, tenemos que usar git pull para extraer el código a nuestro repositorio local desde GitHub.

Comencemos modificando un archivo en GitHub. En la página del repositorio, haga clic en datos.txt.

En la página siguiente, haga clic en el botón "Editar este archivo":

Modifica una línea y luego has clic en "Confirmar cambios":

Acabas de realizar un compromiso con el repositorio en GitHub. Si abres el archivo localmente, ¡nada ha cambiado!

Para retirar nuestro commit más reciente de GitHub, tenemos que usar git pull. git pull funciona de una manera muy similar a git push:

$ git pull github-repo master

Una vez más, el comando git pull toma dos argumentos. El primero es el alias remoto y el segundo es la rama. Como se dijo anteriormente, no te preocupes por la rama. Si echas un vistazo a datos.txt, ¡debería tener tus actualizaciones de GitHub!

Referencia rápida

Agregar un repositorio remoto

$ git remote add <alias> <url-de-github>

Empujar al repositorio remoto

$ git push <alias> <rama-remota>

Pedir al repositorio remoto

$ git pull <alias> <rama-remota>

Resumen

En esta lección hablamos sobre lo que es GitHub y cómo impulsar el código desde su repositorio local a GitHub en Internet.

También discutimos cómo extraer el código de un repositorio de GitHub a nuestra computadora. Esto puede ser útil cuando se trabaja con un equipo o realizando pequeñas actualizaciones en su propio repositorio.

Git y GitHub son temas muy complejos, pero los comandos que se te muestran en las últimas dos lecciones te pueden llevar bastante lejos.

A partir de ahora, use Git para rastrear los cambios en todos sus proyectos, agregando y cometiendo cada paso del camino. Al final de cada día, asegúrese de enviar esos cambios a un repositorio de GitHub. Esto lo preparará para el curso y su futura carrera como desarrollador de pozos, ya que cualquier compañía a la que postule le esperará que tenga un conocimiento práctico de un VCS.

Introduction_to_the_command_line.md

Introducción a la linea de comando

Objetivos

despues de esta lección aprenderás a:

• Entender que es la linea de comando.
• Entender la importancia de la linea de comando.
• Usar comandos básicos de la linea de comando.
• Usar caracteristicas de la terminal como: nueva terminal, nueva pesataña, paneles divididos.

Introducción

La línea de comando es una herramienta muy útil incluida en tu sistema operativo. Proporciona una gran cantidad de funcionalidades para interactuar con la computadora, dándole al usuario mucha potencia.

Que es la linea de comando

La interfaz de línea de comandos, o CLI, es una herramienta en la que puedes escribir comandos de texto para realizar tareas específicas.

Cuando usas tu computadora, comúnmente señalas y haces clic en elementos gráficos con el mouse para realizar tareas (crear, mover, eliminar carpetas y archivos, ejecutar aplicaciones, etc.). Cuando haces eso, estás usando una GUI (Interfaz Gráfica de Usuario) y su uso puede ser reemplazado por la CLI.

Puedes escribir comandos de texto en la CLI para realizar tareas específicas en lugar de mover el mouse por la pantalla. Así como puedes controlar directamente la computadora escribiendo, puedes hacer las cosas de manera más eficiente que cuando usa elementos gráficos.

Ejecutando la terminal

Para comenzar con la línea de comando, debes abrir la ventana del terminal.

La terminal es un programa incluido en su sistema operativo en el que puedes escribir y ejecutar comandos basados en texto.

Cuando ejecutas la aplicación de terminal, tu símbolo del sistema se iniciará apuntando a una carpeta específica. Desde allí, puedes navegar entre carpetas, actuar sobre archivos dentro de estas carpetas o realizar otras acciones.

Usuarios Mac OS: iTerm2

Para abrir una sesión de terminal en Mac OS, simplemente has clic en la Búsqueda de Spotlight y escribe iTerm2. Aparecerá una nueva ventana de Terminal iTerm2.

Ancla el lanzador en la barra de navegación del Dock:

Usuarios Linux: Terminator

Para abrir una sesión de terminal en Linux, simplemente abra la barra de búsqueda y escriba Terminator:

Aparecerá una nueva ventana de Terminator. Se recomienda anclar el ícono en la barra de menú para tener un acceso rápido a tu terminal.

Juguemos con la terminal

Seguro te mueres de ganas por ejecutar algunos comandos, ¿verdad?Así que adelante y prueba esto:

No necesitas escribir el carácter $ al ingresar estos comandos. La terminal rellenará automáticamente este carácter para indicarle dónde se encuentra el cursor en la terminal.

$ whoami
// este comando devolvuelve tu usuario en sesión.

$ pwd
// este comando devuelve el directorio donde estás trabajando.

$ ls
// este comando devuelve una lista de todos los archivos y carpetas del directorio actual.

¡Esto es solo un comienzo! Tendremos muchos más comandos para usar en futuras lecciones.

Resumen

En esta lección hemos aprendido un poco sobre qué es la línea de comando y por qué la usamos. El ecosistema de la línea de comando es amplio y vivirás de él como desarrollador, por lo que no podemos enfatizar suficientemente la importancia de estas lecciones. Esto fue solo lo básico, ¡pero tenemos más por venir!

Recursos extra

• Survival Guide for Unix Newbies
• Learn the comand line - Code Cademy
• Terminus - Un patio de juegos para calentar y prepararse para lo que viene :)!

Managing_the_File_System.md

Manejando el sistema de archivos

Objetivos

Despues de esta lección aprenderás a:

• Entender la organización del sistema de archivos del sistema operativo.
• Entender la razón de ser del directorio 'Home' y 'Root'.
• Navegar alrededor del sistema de archivos mediante comandos de terminal.
• Crear, borrar y mover archivos desde la terminal.
• Crear y borrar carpetas desde tu terminal.

Introducción

En esta lección aprenderás qué es el sistema de archivos y cómo administrar archivos y carpetas a través de la terminal. Durante la lección, necesitarás la terminal, así que adelante y abre una nueva ventana ahora.

MacOS: Busca con Comando + barra espaciadora (⌘ + Spacebar) y escribe iTerm2.

Linux: abrir Terminator.

Navegar por la terminal y realizar las operaciones que estamos por discutir es una habilidad absolutamente vital para los desarrolladores. Cuanto más eficiente sea en la terminal, más eficiente será el desarrollador.

Estas habilidades se construirán con tiempo y práctica.

Sistema de archivos

Organización del sistema de archivos

Los archivos en un sistema Linux u OSX están organizados en lo que se denomina estructura jerárquica de directorios. Significa que están organizados en un patrón similar a un árbol de directorios o carpetas, que pueden contener archivos y otros directorios.

Directorios Root y Home

El directorio de nivel superior en el sistema de archivos se llama directorio raíz (/).

Cualquier directorio puede contener archivos y/o subdirectorios, que contienen más archivos y subdirectorios y más.

Cada usuario tiene su propio directorio de inicio, donde guarda toda la información para su cuenta, incluyendo su propio escritorio, películas, imágenes y aplicaciones.

Cuando abres tu terminal, lo más probable es que tengas el terminal esperando los comandos en su directorio de inicio (/ home / <su_nombre de usuario>).

Primeros comandos

¡Advertencia! ¡No necesitaa escribir el signo de dólar ($), solo el comando! Tu terminal mostrará el signo de dólar para que sepas dónde está la entrada. Además, el # => denota un valor de retorno. Esto es lo que la computadora debe imprimir después de ingresar un comando. No necesitas escribir ninguno de estos.

probemos algunos comandos útiles

• Mostrar el nombre de tu equipo:

$ hostname
# => myComputer

• Mostrar el nombre del usuario en sesión:

$ whoami
# => myUser

• Mostrar el directorio actual (pwd = print working directory):

$ pwd
# =>  /home/myUser

Lista de archivos

Muestra una lista de archivos dentro de la carpeta activa usando el comando ls. También puedes usar parámetros después de ls para mostrar información más detallada.

Puedes y debes usar ls tanto como puedas para ver dónde te encuentras y qué archivos / carpetas existen en el directorio actual antes de ejecutar los comandos.

Navega hasta tu directorio de inicio (cd ~) y ejecuta los siguientes comandos.

• Añade -l para obtener una lista con detalles

$ ls -l

• Añade -t para ordenar los resultados por tiempo de archivo:

$ ls -t

• Añade -s para ordenar por tamaño de archivo

$ ls -s

• Añade -r para ordenar a la inversa

$ ls -r

• Añade -a para mostrar archivos ocultos

$ ls -a

Puedes combinarlos todos juntos para mejorar tu listado. Si escribe ls -la, el resultado será la lista detallada de archivos, incluidos los ocultos.

Ten en cuenta que los primeros directorios que aparecen son . y .., representando la carpeta actual y la carpeta principal, respectivamente.

navegarentre directorios

Algunas veces necesitas navegar entre directorios, puedes usar el comando cd para hacerlo. Puedes usar el siguiente comando para cambiar al directorio anterior:

$ cd..

Puedes navegar a rutas completas o relativas. Si estás en /Documentos/Ironhack y quieres navegar a la carpeta juego dentro de esa carpeta, simplemente puedes escribir:

$ cd juego

También puedes navegar a rutas absolutas. Las rutas absolutas comienzan con el símbolo / (directorio raíz). Hacer esto especifica que la ruta comienza desde el directorio raíz. Navega a tu escritorio escribiendo:

$ cd usuarios/<tu_uruario>/escritorio

Sugerencia: Escribe whoami para ver cuál es el nombre de usuario.

Consejo de iTerm

Una de las mejores características que te ofrece iTerm es la posibilidad de cambiar de directorio sin escribir cd. Si estás en el directorio de inicio, ~, puedes cambiar al Escritorio escribiendo simplemente Escritorio.

Recuerda que la carpeta del escritorio está en la ruta ~ / Desktop.

Trucos

• Navegua directamente a la ruta raíz:

$ cd /

• Navegua directamente al directorioi raíz del usuario:

$ cd ~

• Navegua directamente al directorio de trabajo anterior:

$ cd -

Acompletado con tabulación

Escribir el nombre completo de los archivos y carpetas existentes puede ser tedioso. Puedes utilizar la tecla Tab para omitir todo el tipado y navegar mucho más rápido:

• Ve al directorio Home

$ cd

• Escribe

$ cd Es

• Presiona el tabulador

Esto autocompletará automáticamente el nombre de la carpeta a:

$ cd Escritorio

Genial, ¿verdad? Sucede porque Escritorio es el único nombre que coincide con la cadena dada (Es).

Reglas

• Intentará hacer coincidir cualquier carpeta inmediatamente dentro, pero no intentará hacer coincidir ninguna subcarpeta. En el siguiente caso, si estamos en el directorio de inicio y probamos cd Des, coincidirá con Desktop, pero no con Desktop_folder:

/Home (~)
    /Desktop
    /Documents
        /Desktop_folder
  ....

• No es sensible a mayúsculas y minúsculas. Si está en tu directorio de inicio y pruebas cd des, coincidirá con Desktop incluso si el nombre real de la carpeta está en mayúscula.

Crear y borrar carpetas

Crea una nueva carpeta usando el comando mkdir <nombre_de_la_carpeta>:

$ mkdir nueva-carpeta

Borra una carpeta vacia usando el comando rmdir <nombre_de_la_carpeta>:

$ rmdir nueva-carpeta

Puedes eliminar cualquier carpeta siempre que la carpeta esté vacía. Si tiene archivos, tendrás que eliminar estos archivos antes de poder eliminar la carpeta.

Crear y borrar archivos

• Crea un nuevo archivo en blanco usando el comando touch <nombre_del_archivo>:

$ touch nuevo_archivo

• Borra un archivo usando el comando rm <nombre_del_archivo>:

$ rm nuevo_archivo

• Crea una nueva carpeta, ingresa la nueva carpeta usando cd, y luego crea varios archivos usando touch:

$ mkdir my-files
$ cd my-files
$ touch file-1
$ touch file-2
$ touch file-3

Para eliminar una lista de archivos y carpetas, incluidos todos los archivos de los subdirectorios, sin solicitarle ninguna entrada, puedes usar la opción -r para recursiva y la opción -f para forzarla. Si es un directorio sobre mis archivos, escribe:

! Ten cuidado al eliminar el archivo con rm -rf. Puedes eliminar todos los archivos en tu sistema operativo si vas a la raíz de tu computadora y ejecutas el comando.

$ cd ..
$ rm -rf my-files

Mostrando un Archivo

Puedes mostrar el contenido de un archivo en panalla con el comando cat:

$ cat nombre_del_archivo

Si el archivo especificado es muy grande, no podrás ver todo el contenido en la pantalla. Para poder ver todo el contenido página por página, debes usar los comandos más o menos:

$ more nombre_del_archivo

Esto mostrará el contenido de un archivo en la pantalla y te pedirá que recorras el archivo una pantalla a la vez.

Copiando un archivo

Usa el comando cp para copiar un archivo. Primero creemos un nuevo archivo:

$ touch hola.txt

Abre el archivo y agregua texto. Puedes usar un editor de texto para agregar el texto. Crea una nueva carpeta desechable, haz clic en ella y agrega "Hola. Estoy aprendiendo a copiar un archivo ":

$ cp hola.txt copia.txt

Lista los archivos para verificar que tienes ahora dos archivos. Abre copia.txt para verificar que el texto esté allí:

$ ls

También puedes copiar el archivo en otro directorio:

$ mkdir copias
$ cp hola.txt copias/

Observa la / (barra diagonal) al final de un directorio. Esto asegura que la ruta sea un directorio, por lo que si el directorio no existe, obtendrá un error. Verifica que el archivo copiado esté allí:

$ ls copias

Finalmente, podemos copiar directorios que no están vacíos ejecutando el siguiente comando:

$ cp -r

Mover un archivo

Puedes mover un archivo a un directorio diferente usando el comando mv. Crea e ingresa un nuevo directorio llamado temp:

$ mkdir temp
$ cd temp
$ touch tacos.txt
$ ls temp

Deberías tener solo un archivo llamado tacos.txt. Puedes cambiarle el nombre moviéndolo a la misma carpeta:

$ mv tacos.txt quesadillas.txt
$ ls

Ahora deberías tener un archivo llamado quesadillas.txt. Mueve el archivo a otro directorio. En lugar de especificar un nuevo nombre para el archivo, especifique una nueva ruta:

$ mv quesadillas.txt /Usuario/tu_nombre/Escritorio
$ ls /Usuario/tu_nombre/Escritorio

Resumen

En esta lección, has aprendido todo sobre el sistema de archivos. Has leído sobre cómo se organizan tus archivos en una estructura de árbol y algunas funciones básicas, como enumerar, crear y eliminar archivos y carpetas.

También has echado un vistazo a cómo copiar y mover archivos y carpetas, al tiempo que agregas parámetros a tus comandos para obtener el resultado deseado.

La manipulación del sistema de archivos es muy importante para ser un desarrollador eficiente. Mover archivos en carpetas en el buscador de tu Mac está bien, pero puedes aprender muy rápidamente cómo funciona si dominas la terminal. Has tu mejor esfuerzo para no usar la GUI del buscador, porque la práctica hace al maestro.

Recursos Extra

• Tower Command Line Cheat Sheet
• Terminal Cheat Sheet for Mac (including shortcuts)

Mars_Rover_Kata.md

Mars Rover Kata

Introducción

Estamos enviando un rover a Marte y tenemos que programar sus movimientos para que podamos enviarle comandos desde la Tierra. En Ironhack, nos encargaron desarrollar el código para hacerlo, y pensamos que sería un trabajo para los desarrolladores junior.

Entrega

Envíe su archivo app.js a su TA o profesor a través de Slack o correo electrónico.

Información básica

Nuestro Mars Rover es un poco tonto. Con eso, queremos decir que no se puede mover y girar al mismo tiempo. Esto significa que si el rover quiere moverse hacia la izquierda, su primer movimiento debe ser un turno. Su próximo movimiento será un paso adelante.

Discutiremos este concepto con más detalle a medida que avanzamos en el ejercicio. Además, nuestro rover está en una misión de prueba. La NASA ha colocado el rover en una cuadrícula de 10x10 para asegurarse de que todo esté bien antes de que lo enviemos a Marte.

En un nivel alto, lo que haremos en el ejercicio es lo siguiente:

• Crea una función para encender el móvil.
• Cree una función para mover el móvil hacia adelante o hacia atrás en función de su dirección.
• Crea una función para recibir una lista de comandos y moverlos fuera de esos comandos.

Configuración

En este ejercicio, podemos usar la Consola de desarrollador de Chrome para aprovechar las funciones y los objetos globales.

Primero, descarga el repositorio aquí. Descomprime los archivos.

Abre mars-rover-v2/javascripts/app.js en VSCode.

Luego, abre mars-rover-v2/index.html en Google Chrome. Puede hacerlo navegando hasta el directorio en su terminal y escribiendo open index.html, o arrastrando el archivo HTML a tu navegador.

Con el archivo HTML abierto en Chrome, abre tu consola de desarrollador. En Linux y Windows esto se hace con ctrl + shift + j. En Mac, esto se hace con cmd + opt + j.

Después de haber completado esto, su página debe verse similar a esto:

En realidad, podemos ejecutar las funciones y acceder a variables con ámbito global utilizando la consola:

Vas a utilizar esto para probar tu móvil y ejecutar las funciones que crearemos en cada paso.

Iteración 1 | El objeto Rover

Crea un objeto para representar el rover. Este objeto tendrá solo una propiedad por ahora: la dirección.

La propiedad de dirección puede contener uno de cuatro valores: "N", "S", "E" o "W". La dirección predeterminada del rover será "N" (norte).

Iteración 2 | Girando el Rover

El rover tiene un atributo de dirección. Ya hemos proporcionado funciones llamadas turnLeft y turnRight que reciben un objeto rover como argumento. Tu trabajo es girar el rover en la dirección adecuada en función de su dirección actual.

Ejemplos

Rover está mirando hacia el norte y gira a la izquierda => Rover ahora se enfrenta al oeste.

Rover está mirando hacia el oeste y gira a la izquierda => Rover ahora se enfrenta al sur.

Rover está mirando hacia el norte y gira a la derecha => Rover ahora está mirando hacia el este.

Enfoque sugerido

Comienze con una declaración de cambio. En función de la función que se está llamando, gira el móvil en la dirección correcta en función de su dirección actual.

Pruebe estas funciones usando la consola de Chrome para asegurarse de que funcionen. Recuerda, la función console.log() se puede usar para registrar cualquier cosa. Puede usar esto para ver a qué dirección se dirige actualmente su móvil.

Iteración 3 | Mover el Rover

La posición del objeto Rover

Para mover el rover, tenemos que hacer un seguimiento de la posición del rover.

Las posiciones se pueden representar como un par de coordenadas, x e y. Agrega dos propiedades a tu móvil llamadas x e y. Sus valores predeterminados serán ambos 0.

Avanzando

Una vez que el móvil tiene una posición, es hora de moverlo.

Cómo moverlo

Avanzar es una función de la dirección actual del rover, y el movimiento hacia adelante.

Por ejemplo, si el Rover está orientado hacia el oeste y avanza, disminuiríamos las x del Rover por 1.

Si el rover está orientado hacia el norte y avanza, disminuiríamos el y del rover en 1.

Si el móvil está orientado hacia el sur y avanza, aumentaríamos la y en 1.

Complete esta lógica en la función moveForward. Después de cada movimiento, haz console.log a las coordenadas del móvil para que puedas ver dónde está colocado.

Iteración 4 | Comandos

Crea una función que recibe una lista de comandos. Estos comandos serán la primera letra de (f)orward, (r)ight, or (l)eft.

Para probarlo, use la cadena: 'rffrfflfrff'.

Enfoque sugerido

Usa un ciclo para iterar sobre la cadena. Dentro de este bucle, escribe una instrucción switch o if para llamar a la función correcta. Por ejemplo, si la letra es f, querrás llamar a la función goForward.

Iteración 5 | Rastreo

Queremos saber dónde ha estado nuestro rover. Crea una propiedad en el objeto móvil que contenga las coordenadas de los lugares en los que ha estado. Llama a esta propiedad travelLog.

Después de cada movimiento, empuja las coordenadas del espacio anterior a la matriz travelLog. Después de que el móvil haya terminado sus movimientos, imprima todos los espacios por los que ha viajado el móvil.

Bonus | Hacer cumplir los límites

En algún punto, es posible que accidentalmente haya apagado nuestro móvil de la red. Si lo recuerdas, nuestra cuadrícula es 10x10. ¡Asegúrate de que tu móvil no se desvíe accidentalmente del mapa!

Bonus | Otras características sugeridas

Si descubrió que las primeras iteraciones del ejercicio son fáciles, intente implementar las siguientes características:

• Retrocediendo: Crea otra función llamada moveBackward que moverá el rover hacia atrás. Esto será muy similar a la función moveForward.
• Validar entradas: si ingresamos una letra en nuestras entradas que no es un comando de rover, no sucede nada. Por ejemplo, ffzzy simplemente avanzaría dos veces. Agregue la validación para que las entradas sean f, b, r o l.

Lo siguiente requiere que realmente cree una cuadrícula para que el móvil se mueva. En el código, estas cuadrículas a menudo se representan como matrices bidimensionales.

• Obstáculos: cree obstáculos para el rover. Si el próximo movimiento del rover lo colocaría en un obstáculo, detenga su avance e informe el obstáculo que se encuentra en console.log.
• Otros rovers: agrega rovers adicionales al mapa. Haz que se turnen para moverse. Si un rover se va a conectar con el otro, debe detener el rover y console.log un mensaje que dice así.

Numbers_Expressions_and_Evaluations.md

Numbers, Expressions, and Evaluations

Objetivos

Después de esta lección aprenderás a:

• Usar una variedad de operadores diferentes en JavaScript.
• Comprender qué es una expresión.
• Comprender la precendencia del operador y el orden en que se ejecuta el código.
• Usar operadores y expresiones con números para hacer cálculos simples.

Introducción

En esta learning comprenderás qué es un operador y cómo crear operaciones con ellos en JavaScript. También aprenderás más sobre la asignación de valores variables y cómo puedes crear una operación para una variable, por ejemplo, sumar o restar un valor.

El comando console.log A lo largo de esta lección, verás el siguiente comando:

console.log( ... )

Aprenderás más sobre la consola más adelante, pero por ahora solo necesita saber que es una instrucción que nos permite imprimir un valor o el valor de una variable.

Operadores básicos

Si estás familiarizado con las matemáticas u otras ciencias, es probable que el término operador sea familiar. Cuando estás haciendo una sume básica, en el ejemplo 2 + 2, + es el operador, y además es la operación.

En matemáticas, hay una gran cantidad de operadores más allá de la simple suma. En el código (específicamente JavaScript por ahora), también hay. Algunos ejemplos simples son

• + suma
• - resta
• * multiplication
• / division

Todos están familiarizados con estos operadores, pero aquí hay un Codepen con el que experimentar:

https://codepen.io/ironhack/pen/WGRbGO

Operadores avanzados

Exponencial

En matemáticas, hay un concepto muy útil llamado Exponencial. La exponencial es el proceso de tomar una cantidad b (la base) a la potencia de otra cantidad e (el exponente).

En JavaScript, puedes usar fácilmente la exponencial usando el operador ** (exponencial):

console.log(2**3); // => 8

Modulo

Módulo (%) es el operador restante. Mientras que la división (/) devuelve el cociente, el módulo devolverá el resto de esa división.

Otra diferencia es que, mientras que la división devolverá el cociente exacto de la operación para llegar a un recordatorio de 0, el módulo hará la operación con los números exactos. Esto significa sin decimales.

Esto es muy útil para encontrar múltiplos de un número particular y muchos otros casos de uso.

Veamos un ejemplo:

https://codepen.io/ironhack/pen/ozBgrX

Operando con variables

Anteriormente aprendiste a asignar valores a las variables. Cuando haces variable = expresión, = es el operador de asignación porque está asignando un valor a una variable.

Luego, si deseas agregar uno a un contador:

https://codepen.io/ironhack/pen/NpbrQw

Operadores de Asignación

Podría ser un poco molesto escribir los mismos nombres de variable una y otra vez. Afortunadamente, tienes a tu disposición otros operadores para asignar valores a una variable. Echemos un vistazo a un ejemplo:

https://codepen.io/ironhack/pen/jryEGk

La asignación += es el equivalente de myAge = myAge + 1.

Tabla de operadores de asignación básica

Nombre	Operador	Equivalente
Asignación	x = y	N / A
Asignación sumatoria	x += y	x = x + y
Asignación substractoria	x -= y	x = x - y
Asignación multiplicatoria	x *= y	x = x * y
Asignación divisoria	x /= y	x = x / y
Asignación residual	x %= y	x = x % y
Asignación exponencial	x **= y	x = x ** y

Expresiones

Una expresión es cualquier conjunto válido de literales, variables, operadores y otras expresiones que evalúan un único valor. El valor puede ser un número, una cadena o un valor lógico. Conceptualmente, hay dos tipos de expresiones: las que asignan un valor a una variable y las que simplemente tienen un valor.

En cristiano: una expresión es una combinación de cualquier valor (número, cadena, matriz, objeto) y conjunto de operadores que dan como resultado otro valor.

Una expresión simple

 2 + 4

Y este es el árbol de análisis correspondiente:

Tome el número dos y agregue cuatro a él.

Una expresión más complicada

var result = ((7 + 5) / 3) - 8
// => -4

• Tome el número 7, agrega 5 a él.
• Divide este nuevo valor por 3.
• Toma ese valor y luego resta 8.
• Asigna ese valor al resultado.

el parentesis es un operador de agrupación, pero hablaremos más sobre esto en la siguiente sección.

En este ejemplo, JavaScript sabe en qué pasos juntar los números. ¿Como hace esto?

Precedencia del operador

En matemáticas y programación de computadoras, el orden de las operaciones (o precedencia del operador) es una colección de reglas que definen qué procedimientos realizar primero para evaluar una expresión matemática dada.

Las expresiones en matemáticas tienen un orden particular en el que se evalúan, en función de los operadores que utilizan.

2 + 2 = 4
2 + 2 * 2 = 6
(2 + 2) * 2 = 8

En JavaScript, los operadores matemáticos son los mismos que en matemáticas, es decir, PEMDAS. ¿Qué es PEMDAS?

Precedencia	Operador	Nombre
1	()	Parentesis
2	**	Exponencial
3	*	Multiplicación
4	/	División
5	+	Suma
6	-	Resta

Cuanto menor sea el índice (1 para paréntesis, 2 para exponentes, etc.), mayor será la precedencia, lo que significa que cualquier cosa entre paréntesis se ejecutará primero, exponentes en segundo lugar, multiplicación en tercer lugar, etc.

var i = 10 + 5 * 2 ** 3 / 4 - 6
//  === 10 + 5 * 8 / 4 - 6
//  === 10 + 5 * 2 - 6
//  === 10 + 10 - 6
//  === 10 + 4
//  ==> 14

JavaScript analizará esa expresión siguiendo las reglas de precedencia de PEMDAS, por lo tanto, comenzará evaluando los exponentes, y luego la división, luego la multiplicación, y así sucesivamente.

Este diagrama de Parse Tree puede ayudarlo a entenderlo más visualmente :)

Puede encontrar una lista de estos operadores y el orden en que se ejecutan aquí en MDN.

Ejercicio: ¡Adivina el resultado de la expresión!

¡Adivina cuál será el resultado de la expresión! Consejo: Para ver el resultado real, elimine el comentario de console.log eliminando la doble barra (//);

https://codepen.io/ironhack/pen/qaRJab

Resumen

En resumen, en esta lección aprendiste que hay muchas operaciones diferentes que puede realizar en JavaScript. Puedes realizar operaciones matemáticas con las que esté familiarizado, como +, *, - y /, y algunas otras con las que no esté familiarizado.

También ha visto qué es una expresión y cómo se evalúan en función de qué operadores están presentes.

Recursos extra

• MDN Expressions and Operators
• MDN Operator Precedence
• MDN Numbers
• Expressions vs Statements

Selectores_css.md

Selectores de Css

Objetivos

Después de esta lección aprenderás a:

• Explicar las diferentes partes de una regla CSS: selector y bloque de declaración de propiedades.
• Seleccionar elementos con diferentes selectores: elemento, clase e id.
• Determinar cuándo usar un selector de clase o elemento.
• Usar selectores universales.

Estructura de css

Un conjunto de reglas CSS se compone de un selector y un bloque de declaración:

selector(es){
    propiedad1: valor;
    propiedad2: valor;
}

• Selector (es): apunta a los elementos a los que se aplicará la regla de estilo.
• Bloque de declaración: contiene una o más declaraciones separadas por punto y coma. Estas declaraciones especifican las propiedades del elemento y los valores que desea establecer.

Ejemplo

juguemos un poco con este codepen!

https://codepen.io/ironhack/pen/RGbGpR

Abra el código CSS y responda las siguientes preguntas:

• ¿Puedes identificar cuál es el selector en esta regla?
• ¿Puedes identificar el bloque de declaración?
• ¿Puedes identificar la regla específica y su valor?

Selectores

Selectores de tipo

Los selectores de tipo coinciden con los elementos por su nombre de nodo. En HTML, los elementos son las etiquetas que agregamos, por ejemplo, <p>, <header> o <div>. La estructura para los selectores de tipo es:

etiqueta {
  regla: valor;
}

Ya has usado este selector en el ejemplo anterior. Ahora, vamos a entender lo que está pasando.

p {
  color: blue;
}

Este fragmento de código le dice al documento HTML que coloque el color del texto dentro de todas las etiquetas <p> en azul. El selector de elementos afectará a todos los elementos de su clase, sin importar cuántos sean.

<iframe height='265' scrolling='no' title='QpjOPW' src='//codepen.io/ironhack/embed/QpjOPW/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen QpjOPW by Ironhack (@ironhack) on CodePen. </iframe>

Fácil, o no ?

Es tu turno

Modifique el código anterior creando: Dos etiquetas <h4>. El color del texto se oscurecerá. Envuelva la palabra Segunda con un elemento <span>. Esta palabra debe ser amarilla.

Selectores de clase

En HTML y CSS, puedes identificar un grupo de elementos HTML con las mismas características o estilos usando un atributo de clase. La clase es un atributo del elemento (s) que está intentando cambiar y requiere un nombre. La estructura para el selector de clase es:

.clase {
  regla: valor;
}

Ejemplo

/* CSS */
.red {
  background-color: red;
}

<!-- HTML -->
<div class="red">
  This is red!
</div>

Debes nombrar clases usando solo letras minúsculas. Si desea tener un nombre de clase compuesto por varias palabras, sepárelas con guiones, no guiones bajos.

Los selectores de clase coinciden con todos los elementos en función del valor del atributo de clase de un elemento.

<iframe height='265' scrolling='no' title='XMmVja' src='//codepen.io/ironhack/embed/XMmVja/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen XMmVja by Ironhack (@ironhack) on CodePen. </iframe>

Estos selectores no hacen nada por sí mismos. Es solo una forma de agrupar los elementos en una categoría de caja roja o caja azul.

Tu turno

Crea un elemento más blue-box. Crea un elemento de caja amarilla para convertir el color en amarillo. Será una etiqueta <p> con el texto "Este es un texto de color amarillo".

Recuerda agregar un punto antes del nombre de la clase en su archivo CSS.

Analogía

Imagina que estás en un campamento de verano, y de repente los monitores dividen a los campistas en dos equipos: rojo y azul. Dividir las autocaravanas en dos grupos no necesariamente cambia la forma en que se ven, pero luego pretendemos que el monitor dice:

"¡Todos en el grupo rojo se pintan la cara de rojo!"

"¡Todos en el grupo azul pintan sus caras azules!"

Ese es un comportamiento diferente! Este comando cambiará su apariencia y solo se aplicará a su propio grupo. Vamos a traducirlo en código:

.red-group {
  background-color: red;
  width: 200px;
  height: 200px;
}

.blue-group {
  background-color: blue;
  width: 200px;
  height: 200px;
}dWzbYv

<iframe height='265' scrolling='no' title='Red vs Blue' src='//codepen.io/ironhack/embed/dWzbYv/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Red vs Blue by Ironhack (@ironhack) on CodePen. </iframe>

En este caso, el selector es un selector de clase. Significa que seleccionará todos los elementos con la clase de grupo rojo. Ahora, todas las propiedades enumeradas dentro de los corchetes se aplicarán a los elementos con la clase de grupo rojo.

Tu turno Crea un archivo HTML con la siguiente estructura:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>

</body>
</html>

• Aplica el color #00D1AE a la propiedad background-color del body.
• Crea un <div> con class menu, y asigna le las siguientes propiedades: width: 400px. height: 50px. background-color: #00D1AE.
• Crea otro <div> con class content, y asigna le los siguientes atributos: width:400px. height:200px. background-color: red.
• Crea un <div> más y haz que se vea como menu.
• Crea un último <div> y haz que se vea content.

Clases multiples

Cuando desees agregar varias clases a un elemento, incluye cada clase separada por un solo espacio:

<div class="red-box dimensions">
  ...
</div>

❌ El código siguiente es un error común que no funcionará

<div class="red-box" class="dimensions">
 ...
</div>

Ejercicio

¿Recuerdas el menu y las clases de content?

Tienen el mismo ancho, ¿verdad? Crea una clase llamada box. Esta clase tendrá el ancho de regla CSS: 400px ;.

¿Cómo incluirías esta clase en tu HTML?

Selectores de Id

Un selector de ID identifica un elemento único e irrepetible en el HTML. Los selectores de ID coinciden con un elemento basado en el contenido del atributo de ID de ese elemento, que debe coincidir con el valor proporcionado en el selector.

Los selectores de Id se identifican con el símbolo hash (#). La convención de nomenclatura es igual que las clases: si tiene varias palabras, debes concatenarlas con un guión (-), no con un guión bajo (_).

Los elementos pueden y solo deben tener una ID.

Creating a web page

Crea un nuevo documento HTML llamado index.html:

$ mkdir ~/code # Solo si no tienes una carpeta code
$ cd ~/code
$ mkdir web-page-example
$ cd web-page-example
$ touch index.html
$ code .
$ open index.html

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css"> <!-- Note the name of the stylesheet -->
</head>
<body>

</body>
</html>

Ahora, cree un nuevo documento CSS llamado style.css:

$ touch style.css

/* style.css */

A codear!

Creemos una etiqueta div con un atributo id, algo que represente de forma única ese div en el código, digamos cover-box:

<div id="cover-box">
  ...
</div>

Si deseas cambiar el fondo de ese elemento, lo seleccionarás agregando una regla de selección de ID dentro del CSS (que indica un # antes del nombre del id).

#cover-box {
  background-color: black;
  color: pink;
  width: 100px;
  height: 50px;
}

Ahora crea otro elemento con la misma ID en tu documento HTML.

<div id="cover-box">
  First cover box
</div>

<div id="cover-box">
  Second cover box
</div>

¿Que pasa? ¿Cambian todos los elementos con ese id?

Sí, cambia la apariencia de todos los elementos. Los ID son únicos, pero Chrome aplicará los mismos estilos a cada elemento con el mismo ID. Esto no es cierto en todos los navegadores y puede causar muchos problemas en el futuro. ¡Asegúrate de que los ID sean únicos en tu página HTML!

Selector Universal

El selector Universal coincide con un solo elemento de cualquier tipo. Se identifica con un asterisco (*). Omitir el asterisco con selectores simples tiene el mismo efecto. Por ejemplo:

• *.warning
• .warning

Estos dos selectores se consideran iguales, ya que ambos apuntarán a todos los elementos que tienen la warning de clase, independientemente del tipo de elemento (div o p o lo que sea)

* {
  font-family: monospace;
}

¡Ten mucho cuidado cuando use el selector universal, ya que ralentizará considerablemente su página, después de todo, aplicará ese estilo a TODOS los elementos en su página! Normalmente, esta es la primera regla en su documento CSS para aplicar estilos globales como font-face.

Tu turno

Crea una regla para tu index.html:

• Todos los elementos deben tener color: green;.
• Después de ver el resultado, cambie el cover-box. la tapa debe tener color: navy;. ¿Lo que pasa? ¿Cuál es el color del texto dentro del div#cover-box?

El color dentro del div#cover-box debe ser azul marino, ya que es el más específico y debe sobrescribir la regla global.

* {
  color: green;
}

#cover-box {
  color: navy;
}

Ejercicio: IronSkydive | Selectores

En esta lección, has aprendido cómo puedes seleccionar diferentes elementos a través de clases o Id's en tu HTML. También aprendiste cómo seleccionar todos los elementos a través del selector universal *.

En esta iteración, vas a trabajar con algunos de estos conceptos, pero no te preocupes: trabajarás con todos ellos en las próximas iteraciones para diseñar tu HTML.

Recuerda abrir el Codepen que creaste al comienzo del ejercicio para hacer las diferentes iteraciones del ejercicio.

ID's

Primero, agregarás cuatro identificadores, uno por cada <section> que haya definido. De arriba a abajo, los identificadores deberían ser:

• general-information
• structure
• team
• schedule

Esto nos ayudará a identificar las diferentes secciones. Esto también creó algo llamado enlaces internos. ¿Qué pasa ahora si haces clic en los enlaces de <nav> en la parte superior de la página? Se desplaza hacia abajo automáticamente a la sección!

Selector universal

De acuerdo, comencemos a usar la pestaña CSS de nuestro proyecto Codepen. El primer selector que vas a utilizar en el proyecto es el selector universal. Copia el siguiente fragmento al principio de la pestaña CSS:

* {
  margin: 0;
  padding: 0;
}

Esto va a eliminar el margin y el padding de todos los elementos. No te preocupes por cuáles son estas propiedades en este momento, las discutiremos en un momento. Hacemos esto para restablecer algunos estilos que tu navegador aplica automáticamente a los elementos, conocidos como estilos predeterminados del navegador.

Eso es todo. :D

Resumen

En esta lección, has aprendido cómo seleccionar elementos para crear tus propias reglas de CSS y seleccionar el estilo que desee. Has visto tres formas diferentes de seleccionar elementos: por etiqueta, por clase y por id.

Finalmente, has cubierto cómo usar el Selector Universal * para definir los estilos que se aplicarán a todos los elementos en tu página.

Los selectores de CSS son lo que le permite diseñar tus páginas. Sin selectores, no podrías hacer nada con CSS. ¡Asegúrate de familiarizarte con la anatomía de un selector!

Recursos extra

• Pseudo selectores: cómo seleccionar elementos cuando se dispara un evento.
• Selectutorial - Un tutorial completo para comprender los selectores de CSS.
• CSS Cheat Sheet - Tabla rápida para selectores de CSS.