diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index fccfd77800..f077376656 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -51,47 +51,21 @@ npm install -g bower # Install Bower dependencies bower install - -# Create a .env file and populate it with the necessary API keys and secrets: -touch .env +``` +*Private Environment Variables (API Keys)* +```bash +# Create a copy of the "sample.env" and name it as ".env". +# Populate it with the necessary API keys and secrets: +cp sample.env .env ``` -Edit your `.env` file with the following API keys accordingly. If you only use email login, only the `MONGOHQ_URL`, `SESSION_SECRET`, `MANDRILL_USER` and `MANDRILL_PASSWORD` fields are necessary. Keep in mind if you want to use more services you'll have to get your own API keys for those services. If you only use a subset or no OAuth2 authentication methods, you may want to remove them from ```server/passport-providers.js``` - otherwise the server will complain about missing clientIDs at launch. +Edit your `.env` file and modify the API keys only for services that you will use. -``` -MONGOHQ_URL='mongodb://localhost:27017/freecodecamp' +Note : Not all keys are required, to run the app locally, however `MONGOHQ_URL` is the most important one. -FACEBOOK_ID=stuff -FACEBOOK_SECRET=stuff +If you only use email login, in addition to `MONGOHQ_URL`, `SESSION_SECRET`, add the `MANDRILL_USER` and `MANDRILL_PASSWORD` API Keys. Not setting these keys will throw an exception when you sign up which you can ignore, you will still be able to login, however you may get these keys [here](https://www.mandrill.com/signup/). Sign up and create a new pair of keys. -GITHUB_ID=stuff -GITHUB_SECRET=stuff - -GOOGLE_ID=stuff -GOOGLE_SECRET=stuff - -LINKEDIN_ID=stuff -LINKEDIN_SECRET=stuff - -MANDRILL_PASSWORD=stuff -MANDRILL_USER=stuff - -TRELLO_KEY=stuff -TRELLO_SECRET=stuff - -TWITTER_KEY=stuff -TWITTER_SECRET=stuff -TWITTER_TOKEN=stuff -TWITTER_TOKEN_SECRET=stuff - -BLOGGER_KEY=stuff - -SESSION_SECRET=secretstuff -COOKIE_SECRET='this is a secret' - -PEER=stuff -DEBUG=true -``` +You can leave the other keys as they are. Keep in mind if you want to use more services you'll have to get your own API keys for those services and edit those entries accordingly in the `.env` file. ```bash # Start the mongo server in a separate terminal @@ -174,7 +148,7 @@ Read the [Wiki article](https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/How-To 2. By default, all pull requests should be against the FCC main repo, `staging` branch. 3. Submit a [pull request](https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Pull-Request-Contribute) from your branch to Free Code Camp's `staging` branch. 3. The title (also called the subject) of your PR should be descriptive of your changes and succinctly indicates what is being fixed. - - **Do not add the issue number in the PR title**. + - **Do not add the issue number in the PR title**. - Examples: `Add Test Cases to Bonfire Drop It` `Correct typo in Waypoint Size Your Images` 4. In the body of your PR include a more detailed summary of the changes you made and why. - If the PR is meant to fix an existing bug/issue, then, at the end of your PR's commit message, append the keyword `closes` and #xxxx (where xxxx is the issue number). Example: `closes #1337`. diff --git a/client/commonFramework/output-display.js b/client/commonFramework/output-display.js index 77bbf4c49c..9f96908a1f 100644 --- a/client/commonFramework/output-display.js +++ b/client/commonFramework/output-display.js @@ -30,9 +30,10 @@ window.common = (function(global) { codeOutput.setValue(`/** * Your output will go here. - * Console.log() -type statements - * will appear in your browser\'s - * DevTools JavaScript console. + * Any console.log() -type + * statements will appear in + * your browser\'s DevTools + * JavaScript console. */`); codeOutput.setSize('100%', '100%'); diff --git a/client/less/main.less b/client/less/main.less index c1755b2c16..8ce2c43f63 100644 --- a/client/less/main.less +++ b/client/less/main.less @@ -606,10 +606,10 @@ thead { margin-left: 20px; margin-right: 20px; @media (min-width: 991px) and (max-width: 1199px) { - height: 450px; + height: 300px !important; } @media (min-width: 1200px) { - height: 300px; + height: 200px !important; } } diff --git a/common/app/routes/Jobs/components/NewJob.jsx b/common/app/routes/Jobs/components/NewJob.jsx index 3683895f71..83aba5ee5b 100644 --- a/common/app/routes/Jobs/components/NewJob.jsx +++ b/common/app/routes/Jobs/components/NewJob.jsx @@ -61,15 +61,15 @@ const checkboxClass = dedent` `; function formatValue(value, validator, type = 'string') { - const formated = getDefaults(type); - if (validator && type === 'string') { - formated.valid = validator(value); + const formatted = getDefaults(type); + if (validator && type === 'string' && typeof value === 'string') { + formatted.valid = validator(value); } if (value) { - formated.value = value; - formated.bsStyle = formated.valid ? 'success' : 'error'; + formatted.value = value; + formatted.bsStyle = formatted.valid ? 'success' : 'error'; } - return formated; + return formatted; } const normalizeOptions = { diff --git a/package.json b/package.json index 11c553c7fe..8efd96aab2 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "errorhandler": "^1.4.2", "es6-map": "~0.1.1", "eslint": "~1.10.2", - "eslint-plugin-react": "^3.7.1", + "eslint-plugin-react": "^4.1.0", "express": "^4.13.3", "express-flash": "~0.0.2", "express-session": "^1.12.1", @@ -119,7 +119,7 @@ "thundercats": "^3.1.0", "thundercats-react": "~0.5.1", "url-regex": "^3.0.0", - "validator": "^4.2.1", + "validator": "^5.0.0", "webpack": "^1.9.12", "webpack-stream": "^3.1.0", "xss-filters": "^1.2.6", diff --git a/sample.env b/sample.env new file mode 100644 index 0000000000..352d994ff5 --- /dev/null +++ b/sample.env @@ -0,0 +1,32 @@ +MONGOHQ_URL='mongodb://localhost:27017/freecodecamp' + +FACEBOOK_ID=stuff +FACEBOOK_SECRET=stuff + +GITHUB_ID=stuff +GITHUB_SECRET=stuff + +GOOGLE_ID=stuff +GOOGLE_SECRET=stuff + +LINKEDIN_ID=stuff +LINKEDIN_SECRET=stuff + +MANDRILL_PASSWORD=stuff +MANDRILL_USER=stuff + +TRELLO_KEY=stuff +TRELLO_SECRET=stuff + +TWITTER_KEY=stuff +TWITTER_SECRET=stuff +TWITTER_TOKEN=stuff +TWITTER_TOKEN_SECRET=stuff + +BLOGGER_KEY=stuff + +SESSION_SECRET=secretstuff +COOKIE_SECRET='this is a secret' + +PEER=stuff +DEBUG=true diff --git a/seed/challenges/01-front-end-development-certification/bootstrap.json b/seed/challenges/01-front-end-development-certification/bootstrap.json index 4539156219..e5c56f5850 100644 --- a/seed/challenges/01-front-end-development-certification/bootstrap.json +++ b/seed/challenges/01-front-end-development-certification/bootstrap.json @@ -943,7 +943,7 @@ "Al usar el elemento span, puedes poner varios elementos juntos, e incluso darle diferentes estilos a partes diferentes del mismo elemento.", "Anida la palabra \"love\" en tu elemento \"Things cats love\" dentro de un elemento span. Luego, asigna a ese elemento span la clase text-danger para hacer que el texto sea rojo.", "Así es como lo harías con el elemento \"Top 3 things cats hate\":", - "<p>Top 3 things cats <span class = \"text-danger\">hate</span></p>" + "<p>Top 3 things cats <span class = \"text-danger\">hate:</span></p>" ] }, { @@ -1025,7 +1025,7 @@ "challengeType": 0, "nameEs": "Crea un encabezado personalizado", "descriptionEs": [ - "Crearemos un encabezado simple para nuestra aplicación de fotos de gatos poniéndolos en la misma línea.", + "Crearemos un encabezado simple para nuestra aplicación de fotos de gatos poniendo el título y la relajante imagen del gato en la misma línea.", "Recuerda, Bootstrap usa un sistema de cuadrícula adaptativo, el cual facilita poner elementos en filas y especificar el ancho relativo de cada elemento. La mayoría de las clases de Bootstrap pueden aplicarse a un elemento div.", "Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:", "\"una", @@ -1117,6 +1117,11 @@ "nameEs": "Agrega iconos de Font Awesome a los botones", "descriptionEs": [ "Font Awesome es una librería de iconos muy conveniente. Estos iconos son imágenes vectoriales, almacenadas en formato .svg, y son tratados como si fueran fuentes. Puedes especificar su tamaño usando pixeles, y tomarán el tamaño de fuente de su elemento HTML padre.", + "Puedes añadir Font Awesome a cualquier aplicación sólo incluyendo y agregando el siguiente código al comienzo de tu HTML:", + "<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\"/>", + "En este caso, ya lo hemos agregado por tí a esta página tras bambalinas.", + "El elemento i originalmente era usado para hacer textos en itálicas, pero ahora comunmente se usa para iconos. Le agregas clases de Font Awesome al elemento i para convertirlo en un ícono, por ejemplo:", + "<i class=\"fa fa-info-circle\"></i>", "Usa Font Awesome para agregar un icono de \"pulgar arriba\" thumbs-up a tu botón de like dándole un elemento i con las clases fa y fa-thumbs-up." ] }, @@ -1866,7 +1871,7 @@ "Vamos a darle un id único a cada uno de nuestros elementos div que tienen la clase well.", "Recuerda que puedes darle a un elemento un id como el siguiente:", "<div class=\"well\" id=\"center-well\">", - "Dale al pozo de la izquireda el id left-well. Al pozo de la derecha, dale un id de right-well." + "Dale al pozo de la izquireda el id left-well. Al pozo de la derecha, dale un id right-well." ] }, { @@ -1959,7 +1964,8 @@ "nameEs": "Dale a cada elemento un ID único", "descriptionEs": [ "También quisiéramos referirnos a cada botón por su id utilizando jQuery.", - "Dale a cada uno de tus botones un id único, comenzando con target1 y terminando con target6." + "Dale a cada uno de tus botones un id único, comenzando con target1 y terminando con target6.", + "Asegúrate que target1 a target3 queden en #left-well, mientras que target4 a target6 queden en #right-well." ] }, { diff --git a/seed/challenges/01-front-end-development-certification/html5-and-css.json b/seed/challenges/01-front-end-development-certification/html5-and-css.json index 0ce9216e7a..b627213a08 100644 --- a/seed/challenges/01-front-end-development-certification/html5-and-css.json +++ b/seed/challenges/01-front-end-development-certification/html5-and-css.json @@ -32,9 +32,14 @@ "¡Bienvenido/a al primer desafío de programación de Free Code Camp!", "Puedes editar tu código en tu editor de texto, que hemos incrustado en esta página web.", "¿Ves el código en tu editor de texto que dice <h1>Hello</h1>? Ese es un elemento HTML.", - "La mayoría de los elementos HTML tienen una etiqueta de apertura y una etiqueta de cierre. Las etiquetas de apertura se ven como: <h1>. Las etiquetas de cierre se ven como: </h1>. Fíjate que la única diferencia entre las etiquetas de apertura y de cierre es que estas últimas tienen un / después de su signo de apertura (<).", - "Cada desafio tiene pruebas que puedes ejecutar en cualquier momento presionado el botón \"Ejecutar pruebas\". Una vez logres pasar todas las pruebas, podrás avanzar al siguiente desafio.", - "Para pasar la prueba en este desafio, cambia tu texto de la etiqueta h1 para que diga \"Hello World\" en lugar de \"Hello\". Entonces presiona el botón \"Ejecutar pruebas\"." + "La mayoría de los elementos HTML tienen una etiqueta de apertura y una etiqueta de cierre.", + "Las etiquetas de apertura se ven como:", + "<h1>", + " Las etiquetas de cierre se ven como:", + "</h1>", + "Fíjate que la única diferencia entre las etiquetas de apertura y de cierre es que estas últimas tienen un / después de su signo de apertura (<).", + "Cada desafío tiene pruebas que puedes ejecutar en cualquier momento presionado el botón \"Run tests\". Una vez logres pasar todas las pruebas, podrás avanzar al siguiente desafío.", + "Para pasar la prueba en este desafío, cambia tu texto de la etiqueta h1 para que diga \"Hello World\" en lugar de \"Hello\". Entonces presiona el botón \"Ejecutar pruebas\"." ], "nameDe": "Waypoint: Begrüße die HTML Elemente", "descriptionDe": [ @@ -55,7 +60,7 @@ "As tags de abertura são assim: <h1>. E as tags de fechamento são assim: </h1>.", "Note que a única diferença entre as tags de abertura e fechamento é que as de fechamento possuem uma barra (/) depois do sinal de abertura (<).", "Cada desafio possui testes que você pode executar a qualquer momento ao clicar no botão \"Executar testes\". Quando você conseguir passar em todos os testes, poderá avançar para o próximo desafio.", - "Para passar nos testes deste desafio, mude o texto do elemento h1 para que diga \"Hello World\" no lugar de \"Hello\". Depois, clique no botão \"Executar testes\"." + "Para passar nos testes deste desafio, mude o texto do elemento h1 para que diga \"Hello World\" no lugar de \"Hello\". Depois, clique no botão \"Executar testes\"." ], "type": "waypoint" }, @@ -82,7 +87,7 @@ "challengeType": 0, "nameEs": "Encabezado con el elemento h2", "descriptionEs": [ - "Durante los siguientes desafios, construiremos una aplicación HTML que lucirá como la siguiente:", + "Durante los siguientes desafíos, construiremos una aplicación HTML5 que lucirá como la siguiente:", "\"Pantallazo", "El elemento h2 que ingreses creará un elemento h2 en el sitio web.", "Este elemento le dice al navegador cómo mostrar el texto que contiene.", @@ -129,7 +134,8 @@ "nameEs": "Informa con el Elemento Párrafo", "descriptionEs": [ "Los elementos p son los elementos preferidos en los sitios web para los párrafos de texto en tamaño normal. La P es abreviatura de \"párrafo\".", - "Tú puedes crear un elemento párrafo como éste: <p>¡Soy una etiqueta p!</p>", + "Tú puedes crear un elemento párrafo de esta forma:", + "<p>¡Soy una etiqueta p!</p>", "Crea un elemento p debajo de tu elemento h2, y ponle el texto \"Hello Paragraph\"." ], "nameDe": "Waypoint: Informiere mit dem Paragraph Element", @@ -263,8 +269,8 @@ "descriptionEs": [ "Los desarrolladores web tradicionalmente usan Lorem Ipsum como texto de relleno. Se llama texto Lorem Ipsum porque esas son las primeras dos palabras de una cita famosa de Cicerón de la Roma Antigua.", "El texto Lorem Ipsum ha sido usado como texto de relleno en las imprentas desde el siglo 16, y esta tradición continúa en la web.", - "Bueno, 5 siglos es bastante. Ya que estamos construyendo una aplicación de fotos de gatos (CatPhotoApp), ¡usemos algo llamado Kitty Ipsum!", - "Remplaza el texto dentro de tu elemento p con las primeras palabras de este texto kitty ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." + "Bueno, 5 siglos es bastante. Ya que estamos construyendo una aplicación de fotos de gatos (CatPhotoApp), ¡usemos un texto llamado Kitty Ipsum!", + "Reemplaza el texto dentro de tu elemento p con las primeras palabras de este texto kitty ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ], "nameDe": "Waypoint: Fülle die Lücken mit Platzhalter-Text", "descriptionDe": [ @@ -402,13 +408,12 @@ "Con CSS, hay cientos de propiedades CSS que puedes usar para cambiar como un elemento se ve en una página web.", "Cuando ingresaste <h2 style=\"color: red\">CatPhotoApp<h2>, le estuviste dando al elemento h2 un estilo en línea", "Esa es una forma de agregar estilo a un elemento, pero una manera mejor es usando Hojas de Estilo en Cascada (Cascading Style Sheets, CSS).", - "Al principio de tu código, crea un elemento style como este: <style></style>", + "Al principio de tu código, crea un elemento style como este:", + "
<style>
</style>
", "Dentro de ese elemento style, puedes crear un selector CSS para todos los elementos h2. Por ejemplo, si quisieras que todos los elementos h2 fueran rojos, tu elemento style se vería así:", - "<style>", - "  h2 {color: red;}", - "</style>", + "
<style>
  h2 {color: red;}
</style>
", "Fíjate que es importante tener llaves de apertura y de cierre ({ y }) alrededor del estilo para cada elemento. También necesitas asegurarte que el estilo para tu elemento esté entre las etiquetas style de apertura y cierre. Finalmente, asegúrate de agregar el punto y coma al final de cada uno de los estilos de tu elemento.", - "Borra el atributo style de tu elemento h2 y a cambio escribe un elemento style CSS. Agrea el CSS necesario para hacer todos los elementos h2 de color azul." + "Borra el atributo style de tu elemento h2 y a cambio escribe un elemento style CSS. Agrega el CSS necesario para hacer todos los elementos h2 de color azul." ], "nameDe": "Waypoint: Nutze CSS Selektoren um Elemente zu gestalten", "descriptionDe": [ @@ -471,17 +476,13 @@ "descriptionEs": [ "Las clases son estilos reutilizables que pueden añadirse a elementos HTML.", "Aquí esta un ejemplo de una declaración de una clase CSS:", - "<style>", - "  .blue-text {", - "    color: blue;", - "  }", - "</style>", + "
<style>
  .blue-text {
    color: blue;
  }
</style>
", "Puedes ver que hemos creado una clase CSS llamada \"blue-text\" dentro de la etiqueta <style>", "Puedes aplicar una clase a un elemento HTML de esta manera:", "<h2 class=\"blue-text\">CatPhotoApp</h2>", "Nota que en tu elemento style CSS, las clases deben comenzar con un punto. En los elementos HTML, las declaraciones de clase, NO deben comenzar con punto. ", - "En vez de de crear un nuevo elemento style, intenta eliminar la declaración de estilo de h2 de tus elementos de estilo existentes y reemplazala por la declaración de clase .red-text.", - "Crea una clase CSS llamada red-text y aplicala a tu elemento h2" + "Dentro de tu elemento style, cambia el selector h2 por .red-text y cambia el valor del color de blue a red.", + "Dale a tu elemento h2 el atributo class con el valor de 'red-text'." ], "nameDe": "Waypoint: Nutze eine CSS Klasse um ein Element zu gestalten", "descriptionDe": [ @@ -545,9 +546,7 @@ "descriptionEs": [ "Recuerda que puedes adjuntar clases a elementos HTML utilizando class=\"tu-clase-aqui\" dentro de la etiqueta de apertura del elemento mismo.", "Recuerda que los selectores de clase CSS requieren un punto al principio, así:", - ".blue-text {", - "  color: blue;", - "}", + "
.blue-text {
  color: blue;
}
", "Pero recuerda también que las declaraciones de clase en elementos NO llevan punto:", "<h2 class=\"blue-text\">CatPhotoApp<h2>", "Aplica la clase red-text a tus elementos h2 y p" @@ -604,11 +603,11 @@ "nameEs": "Cambia el tamaño de fuente de un elemento.", "descriptionEs": [ "El tamaño de fuente es controlado por la propiedad CSS \"font-size\", como aquí:", - "h1 {", - "  font-size: 30px;", - "}", + "
h1 {
  font-size: 30px;
}
", "Crea un segundo elemento p con el siguiente texto kitty ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", - "Dentro de la misma etiqueta <style> que creamos para tu clase red-text, pon el font-size de los elementos p a 16 pixeles (16px)." + "Dentro de la misma etiqueta <style> que creamos para tu clase red-text, pon el font-size de los elementos p a 16 pixeles (16px).", + "Nota
Debido a diferencias en los navegadores, es posible que tengas que establecer el zoom en 100% para pasar las pruebas en este desafío.", + "Además, no agregues ningún atributo de clase a tu elemento p." ], "nameDe": "Waypoint: Ändere die Schriftgröße eines Elements", "descriptionDe": [ @@ -661,10 +660,8 @@ "descriptionEs": [ "Puedes establecer el tipo de letra de un elemento usando la propiedad font-family.", "Por ejemplo, si quieres establecer el tipo de letra de tu elemento h2 como Sans-serif, usa el siguiente CSS:", - "h2 {", - "  font-family: Sans-serif;", - "}", - "Haga que todos sus elementos p utilicen el tipo de letra Monospace." + "
h2 {
  font-family: Sans-serif;
}
", + "Haz que todos tus elementos p utilicen el tipo de letra Monospace." ], "nameDe": "Waypoint: Definiere die Schriftart eines Elements", "descriptionDe": [ @@ -719,12 +716,12 @@ "challengeType": 0, "nameEs": "Importar un tipo de letra de Google", "descriptionEs": [ - "Ahora, importemos y apliquemos un tipo de letra de Google (tenga en cuenta que si Google es bloqueado en su país, debera saltarse este desafio).", - "Primero, haga un llamado a Google para tomar el tipo de letra Lobster y para cargarlo en su HTML.", - "Copie la siguiente porción de código y péguela en la parte superior de su editor de texto:", + "Ahora, importemos y apliquemos un tipo de letra de Google (ten en cuenta que si Google está bloqueado en tu país, deberás saltarte este desafío).", + "Primero, haz un llamado a Google para obtener el tipo de letra Lobster y para cargarlo en tu HTML.", + "Copia la siguiente porción de código y pégala en la parte superior de tu editor de texto:", "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", - "Ahora establezca Lobster como valor de font-family en su elemento h2.", - "Aplique la familia de fuente (font-family) Lobster a su elemento h2." + "Ahora puedes establecer Lobster como valor de font-family de tu elemento h2.", + "Aplica el tipo de letra (font-family) Lobster a tu elemento h2." ], "nameDe": "Waypoint: Importiere eine Google Font", "descriptionDe": [ @@ -783,15 +780,13 @@ "assert(new RegExp(\"-->\", \"gi\").test(code), 'message: Be sure to close your comment by adding -->.');" ], "challengeType": 0, - "nameEs": "Especifique como deben degradarse los tipos de letra", + "nameEs": "Especifica cómo deben degradarse los tipos de letra", "descriptionEs": [ - "Hay diversos tipos de letra disponibles por omisión en todos los navegadores. Estos incluyend Monospace, Serif y Sans-Serif", + "Hay diversos tipos de letra disponibles por omisión en todos los navegadores. Estos incluyen Monospace, Serif y Sans-Serif", "Cuando un tipo de letra no está disponible, puedes decirle al navegador que \"degrade\" a otro tipo de letra.", "Por ejemplo, si quieres que un elemento use el tipo Helvetica, o que se degrade a Sans-Serif cuando Helvetica no esté disponible, puedes usar el siguiente estilo CSS:", - "p {", - "  font-family: Helvetica, Sans-Serif;", - "}", - "Ahora ponga como comentarios sus llamadas a tipos de letra de Google, de forma que el tipo Lobster no esté disponible. Note como se degrada al tipo Monospace." + "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "Ahora pon en forma de comentario tu llamada a tipos de letra de Google, de forma que el tipo Lobster no esté disponible. Nota cómo se degrada al tipo Monospace." ], "nameDe": "Waypoint: Spezifiziere die Rangfolge von Schriftarten", "descriptionDe": [ @@ -855,7 +850,7 @@ "descriptionEs": [ "Puedes agregar imágenes a tu sitio web mediante el uso del elemento img, y apuntar a la URL específica de una imagen utilizando el atributo src.", "Un ejemplo de esto sería:", - "<img src=\"http://www.your-image-source.com/your-image.jpg\">", + "<img src=\"http://www.origen-de-tu-imagen.com/tu-imagen.jpg\">", "Ten en cuenta que en la mayoría de los casos, los elementos img son de cierre automático.", "Prueba con esta imagen:", "https://bit.ly/fcc-relaxing-cat" @@ -874,7 +869,7 @@ "<img src=\"http://www.your-image-source.com/your-image.jpg\">", "Observe que na maior parte dos casos, os elementos img são de fechamento automático.", "Agora, tente fazer isso com essa imagem:", - "https://bit.ly/fcc-relaxing-cat" + "https://bit.ly/fcc-relaxing-cat" ], "type": "waypoint" }, @@ -919,14 +914,11 @@ "challengeType": 0, "nameEs": "Da tamaño a tus imágenes", "descriptionEs": [ - "CSS tiene una propiedad llamada width que controla el ancho de un elemento. Al igual que con los tipos de letra, usaremos px (píxeles) para especificar el ancho de la imagen. ", + "CSS tiene una propiedad llamada width que controla el ancho de un elemento. Al igual que con las fuentes de letra, usaremos px (píxeles) para especificar el ancho de la imagen. ", "Por ejemplo, si queremos crear una clase CSS llamada larger-image que le de a los elementos HTML un ancho de 500 píxeles, usaríamos:", - "<estilo>", - "  .larger-image{", - "    width: 500px;", - "  }", - "</style>", - "Crea una clase llamada smaller-image y utilízala para cambiar el tamaño de la imagen de modo que sea de sólo 100 píxeles de ancho." + "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", + "Crea una clase llamada smaller-image y utilízala para cambiar el tamaño de la imagen de modo que sea de sólo 100 píxeles de ancho.", + "Nota
Debido a diferencias en los navegadores, es posible que tengas que establecer el zoom en 100% para pasar las pruebas en este desafío." ], "nameDe": "Waypoint: Skaliere deine Bilder", "descriptionDe": [ @@ -997,16 +989,10 @@ "nameEs": "Añade bordes alrededor de tus elementos", "descriptionEs": [ "Los bordes CSS tienen propiedades como style, color y width", - "Por ejemplo, si queremos crear un borde de 5 píxeles rojo alrededor de un elemento HTML, podríamos utilizar esta clase:", - "<style>", - "  .thin-red-border {", - "    border-color: red;", - "    border-width: 5px;", - "    border-style: solid;", - "  }", - "</style>", - "Crea una clase llamada thick-green-border que ponga un borde verde de 10 píxeles de ancho con un estilo de solid en torno a un elemento HTML, y aplica esa clase a tu foto del gato. ", - "Recuerda que puedes aplicar múltiples clases a un elemento separando una clase de otra con un espacio. Haces esto dentro de tu atributo class. Por ejemplo:", + "Por ejemplo, si queremos crear un borde rojo de 5 píxeles alrededor de un elemento HTML, podríamos utilizar esta clase:", + "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", + "Crea una clase llamada thick-green-border que ponga un borde verde de 10 píxeles de ancho con un estilo solid en torno a un elemento HTML, y aplica esa clase a tu foto del gato. ", + "Recuerda que puedes aplicar clases múltiples a un elemento separando cada clase con un espacio dentro del atributo class. Por ejemplo:", "<img class=\"clase1 clase2\">" ], "nameDe": "Waypoint: Füge Rahmen zu deinen Elementen hinzu", @@ -1028,7 +1014,7 @@ "</style>", "Crie uma classe chamada thick-green-border que insira uma borda verde de 10 pixels de largura com um estilo solid ao redor de um elemento HTML, e então adicione essa classe em sua foto com o gato.", "Lembre que você pode aplicar diversas classes a um elemento separando cada uma das classes com um espaço, dentro do atributo class. Por exemplo:", - "<img class=\"clase1 clase2\">" + "<img class=\"clase1 clase2\">" ], "type": "waypoint" }, @@ -1079,20 +1065,11 @@ "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'message: Your image should have a border radius of 10px');" ], "challengeType": 0, - "nameEs": "Añade bordes alrededor de tus elementos", + "nameEs": "Agrega esquinas redondeadas usando Border Radius", "descriptionEs": [ - "Los bordes CSS tienen propiedades como style, color y width", - "Por ejemplo, si queremos crear un borde de 5 píxeles rojo alrededor de un elemento HTML, podríamos utilizar esta clase:", - "<style>", - "  .thin-red-border {", - "    border-color: red;", - "    border-width: 5px;", - "    border-style: solid;", - "  }", - "</style>", - "Crea una clase llamada thick-green-border que ponga un borde verde de 10 píxeles de ancho con un estilo de solid en torno a un elemento HTML, y aplica esa clase a tu foto del gato. ", - "Recuerda que puedes aplicar múltiples clases a un elemento separando una clase de otra con un espacio. Haces esto dentro de tu atributo class. Por ejemplo:", - "<img class=\"class1 class2\">" + "Tu foto del gato tiene actualmente esquinas angulares. Podemos redondear esas esquinas con una propiedad CSS llamada border-radius.", + "Puedes especificar border-radius usando pixeles. Dale a tu foto del gato un border-radius de 10px.", + "Nota: este desafío acepta múltiples soluciones. Por ejemplo, puedes agregar border-radius ya sea a la clase .thick-green-border o a la clase .smaller-image." ], "nameDe": "Waypoint: Füge abgerundete Ecken mit Border Radius hinzu", "descriptionDe": [ @@ -1155,11 +1132,10 @@ "assert(code.match(/50%/g), 'message: Be sure to use a percentage instead of a pixel value.');" ], "challengeType": 0, - "nameEs": "Añade esquinas redondeadas con un radio de borde", + "nameEs": "Crea imágenes circulares usando Border Radius", "descriptionEs": [ - "Tu foto del gato actualmente tiene esquinas cuadradas. Podemos redondear esas esquinas con una propiedad CSS llamada border-radius. ", - "Puedes especificar un border-radius en píxeles. Esto afectará lo redondeadas de las esquinas. Añade esta propiedad a tu clase thick-green-border y establecela a 10px. ", - "Dale a tu foto del gato un border-radius de 10px." + "Además de pixeles, puedes especificar un border-radius usando porcentajes.", + "Dale a tu foto del gato un border-radius de 50%." ], "nameDe": "Waypoint: Erstelle runde Bilder mit einem Border Radius", "descriptionDe": [ @@ -1227,12 +1203,12 @@ "challengeType": 0, "nameEs": "Enlaza páginas externas con elementos ancla", "descriptionEs": [ - "Los elementos a, también conocido como elementos ancla, se utilizan para enlazar a contenido fuera de la página actual.", + "Los elementos a, también conocidos como elementos ancla, se utilizan para enlazar a contenido fuera de la página actual.", "Aquí está un diagrama de un elemento a. En este caso, el elemento a se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ", - " \"un ", + " \"un ", "He aquí un ejemplo:", - "<p>Aquí está un <a href=\"http://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo siga.</p>", - "Crea un elemento a que se vincule a http://freecatphotoapp.com y tenga como texto de anclaje \"fotos de gatos\"." + "<p>Aquí está un <a href=\"http://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo sigas.</p>", + "Crea un elemento a que se vincule a http://freecatphotoapp.com y tenga como texto de ancla \"fotos de gatos\"." ], "nameDe": "Waypoint: Verlinke externe Seiten mit Anker Elementen", "descriptionDe": [ @@ -1311,14 +1287,14 @@ "assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/a elements has a closing tag.');" ], "challengeType": 0, - "nameEs": "Anida un elemento de anclaje dentro de un párrafo", + "nameEs": "Anida un elemento de ancla dentro de un párrafo", "descriptionEs": [ "Una vez más, aquí está un diagrama de un elemento a para tu referencia:", "\"un", "He aquí un ejemplo:", - "<p>Aquí un <a href=\"http://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo sigas.</p>", - "anidamiento significa poner un elemento dentro de otro elemento.", - "Ahora anida el elemento a existente dentro de un nuevo elemento p para que el párrafo que lo rodee diga \"View more cat photos\", pero donde sólo \"cat photos\" sea un enlace, y el resto sea texto plano ." + "<p>Aquí hay un <a href=\"http://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo sigas.</p>", + "Anidamiento simplemente significa poner un elemento dentro de otro elemento.", + "Ahora anida el elemento a existente dentro de un nuevo elemento p (justo después del elemento h2 que ya tienes) de tal forma que el párrafo que lo rodee diga \"View more cat photos\", pero que sólo \"cat photos\" sea un enlace, y el resto sea texto plano ." ], "nameDe": "Waypoint Umschließe ein Anker Element mit einem Paragraphen", "descriptionDe": [ @@ -1389,7 +1365,7 @@ "nameEs": "Haz vínculos muertos utilizando el símbolo de numero", "descriptionEs": [ "A veces quieres agregar elementos a a tu sitio web antes de saber qué enlazarán.", - "Esto también es útil cuando estás cambiando el comportamiento de un enlace usando jQuery, que aprenderemos más adelante.", + "Esto también es útil cuando estás cambiando el comportamiento de un enlace usando jQuery, lo cual aprenderemos más adelante.", "Reemplaza el atributo href de tu elemento a con un #, también conocido como un símbolo de número o de hash, para convertirlo en un vínculo muerto." ], "nameDe": "Waypoint: Erstelle tote Links mit dem Hash Symbol", @@ -1462,7 +1438,7 @@ "challengeType": 0, "nameEs": "Convierte una imagen en un vínculo", "descriptionEs": [ - "Puedes convertir elementos en enlaces al anidarlos con un elemento a.", + "Puedes convertir elementos en enlaces al anidarlos dentro de un elemento a.", "Anida tu imagen dentro de un elemento a. He aquí un ejemplo: ", "<a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a>", "Recuerda usar # como atributo href de tu elemento a con el fin de convertirlo en un vínculo muerto.", @@ -1538,10 +1514,10 @@ "challengeType": 0, "nameEs": "Agrega texto alternativo a una imagen para dar Accesibilidad", "descriptionEs": [ - "Los atributos alt también conocidos como texto alternativo, son lo que se presentarán en caso que el navegador no puede mostrar la imagen. Los atributos alt también son importantes para los usuarios ciegos o con deficiencia visual para entender lo que una imagen retrata. Y los motores de búsqueda también examinan los atributos alt. ", + "Los atributos alt también conocidos como texto alternativo, son lo que se presentarán en caso que el navegador no pueda mostrar la imagen. Los atributos alt también son importantes para los usuarios ciegos o con deficiencia visual para entender lo que una imagen retrata. Los motores de búsqueda también examinan los atributos alt. ", "En resumen, ¡cada imagen debe tener un atributo alt!", "Puedes agregar un atributo alt justo en el elemento img así:", - "<img src=\"www.your-image-source.com/your-image.jpg\" alt=\"tu texto alternativo\">", + "<img src=\"www.fuente-de-tu-imagen.com/tu-imagen.jpg\" alt=\"tu texto alternativo\">", "Añade un atributo alt con el texto A cute orange cat lying on its back a nuestra foto del gato." ], "nameDe": "Waypoint: Füge Alt Text für mehr Barrierefreiheit hinzu", @@ -1622,10 +1598,7 @@ "HTML tiene un elemento especial para la creación de listas no ordenadas, o listas con estilo viñeta.", "Las listas no ordenadas comienzan con un elemento <ul>. A continuación contienen una cantidad de elementos <li>.", "Por ejemplo: ", - "<ul>", - "  <li>leche</li>", - "  <li>queso</li>", - "</ul>", + "
<ul>
  <li>leche</li>
  <li>queso</li>
</ul>
", "creará una lista con viñetas y con elementos \"leche\" y \"queso\".", "Elimina los dos últimos elementos p y en la parte inferior de la página crea una lista no ordenada de tres cosas que los gatos aman." ], @@ -1718,10 +1691,7 @@ "HTML tiene un elemento especial para la creación de listas ordenadas, o listas de estilo numerado.", "Las listas ordenadas comienzan con un elemento <ol>. Luego contienen un número de elementos <li>.", "Por ejemplo:", - "<ol>", - "  <li>Garfield</li>", - "  <li>Sylvester</li>", - "</ol>", + "
<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>
", "creará una lista numerada con \"Garfield\" y \"Sylvester\".", "Crea una lista ordenada de los 3 cosas que más odian los gatos." ], @@ -1811,7 +1781,7 @@ "nameEs": "Crea un campo de texto", "descriptionEs": [ "Ahora vamos a crear un formulario web.", - "Los campos de texto son una manera conveniente de obtener retroalimentación de su usuario.", + "Los campos de texto son una manera conveniente de obtener retroalimentación de tu usuario.", "Puedes crear uno como este:", "<input type=\"text\">", "Ten en cuenta que los elementos input son de cierre automático.", @@ -1893,7 +1863,8 @@ ], "tests": [ "assert($(\"input[placeholder]\").length > 0, 'message: Add a placeholder attribute text input element.');", - "assert($(\"input\") && $(\"input\").attr(\"placeholder\") && $(\"input\").attr(\"placeholder\").match(/cat\\s+photo\\s+URL/gi), 'message: Set the value of your placeholder attribute to \"cat photo URL\".');" + "assert($(\"input\") && $(\"input\").attr(\"placeholder\") && $(\"input\").attr(\"placeholder\").match(/cat\\s+photo\\s+URL/gi), 'message: Set the value of your placeholder attribute to \"cat photo URL\".');", + "assert($(\"input[type=text]\").length > 0 && code.match(/URL\\s*[\"\\']\\s*\\/?>/gi), 'message: The finished input element should have valid syntax.');" ], "challengeType": 0, "nameEs": "Agrega un texto de relleno a un campo de texto", @@ -1998,7 +1969,7 @@ "descriptionPtBR": [ "É possível construir formulários web que realmente enviem dados a um servidor utilizando nada além de HTML puro. Você pode fazer isso especificando uma ação em seu elemento form.", "Por exemplo:", - "<form action=\"/url-para-onde-você-quer-enviar-os-dados-do-formulário\"></form>", + "<form action=\"/url-para-onde-você-quer-enviar-os-dados-do-formulário\"></form>", "Aninhe seu campo de texto em um elemento form. Adicione o atributo action=\"/submit-cat-photo\" para este elemento de formulário." ], "type": "waypoint" @@ -2065,7 +2036,7 @@ "tests": [ "assert($(\"form\").children(\"button\").length > 0, 'message: Your form should have a button inside it.');", "assert($(\"button\").attr(\"type\") === \"submit\", 'message: Your submit button should have the attribute type set to submit.');", - "assert($(\"button\").text().match(/submit/gi), 'message: Your submit button should have the text \"Submit\".');", + "assert($(\"button\").text().match(/^\\s*submit\\s*$/gi), 'message: Your submit button should only have the text \"Submit\".');", "assert(code.match(/<\\/button>/g) && code.match(/