gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'staging' into carolinaknoll-add/PtBR-translation-html5-and-css

Browse Source 
Conflicts:
	seed/challenges/01-front-end-development-certification/html5-and-css.json
This commit is contained in:
Quincy Larson
2016-02-26 16:07:45 -08:00
parent 525d91f4b7 2f7aa1d2a0
commit 4413e9b5af
16 changed files with 493 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
CONTRIBUTING.md
View File

@ -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`.

7
client/commonFramework/output-display.js
View File

@ -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%');

4
client/less/main.less
View File

@ -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;
}
}

12
common/app/routes/Jobs/components/NewJob.jsx
View File

@ -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 = {

4
package.json
View File

@ -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",

32
sample.env Normal file
View File

@ -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

14
seed/challenges/01-front-end-development-certification/bootstrap.json
View File

@ -943,7 +943,7 @@
"Al usar el elemento <code>span</code>, 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 <code>span</code>. Luego, asigna a ese elemento <code>span</code> la clase <code>text-danger</code> para hacer que el texto sea rojo.",
"Así es como lo harías con el elemento \"Top 3 things cats hate\":",
"<code>&#60;p&#62;Top 3 things cats &#60;span class = \"text-danger\"&#62;hate&#60;/span&#62;&#60;/p&#62;</code>"
"<code>&#60;p&#62;Top 3 things cats &#60;span class = \"text-danger\"&#62;hate:&#60;/span&#62;&#60;/p&#62;</code>"
]
},
{
@ -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 <code>div</code>.",
"Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:",
"<a href=\"http://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" title=\"Pulsa para agrandar\" alt=\"una imagen que muestra el sistema de cuadrícula de Bootstrap\"></a>",
@ -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 <code>.svg</code>, 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:",
"<code>&#60;link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\"/&#62;</code>",
"En este caso, ya lo hemos agregado por tí a esta página tras bambalinas.",
"El elemento <code>i</code> originalmente era usado para hacer textos en itálicas, pero ahora comunmente se usa para iconos. Le agregas clases de Font Awesome al elemento <code>i</code> para convertirlo en un ícono, por ejemplo:",
"<code>&lt;i class=\"fa fa-info-circle\"&gt;&lt;/i&gt;</code>",
"Usa Font Awesome para agregar un icono de \"pulgar arriba\" <code>thumbs-up</code> a tu botón de like dándole un elemento <code>i</code> con las clases <code>fa</code> y <code>fa-thumbs-up</code>."
]
},
@ -1866,7 +1871,7 @@
"Vamos a darle un id único a cada uno de nuestros elementos <code>div</code> que tienen la clase <code>well</code>.",
"Recuerda que puedes darle a un elemento un id como el siguiente:",
"<code>&#60;div class=\"well\" id=\"center-well\"&#62;</code>",
"Dale al pozo de la izquireda el id <code>left-well</code>. Al pozo de la derecha, dale un <code>id</code> de <code>right-well</code>."
"Dale al pozo de la izquireda el id <code>left-well</code>. Al pozo de la derecha, dale un id <code>right-well</code>."
]
},
{
@ -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 <code>target1</code> y terminando con <code>target6</code>."
"Dale a cada uno de tus botones un id único, comenzando con <code>target1</code> y terminando con <code>target6</code>.",
"Asegúrate que <code>target1</code> a <code>target3</code> queden en <code>#left-well</code>, mientras que <code>target4</code> a <code>target6</code> queden en <code>#right-well</code>."
]
},
{

258
seed/challenges/01-front-end-development-certification/html5-and-css.json
View File

@ -32,9 +32,14 @@
"¡Bienvenido/a al primer desafío de programación de Free Code Camp!",
"Puedes editar tu <code>código</code> en tu <code>editor de texto</code>, que hemos incrustado en esta página web.",
"¿Ves el código en tu editor de texto que dice <code>&#60;h1&#62;Hello&#60;/h1&#62;</code>? Ese es un <code>elemento</code> HTML.",
"La mayoría de los elementos HTML tienen una <code>etiqueta de apertura</code> y una <code>etiqueta de cierre</code>. Las etiquetas de apertura se ven como: <code>&#60;h1&#62;</code>. Las etiquetas de cierre se ven como: <code>&#60;/h1&#62;</code>. 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 <code>h1</code> 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 <code>etiqueta de apertura</code> y una <code>etiqueta de cierre</code>.",
"Las etiquetas de apertura se ven como:",
"<code>&#60;h1&#62;</code>",
" Las etiquetas de cierre se ven como:",
"<code>&#60;/h1&#62;</code>",
"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 <code>h1</code> 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: <code>&#60;h1&#62;</code>. E as tags de fechamento são assim: <code>&#60;/h1&#62;</code>.",
"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 <code>h1</code> 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 <code>h1</code> 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:",
"<a href=\"http://i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/jOc1JF1.png\" title=\"Pulsa para agrandar\" alt=\"Pantallazo de la aplicación Cat Photo terminada\"></a>",
"El elemento <code>h2</code> que ingreses creará un elemento <code>h2</code> 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 <code>p</code> 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: <code>&#60;p&#62;¡Soy una etiqueta p!&#60;/p&#62;</code>",
"Tú puedes crear un elemento párrafo de esta forma:",
"<code>&#60;p&#62;¡Soy una etiqueta p!&#60;/p&#62;</code>",
"Crea un elemento <code>p</code> debajo de tu elemento <code>h2</code>, y ponle el texto \"Hello Paragraph\"."
],
"nameDe": "Waypoint: Informiere mit dem Paragraph Element",
@ -263,8 +269,8 @@
"descriptionEs": [
"Los desarrolladores web tradicionalmente usan <code>Lorem Ipsum</code> 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 <code>Kitty Ipsum</code>!",
"Remplaza el texto dentro de tu elemento <code>p</code> con las primeras palabras de este texto kitty ipsum: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
"Bueno, 5 siglos es bastante. Ya que estamos construyendo una aplicación de fotos de gatos (CatPhotoApp), ¡usemos un texto llamado <code>Kitty Ipsum</code>!",
"Reemplaza el texto dentro de tu elemento <code>p</code> con las primeras palabras de este texto kitty ipsum: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
],
"nameDe": "Waypoint: Fülle die Lücken mit Platzhalter-Text",
"descriptionDe": [
@ -402,13 +408,12 @@
"Con CSS, hay cientos de <code>propiedades CSS</code> que puedes usar para cambiar como un elemento se ve en una página web.",
"Cuando ingresaste <code>&#60;h2 style=\"color: red\"&#62;CatPhotoApp&#60;h2&#62;</code>, le estuviste dando al elemento <code>h2</code> un <code>estilo en línea</code>",
"Esa es una forma de agregar estilo a un elemento, pero una manera mejor es usando <code>Hojas de Estilo en Cascada (Cascading Style Sheets, CSS)</code>.",
"Al principio de tu código, crea un elemento <code>style</code> como este: <code>&#60;style&#62;&#60;/style&#62;</code>",
"Al principio de tu código, crea un elemento <code>style</code> como este:",
"<blockquote>&#60;style&#62;<br>&#60;/style&#62;</blockquote>",
"Dentro de ese elemento style, puedes crear un <code>selector CSS</code> para todos los elementos <code>h2</code>. Por ejemplo, si quisieras que todos los elementos <code>h2</code> fueran rojos, tu elemento style se vería así:",
"<code>&#60;style&#62;</code>",
"&nbsp;&nbsp;<code>h2 {color: red;}</code>",
"<code>&#60;/style&#62;</code>",
"<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;h2 {color: red;}<br>&#60;/style&#62;</blockquote>",
"Fíjate que es importante tener llaves de apertura y de cierre (<code>{</code> y <code>}</code>) 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 <code>style</code> de tu elemento <code>h2</code> y a cambio escribe un elemento <code>style</code> CSS. Agrea el CSS necesario para hacer todos los elementos <code>h2</code> de color azul."
"Borra el atributo <code>style</code> de tu elemento <code>h2</code> y a cambio escribe un elemento <code>style</code> CSS. Agrega el CSS necesario para hacer todos los elementos <code>h2</code> 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:",
"<code>&#60;style&#62;</code>",
"<code>&nbsp;&nbsp;.blue-text {</code>",
"<code>&nbsp;&nbsp;&nbsp;&nbsp;color: blue;</code>",
"<code>&nbsp;&nbsp;}</code>",
"<code>&#60;/style&#62;</code>",
"<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.blue-text {<br>&nbsp;&nbsp;&nbsp;&nbsp;color: blue;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
"Puedes ver que hemos creado una clase CSS llamada \"blue-text\" dentro de la etiqueta <code>&#60;style&#62;</code>",
"Puedes aplicar una clase a un elemento HTML de esta manera:",
"<code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;/h2&#62;</code>",
"Nota que en tu elemento <code>style</code> 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 <code>style</code>, intenta eliminar la declaración de estilo de <code>h2</code> de tus elementos de estilo existentes y reemplazala por la declaración de clase <code>.red-text</code>.",
"Crea una clase CSS llamada <code>red-text</code> y aplicala a tu elemento <code>h2</code>"
"Dentro de tu elemento <code>style</code>, cambia el selector <code>h2</code> por <code>.red-text</code> y cambia el valor del color de <code>blue</code> a <code>red</code>.",
"Dale a tu elemento <code>h2</code> el atributo <code>class</code> con el valor de <code>'red-text'</code>."
],
"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 <code>class=\"tu-clase-aqui\"</code> dentro de la etiqueta de apertura del elemento mismo.",
"Recuerda que los selectores de clase CSS requieren un punto al principio, así:",
"<code>.blue-text {</code>",
"<code>&nbsp;&nbsp;color: blue;</code>",
"<code>}</code>",
"<blockquote>.blue-text {<br>&nbsp;&nbsp;color: blue;<br>}</blockquote>",
"Pero recuerda también que las declaraciones de clase en elementos NO llevan punto:",
"<code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;h2&#62;</code>",
"Aplica la clase <code>red-text</code> a tus elementos <code>h2</code> y <code>p</code>"
@ -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í:",
"<code>h1 {</code>",
"<code>&nbsp;&nbsp;font-size: 30px;</code>",
"<code>}</code>",
"<blockquote>h1 {<br>&nbsp;&nbsp;font-size: 30px;<br>}</blockquote>",
"Crea un segundo elemento <code>p</code> con el siguiente texto kitty ipsum: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
"Dentro de la misma etiqueta <code>&#60;style&#62;</code> que creamos para tu clase <code>red-text</code>, pon el <code>font-size</code> de los elementos <code>p</code> a 16 pixeles (<code>16px</code>)."
"Dentro de la misma etiqueta <code>&#60;style&#62;</code> que creamos para tu clase <code>red-text</code>, pon el <code>font-size</code> de los elementos <code>p</code> a 16 pixeles (<code>16px</code>).",
"<strong>Nota</strong><br>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 <code>p</code>."
],
"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 <code>font-family</code>.",
"Por ejemplo, si quieres establecer el tipo de letra de tu elemento <code>h2</code> como <code>Sans-serif</code>, usa el siguiente CSS:",
"<code>h2 {</code>",
"<code>&nbsp;&nbsp;font-family: Sans-serif;</code>",
"<code>}</code>",
"Haga que todos sus elementos <code>p</code> utilicen el tipo de letra <code>Monospace</code>."
"<blockquote>h2 {<br>&nbsp;&nbsp;font-family: Sans-serif;<br>}</blockquote>",
"Haz que todos tus elementos <code>p</code> utilicen el tipo de letra <code>Monospace</code>."
],
"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 <code>llamado</code> a Google para tomar el tipo de letra <code>Lobster</code> 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 <code>llamado</code> a Google para obtener el tipo de letra <code>Lobster</code> 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:",
"<code>&#60;link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>",
"Ahora establezca <code>Lobster</code> como valor de font-family en su elemento <code>h2</code>.",
"Aplique la familia de fuente (<code>font-family</code>) <code>Lobster</code> a su elemento <code>h2</code>."
"Ahora puedes establecer <code>Lobster</code> como valor de font-family de tu elemento <code>h2</code>.",
"Aplica el tipo de letra (<code>font-family</code>) <code>Lobster</code> a tu elemento <code>h2</code>."
],
"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 <code>--&#62;</code>.');"
],
"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 <code>Monospace</code>, <code>Serif</code> y <code>Sans-Serif</code>",
"Hay diversos tipos de letra disponibles por omisión en todos los navegadores. Estos incluyen <code>Monospace</code>, <code>Serif</code> y <code>Sans-Serif</code>",
"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 <code>Helvetica</code>, o que se degrade a <code>Sans-Serif</code> cuando <code>Helvetica</code> no esté disponible, puedes usar el siguiente estilo CSS:",
"<code>p {</code>",
"<code>&nbsp;&nbsp;font-family: Helvetica, Sans-Serif;</code>",
"<code>}</code>",
"Ahora ponga como comentarios sus llamadas a tipos de letra de Google, de forma que el tipo <code>Lobster</code> no esté disponible. Note como se degrada al tipo <code>Monospace</code>."
"<blockquote>p {<br>&nbsp;&nbsp;font-family: Helvetica, Sans-Serif;<br>}</blockquote>",
"Ahora pon en forma de comentario tu llamada a tipos de letra de Google, de forma que el tipo <code>Lobster</code> no esté disponible. Nota cómo se degrada al tipo <code>Monospace</code>."
],
"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 <code>img</code>, y apuntar a la URL específica de una imagen utilizando el atributo <code>src</code>.",
"Un ejemplo de esto sería:",
"<code>&#60img src=\"http://www.your-image-source.com/your-image.jpg\"&#62</code>",
"<code>&#60img src=\"http://www.origen-de-tu-imagen.com/tu-imagen.jpg\"&#62</code>",
"Ten en cuenta que en la mayoría de los casos, los elementos <code>img</code> son de cierre automático.",
"Prueba con esta imagen:",
"<code>https://bit.ly/fcc-relaxing-cat</code>"
@ -874,7 +869,7 @@
"<code>&#60img src=\"http://www.your-image-source.com/your-image.jpg\"&#62</code>",
"Observe que na maior parte dos casos, os elementos <code>img</code> são de fechamento automático.",
"Agora, tente fazer isso com essa imagem:",
"<code>https://bit.ly/fcc-relaxing-cat</code>"
"<code>https://bit.ly/fcc-relaxing-cat</code>"
],
"type": "waypoint"
},
@ -919,14 +914,11 @@
"challengeType": 0,
"nameEs": "Da tamaño a tus imágenes",
"descriptionEs": [
"CSS tiene una propiedad llamada <code>width</code> que controla el ancho de un elemento. Al igual que con los tipos de letra, usaremos <code>px</code> (píxeles) para especificar el ancho de la imagen. ",
"CSS tiene una propiedad llamada <code>width</code> que controla el ancho de un elemento. Al igual que con las fuentes de letra, usaremos <code>px</code> (píxeles) para especificar el ancho de la imagen. ",
"Por ejemplo, si queremos crear una clase CSS llamada <code>larger-image</code> que le de a los elementos HTML un ancho de 500 píxeles, usaríamos:",
"<code>&#60;estilo&#62;</code>",
"<code>&nbsp;&nbsp;.larger-image{</code>",
"<code>&nbsp;&nbsp;&nbsp;&nbsp;width: 500px;</code>",
"<code>&nbsp;&nbsp;}</code>",
"<code>&#60;/style&#62;</code>",
"Crea una clase llamada <code>smaller-image</code> y utilízala para cambiar el tamaño de la imagen de modo que sea de sólo 100 píxeles de ancho."
"<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.larger-image {<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 500px;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
"Crea una clase llamada <code>smaller-image</code> y utilízala para cambiar el tamaño de la imagen de modo que sea de sólo 100 píxeles de ancho.",
"<strong>Nota</strong><br>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 <code>style</code>, <code>color</code> y <code>width</code>",
"Por ejemplo, si queremos crear un borde de 5 píxeles rojo alrededor de un elemento HTML, podríamos utilizar esta clase:",
"<code>&#60;style&#62;</code>",
"<code>&nbsp;&nbsp;.thin-red-border {</code>",
"<code>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;</code>",
"<code>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;</code>",
"<code>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;</code>",
"<code>&nbsp;&nbsp;}</code>",
"<code>&#60;/style&#62;</code>",
"Crea una clase llamada <code>thick-green-border</code> que ponga un borde verde de 10 píxeles de ancho con un estilo de <code>solid</code> 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 <code>class</code>. Por ejemplo:",
"Por ejemplo, si queremos crear un borde rojo de 5 píxeles alrededor de un elemento HTML, podríamos utilizar esta clase:",
"<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.thin-red-border {<br>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
"Crea una clase llamada <code>thick-green-border</code> que ponga un borde verde de 10 píxeles de ancho con un estilo <code>solid</code> 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 <code>class</code>. Por ejemplo:",
"<code>&lt;img class=\"clase1 clase2\"&gt;</code>"
],
"nameDe": "Waypoint: Füge Rahmen zu deinen Elementen hinzu",
@ -1028,7 +1014,7 @@
"<code>&#60;/style&#62;</code>",
"Crie uma classe chamada <code>thick-green-border</code> que insira uma borda verde de 10 pixels de largura com um estilo <code>solid</code> 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 <code>class</code>. Por exemplo:",
"<code>&lt;img class=\"clase1 clase2\"&gt;</code>"
"<code>&lt;img class=\"clase1 clase2\"&gt;</code>"
],
"type": "waypoint"
},
@ -1079,20 +1065,11 @@
"assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'message: Your image should have a border radius of <code>10px</code>');"
],
"challengeType": 0,
"nameEs": "Añade bordes alrededor de tus elementos",
"nameEs": "Agrega esquinas redondeadas usando Border Radius",
"descriptionEs": [
"Los bordes CSS tienen propiedades como <code>style</code>, <code>color</code> y <code>width</code>",
"Por ejemplo, si queremos crear un borde de 5 píxeles rojo alrededor de un elemento HTML, podríamos utilizar esta clase:",
"<code>&#60;style&#62;</code>",
"<code>&nbsp;&nbsp;.thin-red-border {</code>",
"<code>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;</code>",
"<code>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;</code>",
"<code>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;</code>",
"<code>&nbsp;&nbsp;}</code>",
"<code>&#60;/style&#62;</code>",
"Crea una clase llamada <code>thick-green-border</code> que ponga un borde verde de 10 píxeles de ancho con un estilo de <code>solid</code> 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 <code>class</code>. Por ejemplo:",
"<code>&lt;img class=\"class1 class2\"&gt;</code>"
"Tu foto del gato tiene actualmente esquinas angulares. Podemos redondear esas esquinas con una propiedad CSS llamada <code>border-radius</code>.",
"Puedes especificar <code>border-radius</code> usando pixeles. Dale a tu foto del gato un <code>border-radius</code> de <code>10px</code>.",
"Nota: este desafío acepta múltiples soluciones. Por ejemplo, puedes agregar <code>border-radius</code> ya sea a la clase <code>.thick-green-border</code> o a la clase <code>.smaller-image</code>."
],
"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 <code>border-radius</code>. ",
"Puedes especificar un <code>border-radius</code> en píxeles. Esto afectará lo redondeadas de las esquinas. Añade esta propiedad a tu clase <code>thick-green-border</code> y establecela a <code>10px</code>. ",
"Dale a tu foto del gato un <code>border-radius</code> de <code>10px</code>."
"Además de pixeles, puedes especificar un <code>border-radius</code> usando porcentajes.",
"Dale a tu foto del gato un <code>border-radius</code> de <code>50%</code>."
],
"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 <code>a</code>, también conocido como elementos <code>ancla</code>, se utilizan para enlazar a contenido fuera de la página actual.",
"Los elementos <code>a</code>, también conocidos como elementos <code>ancla</code>, se utilizan para enlazar a contenido fuera de la página actual.",
"Aquí está un diagrama de un elemento <code>a</code>. En este caso, el elemento <code>a</code> se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ",
"<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"> <img class=\"img-responsive\" title=\"Haga clic para ampliar\" alt=\"un diagrama de cómo las etiquetas de anclaje se componen con el mismo texto, como en la siguiente línea\" src=\"http://i.imgur.com/hviuZwe.png\"></a> ",
"<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"> <img class=\"img-responsive\" title=\"Haz clic para ampliar\" alt=\"un diagrama de cómo las etiquetas de ancla se componen con el mismo texto, como en la siguiente línea\" src=\"http://i.imgur.com/hviuZwe.png\"></a> ",
"He aquí un ejemplo:",
"<code>&#60;p&#62;Aquí está un &#60;a href=\"http://freecodecamp.com\"&#62; enlace a Free Code Camp&#60;/a&#62; para que lo siga.&#60;/p&#62;</code>",
"Crea un elemento <code>a</code> que se vincule a <code>http://freecatphotoapp.com</code> y tenga como <code>texto de anclaje</code> \"fotos de gatos\"."
"<code>&#60;p&#62;Aquí está un &#60;a href=\"http://freecodecamp.com\"&#62; enlace a Free Code Camp&#60;/a&#62; para que lo sigas.&#60;/p&#62;</code>",
"Crea un elemento <code>a</code> que se vincule a <code>http://freecatphotoapp.com</code> y tenga como <code>texto de ancla</code> \"fotos de gatos\"."
],
"nameDe": "Waypoint: Verlinke externe Seiten mit Anker Elementen",
"descriptionDe": [
@ -1311,14 +1287,14 @@
"assert(code.match(/<\\/a>/g) && code.match(/<a/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'message: Make sure each of your <code>a</code> 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 <code>a</code> para tu referencia:",
"<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Pulse para ampliar\" alt=\"un diagrama de como se componen las etiquetas de anclaje con el texto como en la siguiente línea\" src=\"http://i.imgur.com/hviuZwe.png\"></a>",
"He aquí un ejemplo:",
"<code>&#60;p&#62;Aquí un &#60;a href=\"http://freecodecamp.com\"&#62; enlace a Free Code Camp&#60;/a&#62; para que lo sigas.&#60;/p&#62;</code>",
"<code>anidamiento</code> significa poner un elemento dentro de otro elemento.",
"Ahora anida el elemento <code>a</code> existente dentro de un nuevo elemento <code>p</code> 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 ."
"<code>&#60;p&#62;Aquí hay un &#60;a href=\"http://freecodecamp.com\"&#62; enlace a Free Code Camp&#60;/a&#62; para que lo sigas.&#60;/p&#62;</code>",
"<code>Anidamiento</code> simplemente significa poner un elemento dentro de otro elemento.",
"Ahora anida el elemento <code>a</code> existente dentro de un nuevo elemento <code>p</code> (justo después del elemento <code>h2</code> 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 <code>a</code> 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 <code>jQuery</code>, que aprenderemos más adelante.",
"Esto también es útil cuando estás cambiando el comportamiento de un enlace usando <code>jQuery</code>, lo cual aprenderemos más adelante.",
"Reemplaza el atributo <code>href</code> de tu elemento <code>a</code> con un <code>#</code>, también conocido como un símbolo de número o de <em>hash</em>, 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 <code>a</code>.",
"Puedes convertir elementos en enlaces al anidarlos dentro de un elemento <code>a</code>.",
"Anida tu imagen dentro de un elemento <code>a</code>. He aquí un ejemplo: ",
"<code>&#60;a href=\"#\"&#62;&#60;img src=\"http://bit.ly/fcc-running-cats\"/&#62;&#60;/a&#62;</code>",
"Recuerda usar <code>#</code> como atributo <code>href</code> de tu elemento <code>a</code> 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 <code>alt</code> también conocidos como <code>texto alternativo</code>, son lo que se presentarán en caso que el navegador no puede mostrar la imagen. Los atributos <code>alt</code> 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 <code>alt</code>. ",
"Los atributos <code>alt</code> también conocidos como <code>texto alternativo</code>, son lo que se presentarán en caso que el navegador no pueda mostrar la imagen. Los atributos <code>alt</code> 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 <code>alt</code>. ",
"En resumen, ¡cada imagen debe tener un atributo <code>alt</code>!",
"Puedes agregar un atributo <code>alt</code> justo en el elemento <code>img</code> así:",
"<code>&#60img src=\"www.your-image-source.com/your-image.jpg\" alt=\"tu texto alternativo\"&#62</code>",
"<code>&#60img src=\"www.fuente-de-tu-imagen.com/tu-imagen.jpg\" alt=\"tu texto alternativo\"&#62</code>",
"Añade un atributo <code>alt</code> con el texto <code>A cute orange cat lying on its back</code> 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 <code>listas no ordenadas</code>, o listas con estilo viñeta.",
"Las listas no ordenadas comienzan con un elemento <code>&#60;ul&#62;</code>. A continuación contienen una cantidad de elementos <code>&#60;li&#62;.</code>",
"Por ejemplo: ",
"<code>&#60;ul&#62;</code>",
"&nbsp;&nbsp;<code>&#60;li&#62;leche&#60;/li&#62;</code>",
"&nbsp;&nbsp;<code>&#60;li&#62;queso&#60;/li&#62;</code>",
"<code>&#60;/ul&#62;</code>",
"<blockquote>&#60;ul&#62;<br>&nbsp;&nbsp;&#60;li&#62;leche&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;queso&#60;/li&#62;<br>&#60;/ul&#62;</blockquote>",
"creará una lista con viñetas y con elementos \"leche\" y \"queso\".",
"Elimina los dos últimos elementos <code>p</code> 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 <code>listas ordenadas</code>, o listas de estilo numerado.",
"Las listas ordenadas comienzan con un elemento <code>&#60;ol&#62;</code>. Luego contienen un número de elementos <code>&#60;li&#62;.</code>",
"Por ejemplo:",
"<code>&#60;ol&#62;</code>",
"&nbsp;&nbsp;<code>&#60;li&#62;Garfield&#60;/li&#62;</code>",
"&nbsp;&nbsp;<code>&#60;li&#62;Sylvester&#60;/li&#62;</code>",
"<code>&#60;/ol&#62;</code>",
"<blockquote>&#60;ol&#62;<br>&nbsp;&nbsp;&#60;li&#62;Garfield&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;Sylvester&#60;/li&#62;<br>&#60;/ol&#62;</blockquote>",
"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:",
"<code>&#60;input type=\"text\"&#62;</code>",
"Ten en cuenta que los elementos <code>input</code> son de cierre automático.",
@ -1893,7 +1863,8 @@
],
"tests": [
"assert($(\"input[placeholder]\").length > 0, 'message: Add a <code>placeholder</code> attribute text <code>input</code> 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 <code>input</code> 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 <code>form</code>.",
"Por exemplo:",
"<code>&#60;form action=\"/url-para-onde-você-quer-enviar-os-dados-do-formulário\"&#62;&#60;/form&#62;</code>",
"<code>&#60;form action=\"/url-para-onde-você-quer-enviar-os-dados-do-formulário\"&#62;&#60;/form&#62;</code>",
"Aninhe seu campo de texto em um elemento <code>form</code>. Adicione o atributo <code>action=\"/submit-cat-photo\"</code> 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 <code>type</code> set to <code>submit</code>.');",
"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(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure your <code>button</code> element has a closing tag.');"
],
"challengeType": 0,
@ -2161,7 +2132,8 @@
"Puedes especificar un campo obligatorio en un formulario para que tu usuario no pueda enviar el formulario hasta que lo haya llenado.",
"Por ejemplo, si quieres requerir obligatoriamente un campo de texto, puedes agregar la palabra <code>required</code> dentro de tu elemento <code>input</code>, usarías: <code>&#60;input type=\"text\" required&#62;</code> ",
"Haz de tu campo de texto un campo obligatorio, de manera que tu usuario no pueda enviar el formulario sin completar este campo.",
"A continuación, intenta enviar el formulario sin ingresar texto alguno. ¿Ves cómo tu formulario HTML5 te notifica que el campo es obligatorio?"
"Luego, intenta enviar el formulario sin ingresar texto alguno. ¿Ves cómo tu formulario HTML5 te notifica que el campo es obligatorio?",
"Nota: Este campo no funciona en Safari."
],
"nameDe": "Waypoint: Nutze HTML5 um ein Pflichtfeld zu erstellen",
"descriptionDe": [
@ -2252,12 +2224,12 @@
"challengeType": 0,
"nameEs": "Crea un Conjunto de botones de radio",
"descriptionEs": [
"Puedes usar <code>botones de radio</code> para las preguntas en las que desea que el usuario sólo le de una de varias posibles respuestas.",
"Puedes usar <code>botones de radio</code> para las preguntas en las que deseas que el usuario sólo pueda dar una respuesta.",
"Los botones de radio son un tipo del elemento <code>input</code>",
"Cada uno de los botones de radio debe estar anidado dentro de su propio elemento <code>label</code>.",
"Todos los botones de radio relacionados deben tener el mismo atributo <code>name</code>.",
"He aquí un ejemplo de un botón de radio:",
"<code>&#60;label&#62;&#60;input type=\"radio\" name=\"indoor-outdoor\"&#62; Indoor&#60;/label&#62;</code>",
"<code>&#60;label&#62;&#60;input type=\"radio\" name=\"dentro-fuera\"&#62; Dentro&#60;/label&#62;</code>",
"Agrega un par de botones de radio a tu formulario. Uno debe tener la opción de <code>indoor</code> y el otro debe tener la opción <code>outdoor</code>. "
],
"nameDe": "Waypoint: Erstelle ein paar Optionsfelder",
@ -2357,11 +2329,11 @@
"descriptionEs": [
"Los formularios suelen usar <code>casillas de verificación</code> para preguntas que pueden tener más de una respuesta.",
"Las casillas de verificación son un tipo del elemento <code>input</code>",
"Cada una de tus casillas de verificación deben ser anidado dentro de su propio elemento <code>label</code>.",
"Cada una de tus casillas de verificación debe ser anidada dentro de su propio elemento <code>label</code>.",
"Todas las entradas de casillas de verificación relacionadas deben tener el mismo atributo <code>name</code>.",
"He aquí un ejemplo de una casilla de verificación:",
"<code>&#60;label&#62;&#60;input type=\"checkbox\" name=\"personality\"&#62; Cariñoso&#60;/label&#62;</code>",
"Añade a tu formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe estar anidada dentro de su propio elemento <code>label</code>. Las tres deben compartir el atributo <code>name</code>."
"<code>&#60;label&#62;&#60;input type=\"checkbox\" name=\"personalidad\"&#62; Cariñoso&#60;/label&#62;</code>",
"Añade a tu formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe estar anidada dentro de su propio elemento <code>label</code>. Las tres deben tener <code>personality</code> como su atributo <code>name</code>."
],
"nameDe": "Waypoint: Erstelle ein paar Kontrollkästchen",
"descriptionDe": [
@ -2454,7 +2426,7 @@
"nameEs": "Marca botones de radio y casillas de verificación por omisión",
"descriptionEs": [
"Puedes marcar por omisión una casilla de verificación o un botón de radio usando el atributo <code>checked</code>.",
"Para ello, sólo tienes que añadir la palabra \"checked\" en el interior de un elemento de entrada. Por ejemplo:",
"Para ello, sólo tienes que añadir la palabra \"checked\" en el interior de un elemento <code>input</code>. Por ejemplo:",
"<code>&#60;input type=\"radio\" name=\"nombre-de-prueba\" checked&#62;</code>",
"Establece como marcados por omisión el primero de tus <code>botones de radio</code> y la primera <code>casilla de verificación</code>."
],
@ -2651,9 +2623,7 @@
"descriptionEs": [
"Puedes fijar el color de fondo de un elemento con la propiedad <code>background-color</code>.",
"Por ejemplo, si quieres que el color de fondo de un elemento sea verde (<code>green</code>), dentro de tu elemento <code>style</code> pondrías:",
"<code>.green-background {</code>",
"<code>&nbsp;&nbsp;background-color: green;</code>",
"<code>}</code>",
"<blockquote>.green-background {<br>&nbsp;&nbsp;background-color: green;<br>}</blockquote>",
"Crea una clase llamada <code>gray-background</code> con la propiedad <code>background-color</code> en gris (<code>gray</code>). Asigna esta clase a tu elemento <code>div</code> ."
],
"namePtBR": "Dê uma Cor de Fundo a um Elemento Div",
@ -2847,10 +2817,8 @@
"nameEs": "Usa un atributo ID para dar estilo a un elemento",
"descriptionEs": [
"Una cosa buena sobre los atributos <code>id</code> es que, al igual que con clases, puedes darles estilo usando CSS.",
"He aquí un ejemplo de cómo puedes tomar tu elemento con atributo <code>id</code> en <code>cat-photo-element</code> y ponerle el color de fondo verde. En tu elemento <code>style</code>: ",
"<code>#cat-photo-element {</code>",
"<code>&nbsp;&nbsp;background-color: green;</code>",
"<code>}</code>",
"He aquí un ejemplo de cómo puedes tomar tu elemento con atributo <code>id</code> de <code>cat-photo-element</code> y ponerle el color de fondo verde. En tu elemento <code>style</code>: ",
"<blockquote>#cat-photo-element {<br>&nbsp;&nbsp;background-color: green;<br>}</blockquote>",
"Ten en cuenta que dentro de tu elemento <code>style</code>, siempre referencias clases poniendo un <code>.</code> en frente de sus nombres. Y siempre referencias identificaciones poniendo un <code>#</code> frente a sus nombres. ",
"Trata de darle a tu formulario, que ahora tiene el atributo <code>id</code> en <code>cat-photo-form</code>, un fondo verde."
],
@ -2919,13 +2887,13 @@
"challengeType": 0,
"nameEs": "Ajusta el relleno de un elemento",
"descriptionEs": [
"Ahora vamos a dejar un poco de lado nuestra aplicación de fotos de gatos, y aprenderemos más sobre dar estilo a HTML",
"Ahora vamos a dejar de lado nuestra aplicación de fotos de gatos por un tiempo, y aprenderemos más sobre dar estilo a HTML",
"Ya habrás notado esto, pero todos los elementos HTML son esencialmente pequeños rectángulos.",
"Tres propiedades importantes controlan el espacio que rodea a cada elemento HTML: relleno (<code>padding</code>), margen (<code>margin</code>) y borde (<code>border</code>)",
"El relleno (<code>padding</code>) de un elemento controla la cantidad de espacio entre el elemento y su borde (<code>border</code>).",
"Aquí, podemos ver que el cuadro verde y el cuadro rojo se anidan dentro del cuadro amarillo. Ten en cuenta que el cuadro rojo tiene más relleno (<code>padding</code>) que el cuadro verde. ",
"Cuando aumentas el relleno de la caja verde, aumentará la distancia entre el texto <code>padding</code> y el borde alrededor de este.",
"Cambia el relleno (<code>padding</code>) de la caja verde para que coincida con la de tu cuadro rojo."
"Cuando aumentes el relleno de la caja verde, aumentará la distancia entre el texto <code>padding</code> y el borde alrededor de este.",
"Cambia el relleno (<code>padding</code>) de la caja verde para que coincida con el de tu cuadro rojo."
],
"nameDe": "Wegpunkt: Justiere den Innenabstand eines Elements",
"descriptionDe": [
@ -3001,7 +2969,7 @@
"descriptionEs": [
"El margen (<code>margin</code>) de un elemento controla la cantidad de espacio entre el borde (<code>border</code>) y los elementos alrededor.",
"Aquí, podemos ver que la caja verde y la caja roja se anidan dentro de la caja amarilla. Ten en cuenta que la caja roja tiene más margen (<code>margin</code>) que la caja verde, haciendo que parezca más pequeña. ",
"Cuando aumentas el margen (<code>margin</code>) de la caja verde, aumentará la distancia entre su borde y los elementos que la rodean.",
"Cuando aumentes el margen (<code>margin</code>) de la caja verde, aumentará la distancia entre su borde y los elementos que la rodean.",
"Cambia el margen (<code>margin</code>) de la caja verde para que coincida con el de la caja roja."
],
"nameDe": "Waypoint: Passe den Außenabstand eines Elements an",
@ -3148,7 +3116,7 @@
"challengeType": 0,
"nameEs": "Añade relleno diferente a cada lado de un elemento",
"descriptionEs": [
"A veces quieres personalizar un elemento para que tenga diferente relleno (<code>padding</code>) en cada uno de sus lados.",
"A veces querrás personalizar un elemento para que tenga diferente relleno (<code>padding</code>) en cada uno de sus lados.",
"CSS te permite controlar el relleno (<code>padding</code>) de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> y <code>padding-left</code>. ",
"Da a la caja verde un relleno (<code>padding</code>) de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en sus partes inferior y derecha."
],
@ -3221,7 +3189,7 @@
"challengeType": 0,
"nameEs": "Añade márgenes diferentes a cada lado de un elemento",
"descriptionEs": [
"A veces quieres personalizar un elemento para que tenga un margen (<code>margin</code>) diferente en cada uno de sus lados.",
"A veces querrás personalizar un elemento para que tenga un margen (<code>margin</code>) diferente en cada uno de sus lados.",
"CSS te permite controlar el margen de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> y <code>margin-left</code>. ",
"Da a la caja verde un margen (<code>margin</code>) de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en su parte inferior y al lado derecho."
],
@ -3291,7 +3259,7 @@
"challengeType": 0,
"nameEs": "Utiliza notación en sentido horario para especificar el relleno de un elemento",
"descriptionEs": [
"En lugar de especificar las propiedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> y <code>padding-left</code> de un elemento, puedes especificar todas en una sola línea, así: ",
"En lugar de especificar las propiedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> y <code>padding-left</code> de un elemento, puedes especificar todas en una sóla línea, así: ",
"<code>padding: 10px 20px 10px 20px;</code>",
"Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones de relleno.",
"Usa la notación en sentido horario para dar a la clase \"<code>.green-box</code>\" un relleno de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en su parte inferior y al lado derecho ."
@ -3383,7 +3351,7 @@
"Ao invés de especificar as propriedades <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, e <code>margin-left</code> de um elemento, você pode especificar todas elas em apenas uma linha assim:",
"<code>margin: 10px 20px 10px 20px;</code>",
"Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de margem.",
"Use a <code>notação em sentido horário</code> para dar para a classe \"<code>.green-box</code>\" uma margem de <code>40px</code> nas partes superior e esquerda, mas de apenas <code>20px</code> em sua parte inferior e ao lado direito."
"Use a <code>notação em sentido horário</code> para dar para a classe \"<code>.green-box</code>\" uma margem de <code>40px</code> nas partes superior e esquerda, mas de apenas <code>20px</code> em sua parte inferior e ao lado direito."
],
"type": "waypoint"
},
@ -3414,9 +3382,8 @@
"Cada página HTML tiene un cuerpo (<code>body</code>).",
"Podemos demostrar que el elemento (<code>body</code>) existe aquí, dandole un color de fondo (<code>background-color</code>) negro.",
"Podemos hacer esto añadiendo lo siguiente a nuestro elemento <code>style</code>:",
"<code>body {</code>",
"<code>&nbsp;&nbsp;background-color: black;</code>",
"<code>}</code>"
"<blockquote>body {<br>&nbsp;&nbsp;background-color: black;<br>}</blockquote>"
],
"namePtBR": "Dê Estilo ao Elemento Body em HTML",
"descriptionPtBR": [
@ -3461,7 +3428,7 @@
"nameEs": "Hereda estilos del elemento cuerpo",
"descriptionEs": [
"Ya hemos demostrado que cada página HTML tiene un cuerpo (<code>body</code>), y que puede dársele estilo CSS.",
"Recuerda, que puedes dar estilo de tu elemento <code>body</code> como a cualquier otro elemento HTML, y que todos tus otros elementos heredarán sus estilos de tu elemento <code>body</code>.",
"Recuerda que puedes dar estilo de tu elemento <code>body</code> como a cualquier otro elemento HTML, y que todos tus otros elementos heredarán sus estilos de tu elemento <code>body</code>.",
"En primer lugar, crea un elemento <code>h1</code> con el texto <code>Hello World</code>",
"Después, vamos a darle a todos los elementos de tu página el color verde (<code>green</code>) añadiendo <code>color: green;</code> a la declaración de estilo de tu elemento <code>body</code>.",
"Por último, da a tu elemento <code>body</code> el tipo de letra <code>Monospace</code> añadiendo <code>font-family: Monospace;</code> a la declaración del estilo de tu elemento <code>body</code>."
@ -3558,10 +3525,11 @@
"¡Nuestra clase \"pink-text\" anuló la declaración CSS de nuestro elemento <code>body</code>!",
"Acabamos de demostrar que nuestras clases anularán el CSS del elemento <code>body</code>. Así que la siguiente pregunta lógica es: ¿qué podemos hacer para anular nuestra clase <code>pink-text</code>?",
"Crea una clase CSS adicional llamada <code>texto-azul</code> que le de a un elemento el color azul. Asegúrate de que está debajo de tu declaración de la clase <code>pink-text</code>. ",
"Aplica la clase <code>blue-text</code> a tu elemento <code>h1</code> además de tu clase <code>pink-text</code> y veamos cual gana.",
"Aplica la clase <code>blue-text</code> a tu elemento <code>h1</code> además de tu clase <code>pink-text</code> y veamos cuál gana.",
"La aplicación de múltiples atributos de clase a un elemento HTML se hace usando espacios entre ellos así:",
"<code>class=\"class1 class2\"</code>",
"Nota: No importa lo que ordenan las clases se enumeran en el."
"<code>class=\"clase1 clase2\"</code>",
"Nota: No importa el orden en que las clases aparecen en el HTML.",
"Sin embargo, el orden de las declaraciones <code>class</code> en la sección <code>&#60;style&#62;</code> sí son importantes. La segunda declaración siempre precederá a la primera. Debido a que <code>.blue-text</code> es declarada después, esta anula los atributos de <code>.pink-text</code>"
],
"namePtBR": "Sobreponha Estilos com CSS Posterior",
"descriptionPtBR": [
@ -3624,9 +3592,7 @@
"<code>&#60;h1 id=\"orange-text\"&#62;</code>",
"Deja las clases <code>blue-text</code> y <code>pink-text</code> de tu elemento <code>h1</code>.",
"Crea una declaración CSS para tu identificación <code>orange-text</code> en tu elemento <code>style</code>. He aquí un ejemplo de como se ve esto: ",
"<code>#brown-text {</code>",
"<code>&nbsp;&nbsp;color: brown;</code>",
"<code>}</code>",
"<blockquote>#brown-text {<br>&nbsp;&nbsp;color: brown;<br>}</blockquote>",
"Nota: No importa si usted declara este css encima o debajo de la clase de texto de color rosa, ya atributo id siempre tendrá prioridad."
],
"namePtBR": "Sobreponha a Declaração de Classes Estilizando Atributos ID",
@ -3692,7 +3658,7 @@
"Certo, nós demonstramos que declarações de id sobrepoem as declarações de classe, independente do lugar onde são declarados em seu elemento <code>style</code> no CSS.",
"Existem outras formas em que você pode sobrepor CSS. Você se lembra de estilos inline?",
"Use um estilo <code>inline</code> para tentar fazer com que nosso elemento <code>h1</code> tenha a cor branca. Relembre que estilos inline são assim:",
"<code>&#60;h1 style=\"color: green\"&#62;</code>",
"<code>&#60;h1 style=\"color: green\"&#62;</code>",
"Deixe as classes <code>blue-text</code> e <code>pink-text</code> em seu elemento <code>h1</code>."
]
},
@ -3755,7 +3721,7 @@
"Certo, vamos voltar para a nossa declaração de classe <code>pink-text</code>. Relembre que nossa classe <code>pink-text</code> foi sobreposta pelas declarações de classe posteriores, por declarações id e por estilos inline.",
"Vamos adicionar nossa palavra-clave <code>!important</code> para sua declaração de cor de <code>pink-text</code> para que possamos estar 100% seguros que seu elemento <code>h1</code> será sempre cor de rosa.",
"Um exemplo para fazer isso é:",
"<code>color: red !important;</code>"
"<code>color: red !important;</code>"
]
},
{
@ -3857,7 +3823,7 @@
"Te puedes estar preguntando por qué usamos 6 dígitos para representar un color en lugar de sólo uno o dos. La respuesta es que el uso de 6 dígitos nos da una enorme variedad. ",
"¿Cuántos colores son posibles? 16 valores y 6 posiciones significa que tenemos 16 a la sexta potencia, o más de 16 millones de colores posibles. ",
"Los códigos hexadecimales siguen el formato rojo-verde-azul (<em>red-green-blue</em>) o formato <code>rgb</code>. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul .",
"Así que para conseguir el rojo absolutamente más brillante, basta que uses <code>F</code> para el primer y segundo dígitos (el dígito más alto posible) y <code>0</code> para el tercero, cuarto, quinto y sexto dígitos (el dígito más bajo posible).",
"Así que para conseguir el rojo absolutamente más brillante, basta que uses <code>F</code> para el primer y segundo dígitos (el valor más alto posible) y <code>0</code> para el tercero, cuarto, quinto y sexto dígitos (el valor más bajo posible).",
"Haz que el color de fondo (<code>background-color</code>) del elemento <code>body</code> sea rojo dándole el código hexadecimal <code>#FF0000</code>"
],
"namePtBR": "Use Código Hexadecimal Para dar a Cor Vermelha a Elementos",
@ -3892,8 +3858,8 @@
"challengeType": 0,
"nameEs": "Usa el código hexadecimal para colorear de verde los elementos",
"descriptionEs": [
"Recuerda que el <code>código hexadecimal</code> sigue el formato rojo-verde-azul o <code>rgb</code>. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representar la cantidad de azul.",
"Así que para conseguir el verde absoluto más brillante, sólo usas <code>F</code> en el tercer y cuarto dígitos (el dígito más alto posible) y <code>0</code> para todos los otros dígitos (el dígito más bajo posible). ",
"Recuerda que el <code>código hexadecimal</code> sigue el formato rojo-verde-azul o <code>rgb</code>. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul.",
"Así que para conseguir el verde absoluto más brillante, sólo debes usar <code>F</code> en el tercer y cuarto dígitos (el valor más alto posible) y <code>0</code> para todos los otros dígitos (el valor más bajo posible). ",
"Haz que el color de fondo (<code>background-color</code>) del elemento <code>body</code> sea verde, dándole el código hexadecimal <code>#00FF00</code>"
],
"namePtBR": "Use Código Hexadecimal para dar a Cor Verde a Elementos",
@ -3926,8 +3892,8 @@
"challengeType": 0,
"nameEs": "Usa el código hexadecimal para colorear de azul los elementos",
"descriptionEs": [
"Los códigos hexadecimales siguen el formato rojo-verde-azul o <code>rgb</code>. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representar la cantidad de azul .",
"Así que para conseguir el azul absoluto más brillante, utilizamos <code>F</code> para la quinta y sexta cifras (el dígito más alto posible) y <code>0</code> para todos los otros dígitos (el dígito más bajo posible ). ",
"Los códigos hexadecimales siguen el formato rojo-verde-azul o <code>rgb</code>. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul .",
"Así que para conseguir el azul absoluto más brillante, utilizamos <code>F</code> para la quinta y sexta cifras (el valor más alto posible) y <code>0</code> para todos los otros dígitos (el valor más bajo posible ). ",
"Haz que el color de fondo (<code>background-color</code>) del elemento <code>body</code> sea azul, dándole el código hexadecimal <code>#0000FF</code>"
],
"namePtBR": "Use Código Hexadecimal para dar a Cor Azul a Elementos",
@ -4025,7 +3991,7 @@
],
"type": "waypoint",
"challengeType": 0,
"nameEs": "Usa el código hexadecimal para colorear con tonos grises",
"nameEs": "Usa el código hexadecimal para colorear con tonos de gris",
"descriptionEs": [
"También podemos crear otros tonos de gris mezclando uniformemente los tres colores. Podemos ir muy cerca del verdadero negro. ",
"Haz que el color de fondo del elemento <code>body</code> sea gris oscuro dandole el código hexadecimal <code>#111111</code>"
@ -4063,7 +4029,7 @@
"Mucha gente se siente abrumada por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente puedes acortarlo. ",
"Por ejemplo, el rojo, que es <code>#FF0000</code> en código hexadecimal, se puede abreviar a <code>#F00</code>. Es decir, un dígito para el rojo, un dígito para el verde, un dígito para el azul. ",
"Esto reduce el número total de posibles colores a alrededor de 4.000. Pero los navegadores interpretarán <code>#FF0000</code> y <code>#F00</code> como exactamente el mismo color. ",
"Adelante, intente usar <code>#F00</code> para volver rojo el color de fondo del elemento <code>body</code>."
"Adelante, intenta usar <code>#F00</code> para volver rojo el color de fondo del elemento <code>body</code>."
],
"namePtBR": "Use Código Hexadecimal Abreviado",
"descriptionPtBR": [
@ -4116,7 +4082,7 @@
"O valor RGB para preto é assim:",
"<code>rgb(0, 0, 0)</code>",
"O valor RGB para branco é assim:",
"<code>rgb(255, 255, 255)</code>",
"<code>rgb(255, 255, 255)</code>",
"Ao invés de utilizar 6 dígitos hexadecimais, com <code>rgb</code> você especifica o brilho de cada cor com um número entre 0 e 255.",
"Se você fizer a matemática, 16 vezes 16 é igual a 256 valores totais. Sendo assim, o <code>rgb</code>, que começa a contar desde zero, tem exatamente o mesmo número de valores possíveis que o código hexadecimal.",
"Vamos substituir o código hexadecimal da cor de fundo do nosso elemento <code>body</code> pelo valor RGB para preto: <code>rgb(0, 0, 0)</code>."
@ -4160,7 +4126,7 @@
"O valor RGB para preto é assim:",
"<code>rgb(0, 0, 0)</code>",
"O valor RGB para branco é assim:",
"<code>rgb(255, 255, 255)</code>",
"<code>rgb(255, 255, 255)</code>",
"Ao invés de utilizar 6 dígitos hexadecimais, com <code>rgb</code> você especifica o brilho de cada cor com um número entre 0 e 255.",
"Substitua o código hexadecimal da cor de fundo do nosso elemento <code>body</code> que possui o valor RGB para preto, pelo valor <code>rgb</code> para branco: <code>rgb(255, 255, 255)</code>."
]

81
seed/challenges/01-front-end-development-certification/intermediate-bonfires.json
View File

@ -35,9 +35,9 @@
"challengeType": 5,
"nameEs": "Suma todos los números en un rango",
"descriptionEs": [
"Te pasaremos un arreglo que contiene dos números. Crea una función que devuelva la suma de esos dos números y todos los números entre ellos.",
"El número menor no siempre será el primer elemento en el arreglo.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Te pasaremos un vector que contiene dos números. Crea una función que devuelva la suma de esos dos números y todos los números entre ellos.",
"El número menor no siempre será el primer elemento en el vector.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -79,10 +79,10 @@
"Array.concat()"
],
"challengeType": 5,
"nameEs": "Obtén la diferencia entre dos arreglos",
"nameEs": "Obtén la diferencia entre dos vectores",
"descriptionEs": [
"Crea una función que compare dos arreglos y que devuelva un nuevo arreglo que contenga los elementos que no se encuentren simultáneamente en ambos arreglos.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Crea una función que compare dos vectores y que devuelva un nuevo vector que contenga los elementos que sólo se encuentre en uno de los vectores dados, pero no en ambos En otras palabras, devuelve la diferencia simétrica entre los dos vectores.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -143,7 +143,7 @@
"descriptionEs": [
"Convierte el número dado en numeral romano.",
"Todos los <a href=\"http://www.mathsisfun.com/roman-numerals.html\" target=\"_blank\">numerales romanos</a> en las respuestas deben estar en mayúsculas.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -182,9 +182,9 @@
"challengeType": 5,
"nameEs": "¿Dónde estás que no te veo?",
"descriptionEs": [
"Crea una función que busque en un arreglo de objetos (primer argumento) y devuelva un arreglo con todos los objetos que compartan el valor indicado para una propiedad dada (segundo argumento). Cada pareja de propiedad y valor debe estar presente en el objeto de la colección para ser incluido en el arreglo devuelto por la función",
"Por ejemplo, si el primer argumento es <code>[{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }]</code>, y el segundo argumento es <code>{ last: \"Capulet\" }</code>, entonces tu función debe devolver el tercer objeto del arreglo en el primer argumento, ya que contiene la propiedad y el valor indicados en el segundo argumento.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Crea una función que busque en un vector de objetos (primer argumento) y devuelva un vector con todos los objetos que compartan el valor indicado para una propiedad dada (segundo argumento). Cada pareja de propiedad y valor debe estar presente en el objeto de la colección para ser incluido en el vector devuelto por la función",
"Por ejemplo, si el primer argumento es <code>[{ first: \"Romeo\", last: \"Montague\" }, { first: \"Mercutio\", last: null }, { first: \"Tybalt\", last: \"Capulet\" }]</code>, y el segundo argumento es <code>{ last: \"Capulet\" }</code>, entonces tu función debe devolver el tercer objeto del vector en el primer argumento, ya que contiene la propiedad y el valor indicados en el segundo argumento.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -230,7 +230,7 @@
"El segundo argumento es la palabra que se va a reemplazar",
"El tercer argumento es lo que reemplazará a la palabra indicada en el segundo argumento",
"NOTA: Debes respetar mayúsculas y minúsculas de la palabra original cuando ejecutes el reemplazo. Por ejemplo, si quisieras reemplazar la palabra \"Libro\" con la palabra \"perro\", deberías insertar en vez la palabra \"Perro\"",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -274,7 +274,7 @@
"Traduce la cadena de texto que se te provee al Latín de los cerdos (Pig Latin)",
"<a href=\"http://en.wikipedia.org/wiki/Pig_Latin\" target=\"_blank\">Pig Latin</a> toma la primera consonante (o grupo de consonantes) de una palabra en inglés, la mueve al final de la palabra y agrega un \"ay\".",
"Si la palabra comienza con una vocal, simplemente añade \"way\" al final.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -312,12 +312,12 @@
"challengeType": 5,
"nameEs": "Emparejando bases de ADN",
"descriptionEs": [
"A la cadena de ADN que se te pasa le hace falta una hebra. Toma cada una de las letras, obtén su pareja correspondiente y devuelve los resultados en un segundo arreglo",
"A la cadena de ADN que se te pasa le hace falta una hebra. Toma cada una de las letras, obtén su pareja correspondiente y devuelve los resultados en un segundo vector",
"<a href=\"http://es.wikipedia.org/wiki/Apareamiento_de_bases\" target=\"_blank\">Parejas de bases</a> son pares de AT y CG. Encuentra el elemento que hace falta para cada una de las letras que se te presentan.",
"Devuelve la letra que se te provee como el primer elemento en cada arreglo",
"Por ejemplo, si te pasáramos la cadena GCG, tu función debería devolver el arreglo: [[\"G\", \"C\"], [\"C\",\"G\"],[\"G\", \"C\"]]",
"Cada letra que se te provee y su pareja deben estar contenidos en un arreglo, y cada uno de estos arreglos debe estar contenidos en un arreglo.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Devuelve la letra que se te provee como el primer elemento en cada vector",
"Por ejemplo, si te pasáramos la cadena GCG, tu función debería devolver el vector: [[\"G\", \"C\"], [\"C\",\"G\"],[\"G\", \"C\"]]",
"Cada letra que se te provee y su pareja deben estar contenidos en un vector, y cada uno de estos vectores debe estar contenidos en un vector.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -355,7 +355,7 @@
"descriptionEs": [
"Crea una función que devuelva la letra que falta en el rango de letras que se le pasa",
"Si todas las letras en el rango están presentes, la función debe devolver undefined.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -399,7 +399,7 @@
"descriptionEs": [
"Crea una función que verifique si el valor que se le pasa es de tipo booleano. Haz que la función devuelva true o false según corresponda.",
"Los primitivos booleanos primitivos son: true y false",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -437,11 +437,11 @@
"challengeType": 5,
"nameEs": "Intersección ordenada",
"descriptionEs": [
"Escribe una función que tome dos o más arreglos y que devuelva un nuevo arreglo con los valores únicos en el orden de aparición de los arreglos que se te pasaron",
"En otra palabras, todos los valores presentes en todos los arreglos deben aparecer en el arreglo final en su orden original, pero sin duplicados.",
"Los valores únicos deben aparecer en el orden original, pero el arreglo final no necesariamente debe mostrar los elementos en orden numérico.",
"Escribe una función que tome dos o más vectores y que devuelva un nuevo vector con los valores únicos en el orden de aparición de los vectores que se te pasaron",
"En otra palabras, todos los valores presentes en todos los vectores deben aparecer en el vector final en su orden original, pero sin duplicados.",
"Los valores únicos deben aparecer en el orden original, pero el vector final no necesariamente debe mostrar los elementos en orden numérico.",
"Puedes usar de referencia las pruebas de verificación si necesitas ejemplos.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -480,8 +480,8 @@
"challengeType": 5,
"nameEs": "Convierte entidades HTML",
"descriptionEs": [
"Convierte los caracteres \"&\", \"<\", \">\", '\"' (comilla), y \"'\" (apostrofe), contenidos en la cadena de texto que se te pasa, en sus entidades HTML correspondientes",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Convierte los caracteres <code>&</code>, <code>&lt;<code>, <code>&gt;<code>, <code>\"<code>' (comilla), y <code>'<code> (apóstrofe), contenidos en la cadena de texto que se te pasa, en sus entidades HTML correspondientes",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -519,7 +519,7 @@
"nameEs": "separado-por-guiones",
"descriptionEs": [
"Convierte la cadena de texto que se te pasa al formato spinal case. Spinal case es cuando escribes todas las palabras en-minúsculas-unidas-por-guiones.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -560,7 +560,7 @@
"Crea una función que devuelva la suma de todos los números impares en la secuencia de Fibonacci hasta el número que se le pasa como argumento, incluyéndolo en caso de ser un número de la secuencia.",
"Los primeros números de la secuencia son 1, 1, 2, 3, 5 y 8, y cada número siguiente es la suma de los dos números anteriores.",
"Por ejemplo, si se te pasa el número 4, la función deberá devolver 5, ya que los números impares menores que 4 son 1, 1 y 3.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -599,7 +599,7 @@
"Suma todos los números primos hasta, e incluyendo, el número que se te pasa",
"Números primos son todos aquellos que sólo son divisibles entre 1 y entre sí mismos. Por ejemplo, el número 2 es primo porque solo es divisible por 1 y por 2. Por el contrario, el número 1 no es primo, ya que sólo puede dividirse por sí mismo",
"El número que se le provee a la función no puede ser primo",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -636,10 +636,10 @@
"challengeType": 5,
"nameEs": "Mínimo común múltiplo",
"descriptionEs": [
"En el ejercicio se te provee un arreglo con dos números. Crea una función que encuentre el número más pequeño que sea divisible entre ambos números, así como entre todos los números enteros entre ellos.",
"Tu función debe aceptar como argumento un arreglo con dos números, los cuales no necesariamente estarán en orden.",
"En el ejercicio se te provee un vector con dos números. Crea una función que encuentre el número más pequeño que sea divisible entre ambos números, así como entre todos los números enteros entre ellos.",
"Tu función debe aceptar como argumento un vector con dos números, los cuales no necesariamente estarán en orden.",
"Por ejemplo, si se te pasan los números 1 y 3, deberás encontrar el mínimo común múltiplo de 1 y 3 que es divisible por todos los números <em>entre</em> 1 y 3.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -672,8 +672,8 @@
"challengeType": 5,
"nameEs": "Buscando la verdad",
"descriptionEs": [
"Crea una función que busque dentro de un arreglo (primer argumento) y que devuelva el primer elemento que pase una prueba de verdad (segundo argumento).",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Crea una función que busque dentro de un vector (primer argumento) y que devuelva el primer elemento que pase una prueba de verdad (segundo argumento).",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -713,8 +713,9 @@
"challengeType": 5,
"nameEs": "¡Fuera de aquí!",
"descriptionEs": [
"Toma los elementos contenidos en el arreglo que se te provee en el primer argumento de la función y elimínalos uno por uno, hasta que la función provista en el segundo argumento devuelva true.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Toma los elementos contenidos en el vector que se te provee en el primer argumento de la función y elimínalos uno por uno, hasta que la función provista en el segundo argumento devuelva true.",
"Retorna el resto del vector, de lo contrario retorna un vector vacío.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -749,8 +750,8 @@
"challengeType": 5,
"nameEs": "Aplanadora",
"descriptionEs": [
"Aplana el arreglo anidado que se te provee. Tu función debe poder aplanar arreglos de cualquier forma.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Aplana el vector anidado que se te provee. Tu función debe poder aplanar vectores de cualquier forma.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -786,7 +787,7 @@
"descriptionEs": [
"Haz que la función devuelva el mensaje en inglés escondido en el código binario de la cadena de texto que se le pasa.",
"La cadena de texto binaria estará separada por espacios.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -826,7 +827,7 @@
"descriptionEs": [
"Verifica si la función en el segundo argumento devuelve true para todos los elementos de la colección en el primer argumento.",
"Recuerda que puedes accesar a las propiedades de un objeto, ya sea a través de la notación por punto o de la notación por corchete usando [].",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [
@ -873,7 +874,7 @@
"<code>var sumTwoAnd = add(2);</code>",
"<code>sumTwoAnd(3)</code> devuelve <code>5</code>.",
"Si alguno de los argumentos no es un número válido, haz que devuelva undefined.",
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
],
"isRequired": true,
"solutions": [

41
seed/challenges/01-front-end-development-certification/jquery.json
View File

@ -58,7 +58,7 @@
"Tu navegador ejecutará todo JavaScript dentro de un elemento <code>script</code>, incluyendo jQuery.",
"Dentro de tu elemento <code>script</code>, agrega este código: <code>$(document).ready(function () {</code> A continuación, ciérralo en la línea siguiente (aún dentro de tu elemento <code>script</code>) con: <code>})</code>",
"Más adelante aprenderemos más acerca de funciones. Lo importante es saber que el código que pongas dentro de esta función (<code>function</code>) se ejecutará tan pronto como tu navegador haya cargado la página.",
"Esto es importante porque sin su <code>función de documento listo</code>, su código puede ejecutarse antes de que se haya presentado el HTML, lo que podría causar errores."
"Esto es importante porque sin tu <code>función de documento listo</code>, tu código puede ejecutarse antes de que se haya presentado el HTML, lo que podría causar errores."
]
},
{
@ -111,12 +111,12 @@
"challengeType": 0,
"nameEs": "Elige elementos HTML usando selectores y jQuery",
"descriptionEs": [
"Ahora tenemos una <code>función de documento listo</code>.",
"Ahora vamos a escribir nuestra primera instrucción jQuery. Todas las funciones de jQuery comienzan con un <code>$</code>, al que suele referirse como <code>operador de signo de dólar</code>, o simplemente como <code>bling</code>. ",
"jQuery a menudo selecciona un elemento HTML con un <code>selector</code>, y luego hace algo a ese elemento.",
"Ya tenemos una <code>función de documento listo</code>.",
"Ahora vamos a escribir nuestra primera instrucción jQuery. Todas las funciones de jQuery comienzan con un <code>$</code>, al que suele referirse como <code>operador dólar</code>, o simplemente como <code>bling</code>. ",
"jQuery a menudo selecciona un elemento HTML con un <code>selector</code>, y luego le hace algo a ese elemento.",
"Por ejemplo, hagamos que todos tus elementos <code>button</code> reboten. Sólo tienes que añadir este código dentro de la función de documento listo: ",
"<code>$(\"button\").addClass(\"animated bounce\")</code>",
"Ten en cuenta que ya hemos incluido tanto la biblioteca jQuery como la biblioteca Animate.css en segundo plano para que pueda utilizarlos en el editor. Así que estás usando jQuery para aplicar la clase <code>bounce</code> de Animate.css a sus elementos <code>button</code>."
"Ten en cuenta que ya hemos incluido tanto la biblioteca jQuery como la biblioteca Animate.css en segundo plano para que pueda utilizarlos en el editor. Así que estás usando jQuery para aplicar la clase <code>bounce</code> de Animate.css a tus elementos <code>button</code>."
]
},
{
@ -293,7 +293,7 @@
"nameEs": "Elimina tus funciones jQuery",
"descriptionEs": [
"Estas animaciones eran divertidas al principio, pero ahora se están volviendo una distracción.",
"Elimina esas tres funciones de jQuery de tu <code>función de documento listo</code>, pero deja intacta la declaración de la <code>función de documento listo</code>."
"Elimina esas tres funciones jQuery de tu <code>función de documento listo</code>, pero deja intacta la declaración de la <code>función de documento listo</code>."
]
},
{
@ -350,12 +350,12 @@
"challengeType": 0,
"nameEs": "Elige un mismo elemento con múltiples selectores jQuery",
"descriptionEs": [
"Ahora ya sabes tres formas de seleccionar elementos: por tipo: <code>$(\"button\")</code>, por clase: <code>$(\".btn\")</code>, y por identificación <code>$(\"#target1\")</code>. ",
"Ahora ya sabes tres formas de seleccionar elementos: por tipo <code>$(\"button\")</code>, por clase <code>$(\".btn\")</code>, y por identificación <code>$(\"#target1\")</code>. ",
"Aunque es posible agregar varias clases en una sola llamada a <code>.addClass()</code>, vamos a añadirlas al mismo elemento de tres maneras diferentes.",
"Usa cada uno de los selectores jQuery vistos y la función <code>addClass()</code>:",
"Agrega la clase <code>animated</code> a todos los elementos con tipo <code>button</code>.",
"Agrega la clase <code>shake</code> a todos los botones con clase <code>.btn</code>.",
"Agrega la clase <code>btn-primary</code> al botón con identificación <code>#target1</code>."
"Usa cada uno de los selectores jQuery vistos y la función <code>addClass()</code> para:",
"Agregar la clase <code>animated</code> a todos los elementos con tipo <code>button</code>.",
"Agregar la clase <code>shake</code> a todos los botones con clase <code>.btn</code>.",
"Agregar la clase <code>btn-primary</code> al botón con identificación <code>#target1</code>."
]
},
{
@ -590,7 +590,16 @@
"assert.isFalse((/<i>/gi).test($(\"h3\").html()), 'message: Do not alter any other text.');"
],
"type": "waypoint",
"challengeType": 0
"challengeType": 0,
"nameEs": "Cambia el texto de un elemento usando jQuery",
"descriptionEs": [
"Con jQuery, puedes cambiar el texto que está entre las etiquetas de apertura y cierre de un elemento. Incluso puedes cambiar marcado HTML.",
"jQuery tiene una función llamada <code>.html()</code> que te permite añadir etiquetas HTML y texto dentro de un elemento. Cualquier contenido que estuviese previamente dentro del elemento será remplazado por completo con el contenido que proveas usando esta función.",
"He aquí como reescribes y pones en itálicas el texto de nuestro encabezado:",
"<code>$(\"h3\").html(\"&#60;i&#62;jQuery Playground&#60;/i&#62;\");</code>",
"jQuery también tiene una función similar llamada <code>.text()</code> que sólo altera el texto sin añadir etiquetas.",
"Cambia el botón con identificación <code>target4</code> de forma que su texto quede en itálicas."
]
},
{
"id": "bad87fee1348bd9aed708826",
@ -643,7 +652,7 @@
"descriptionEs": [
"Ahora quitemos un elemento HTML de tu página usando jQuery.",
"jQuery tiene una función llamada <code>.remove()</code> que eliminará un elemento HTML por completo",
"Elimina el elemento <code>target4</code> de la página utilizando la función <code>.remove()</code>."
"Elimina el elemento con identificación <code>target4</code> de la página utilizando la función <code>.remove()</code>."
]
},
{
@ -700,7 +709,7 @@
"nameEs": "Usa appendTo para mover elementos con jQuery",
"descriptionEs": [
"Ahora intentemos mover elementos de un <code>div</code> a otro.",
"jQuery tiene una función llamada <code>appendTo()</code> que le permite seleccionar elementos HTML y anexarlos a otro elemento.",
"jQuery tiene una función llamada <code>appendTo()</code> que te permite seleccionar elementos HTML y anexarlos a otro elemento.",
"Por ejemplo, si quisiéramos mover <code>target4</code> de nuestro pozo (<em>well</em>) derecho a nuestro pozo izquierdo, usaríamos:",
"<code>$(\"#target4\").appendTo(\"#left-well\");</code>",
"Mueve tu elemento <code>target2</code> de tu <code>left-well</code> a tu <code>right-well</code>."
@ -961,10 +970,10 @@
"descriptionEs": [
"Seguramente habrás entendido porque los atributos id son tan convenientes para elegir con selectores jQuery. Pero no siempre contarás con estos agradables identificadores para trabajar. ",
"Afortunadamente, jQuery tiene algunos otros trucos para elegir los elementos adecuados.",
"jQuery usa selectores CSS para elegir elementos, El selector CSS <code>.clase:nth-child(i)</code> le permite seleccionar de los elementos con la clase dada, los que sean los i-ésimos hijos de su elemento padre. En lugar de una clase también puede usarse un elemento",
"jQuery usa selectores CSS para elegir elementos, El selector CSS <code>.clase:nth-child(i)</code> te permite seleccionar de los elementos con la clase dada, los que sean los i-ésimos hijos de su elemento padre. En lugar de una clase también puedes usar un elemento",
"He aquí cómo le asignarás la clase <code>bounce</code> al tercer elemento de cada pozo:",
"<code>$(\".target:nth-child(3)\").addClass(\"animated bounce\");</code>",
"Haz que rebote el segundo hijo de cada uno de los elementos de tus pozos. Debes elegir los hijos con la clase <code>target</code>."
"Haz que rebote el segundo hijo de cada uno de los elementos de tus pozos. Debes elegir los hijos de elementos con clase <code>target</code>."
]
},
{

68
seed/challenges/03-back-end-development-certification/api-projects.json
View File

@ -11,7 +11,7 @@
[
"http://i.imgur.com/4IZjWZ3.gif",
"A gif showing how to create a c9.io account.",
"We recommend building our full stack Basejump challenges on c9.io, a powerful browser-based development environment. This save you hours of time that you would spend configuring your local computer to run Node.js and MongoDB - time you could instead spend coding. <br>Create a c9.io account by clicking the GitHub symbol in the upper right hand corner of the c9.io page. Click the big plus symbol to create a new workspace. Enter your email address when prompted.",
"We recommend building our full stack Basejump challenges on c9.io, a powerful browser-based development environment. This will save you hours of time that you would spend configuring your local computer to run Node.js and MongoDB - time you could instead spend coding. <br>Create a c9.io account by clicking the GitHub symbol in the upper right hand corner of the c9.io page. Click the big plus symbol to create a new workspace. Enter your email address when prompted.",
"http://c9.io"
],
[
@ -98,7 +98,7 @@
"type": "Waypoint",
"challengeType": 7,
"isRequired": false,
"nameEs": "Prepárate para los Basejumps",
"nameEs": "Prepárate para nuestros Proyectos de Desarrollo al lado del servidor",
"descriptionEs": [
[
"http://i.imgur.com/4IZjWZ3.gif",
@ -206,7 +206,18 @@
"tests": [],
"type": "basejump",
"challengeType": 4,
"isRequired": true
"isRequired": true,
"nameEs": "Microservicio de Marca de Tiempo",
"descriptionEs": [
"<strong>Objetivo:</strong> Arma una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: <a href='https://timestamp-ms.herokuapp.com/' target='_blank'>https://timestamp-ms.herokuapp.com/</a> y despliegala en Heroku.",
"Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-back-end-development-projects'>http://freecodecamp.com//challenges/get-set-for-our-back-end-development-projects</a>.",
"Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
"<strong>Historia de Usuario:</strong> Puedo pasar una cadena como parámetro y comprobará si contiene o no una marca de tiempo para Unix o una fecha en lenguaje natural en inglés (Ejemplo: January 1, 2016).",
"<strong>Historia de Usuario:</strong> Si tiene una marca de tiempo para Unix, devuelve tanto la marca de tiempo de Unix como la fecha en lenguaje natural.",
"<strong>Historia de Usuario:</strong> Si no contiene una fecha ni una marca de tiempo para Unix, devolverá esas propiedades en <code>null</code>.",
"Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
},
{
"id": "bd7158d8c443edefaeb5bdff",
@ -226,7 +237,16 @@
"tests": [],
"type": "basejump",
"challengeType": 4,
"isRequired": true
"isRequired": true,
"nameEs": "Microservicio para analizar el encabezado de una petición",
"description": [
"<strong>Objetivo:</strong> Arma una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: <a href='https://cryptic-ridge-9197.herokuapp.com/api/whoami/' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/whoami/</a> y despliegala en Heroku.",
"Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-back-end-development-projects'>http://freecodecamp.com//challenges/get-set-for-our-back-end-development-projects</a>.",
"Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
"<strong>Historia de Usuario:</strong> Puedo obtener la dirección IP, idioma y sistema operativo de mi navegador.",
"Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
},
{
"id": "bd7158d8c443edefaeb5bd0e",
@ -248,7 +268,19 @@
"tests": [],
"type": "basejump",
"challengeType": 4,
"isRequired": true
"isRequired": true,
"nameEs": "Microservicio para acortar URLs",
"descriptionEs": [
"<strong>Objetivo:</strong> Arma una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: <a href='https://shurli.herokuapp.com/' target='_blank'>https://shurli.herokuapp.com/</a> y despliegala en Heroku.",
"Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-back-end-development-projects'>http://freecodecamp.com//challenges/get-set-for-our-back-end-development-projects</a>.",
"Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
"<strong>Historia de Usuario:</strong> Puedo pasar una URL como parámetro y recibiré una URL acortada en la respuesta JSON.",
"<strong>Historia de Usuario:</strong> Si paso una URL inválido que no siga el formato válido http://www.exmaple.com, en cambio la respuesta JSON contendrá un mensaje de error.",
"<strong>Historia de Usuario:</strong> Cuando visite el URL acortado, me redirigirá a mi enlace original.",
"Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
},
{
"id": "bd7158d8c443edefaeb5bdee",
@ -270,7 +302,18 @@
"tests": [],
"type": "basejump",
"challengeType": 4,
"isRequired": true
"isRequired": true,
"nameEs": "Capa de abstracción para buscar imágenes",
"descriptionEs": [
"<strong>Objetivo:</strong> Arma una aplicación de Pila Completa en JavaScript que te permite buscar imágenes como esta: <a href='https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10</a> y examinar las búsquedas recientes como esta: <a href='https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/</a>. Después, despliegala en Heroku.",
"Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-back-end-development-projects'>http://freecodecamp.com//challenges/get-set-for-our-back-end-development-projects</a>.",
"Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
"<strong>Historia de Usuario:</strong> Puedo obtener la URL de una imagen, texto alternativo y URLs de las páginas de un conjunto de imágenes que se relacionen con una cadena de texto dada.",
"<strong>Historia de Usuario:</strong> Puedo examinar página a página las respuestas añadiendo un parámetro del estilo <code>?offset=2</code> al URL.",
"<strong>Historia de Usuario:</strong> Puedo obtener una lista de las cadenas búscadas que se enviaron más recientemente.",
"Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
},
{
"id": "bd7158d8c443edefaeb5bd0f",
@ -292,7 +335,18 @@
"tests": [],
"type": "basejump",
"challengeType": 4,
"isRequired": true
"isRequired": true,
"nameEs": "Microservicio de metadatos de archivos",
"descriptionEs": [
"<strong>Objetivo:</strong> Arma una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: <a href='https://cryptic-ridge-9197.herokuapp.com/' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/</a> y despliegala en Heroku.",
"Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-back-end-development-projects'>http://freecodecamp.com//challenges/get-set-for-our-back-end-development-projects</a>.",
"Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
"<strong>Historia de Usuario:</strong> Puedo enviar un objeto FormData que incluya una subida de un archivo.",
"<strong>Historia de Usuario:</strong> Cuando envío algo, recibiré el tamao del archivo en bytes en la respuesta JSON.",
"<strong>Pista:</strong> Puede servirte este paquete: <a href='https://www.npmjs.com/package/multer' target='_blank'>https://www.npmjs.com/package/multer</a>",
"Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
]
}
]
}

104
seed/challenges/04-video-challenges/chromedevtools.json
View File

@ -31,7 +31,18 @@
]
],
"type": "hike",
"challengeType": 6
"challengeType": 6,
"nameEs": "Herramientas de desarrollo de Chrome: Elementos",
"descriptionEs": [
"Esta es información básica y una mini-lección sobre la pestaña Elements en las herramientas de desarrollo de Chrome. Echa un vistazo a la documentación más detallada aquí: developers.google.com/web/tools/iterate/inspect-styles/basics ",
"Vamos a utilizar la página web mckellen.com/ por sugerencia del usuario de FreeCodeCamp kmiasko.",
"Si pulsas con el botón derecho y seleccionas 'Inspeccionar elemento', tendrás acceso a la pestaña elements. ¡Puedes cambiar el texto, el color de fondo, el color de texto y cualquier otra propiedad CSS o elemento HTML que desees!",
"Estos cambios no se establecen de forma automática, por lo que no debes usar el inspector como un IDE o como un lugar para crear o editar cualquier cosa que desees guardar. Puedes configurar algo que se llama 'autoría persistente' para salvar.",
"Las reglas de CSS como cascada, herencia y otras se aplican, así que tenlo en cuenta a medida que juegas. Además, los estilos anulados se muestran con un tachado sobre ellos. ",
"También hay que señalar que todo el código que veas en ese 'árbol' es código HTML actual, no el original que había cuando se cargó la página. Si utilizas jQuery o JavaScript para cambiar algo, esté árbol se actualizará.",
"El relleno, los bordes y los márgenes se inspeccionan fácilmente y puedes editarlos usando la caja con colores que encontrarás al lado derecho o en la parte de abajo.",
"Por favor, echa un vistazo a la documentación de las herramientas de desarrollo de Chrome en developers.google.com/web/tools/chrome-devtools/"
]
},
{
"id": "56b15f15632298c12f315183",
@ -59,7 +70,17 @@
]
],
"type": "hike",
"challengeType": 6
"challengeType": 6,
"nameEs": "Herramientas de desarrollo de Chrome: red",
"descriptionEs": [
"La pestaña network (red) ayuda a responder preguntas como '¿Qué elemento o parte de la página fue el más demorado?' o '¿Qué inició una petición?'",
"El panel de red registra información detallada sobre cuánto tarda en cargar cada elemento de su página o aplicación.",
"Cada solicitud se registra en la bitácora, que se puede encontrar en la parte inferior del panel de red.",
"Si te fijas en la línea al lado derecho, te darás cuenta de un patrón de colores. Cada color representa un tipo diferente de contenido en la solicitud. ",
"Cuanto más larga sea la línea de un color determinado, tanto más tiempo tomó ese tipo de contenido en la solicitud. En últimas quieres líneas cortas, y si cualquier solicitud tiene largas líneas, sabes que puede estar ralentizando la página web.",
"Si pulsas sobre una solicitud en la bitácora, podrás obtener información más detallada.",
"Consulta más documentación detallada aquí: developers.google.com/web/tools/profile-performance/network-performance/resource-loading"
]
},
{
"id": "56b15f15632298c12f315182",
@ -89,7 +110,18 @@
]
],
"type": "hike",
"challengeType": 6
"challengeType": 6,
"nameEs": "Herramientas de desarrollo de Chrome: Fuentes",
"descriptionEs": [
"La pestaña 'fuentes' es más útil para la depuración de JavaScript. Cuanto más grande sea tu proyecto, tanto más difícil resulta encontrar exactamente dónde se produce un problema. ",
"Puedes seleccionar diferentes partes del código para ser 'puntos de interrupción', puestos de control que detendrán la ejecución del código en ese preciso momento. ",
"Hay diferentes puntos de interrupción que puedes establecer, por ejemplo una línea de código específica, un evento del DOM, una petición del servidor llamada solicitud XMLHTTP, o un evento de JavaScript.",
"Cuando estableces un punto de interrupción, el navegador detiene todo cuando llega a interpretar esa línea de código o evento.",
"Al reducir la velocidad de todo y darte la oportunidad de examinar lo que está sucediendo en cada punto que hayas configurado, podrás controlar exactamente lo que está sucediendo en la página o aplicación.",
"Una vez has establecido todos los puntos de interrupción, puedes recorrer el código y examinar el estado de tu página o aplicación en cada punto de interrupción.",
"Al igual que con los elementos, puedes editar en vivo mediante las herramientas de desarrollo, pero recuerda que debes guardar esos cambios para que no pierdas tu progreso.",
"Revisa documentación más detallada aquí: developers.google.com/web/tools/javascript/breakpoints/"
]
},
{
"id": "56b15f15632298c12f315181",
@ -119,7 +151,20 @@
]
],
"type": "hike",
"challengeType": 6
"challengeType": 6,
"nameEs": "Herramientas de desarrollo de Chrome: Línea de tiempo",
"descriptionEs": [
"El panel Línea de tiempo te permite grabar y analizar toda la actividad en tu aplicación mientras se ejecuta. Es el mejor lugar para comenzar a investigar los problemas de rendimiento que percibas en tu aplicación. ",
"Al igual que usas el panel de red para averiguar cuánto tiempo toman las partes de la página para comunicarse con el Internet y utilizas fuentes para averiguar dónde algo se daña, puedes utilizar la línea de tiempo para averiguar con más detalle lo que está pasando y el tiempo que tarda.",
"En el panel línea de tiempo grabas acontecimientos con el pequeño botón circular. Puedes grabar (o capturar) pilas, perfiles js, la memoria y la presentación (CSS). ",
"Al grabarlos (capturalos), quedan en pequeños y detallados registros que puedes organizar de muchas maneras para que se adapten a tus necesidades.",
"Todo esto te ayudará a entender mejor lo que está pasando en el navegador, en particular cuáles eventos requieren más memoria del navegador.",
"Cuando uses la línea de tiempo, recuerda que debes utilizar el botón 'limpiar' (clear) para iniciar la grabación y antes de cargar la página, dependiendo de lo que desees capturar.",
"Te darás cuenta de que cuando grabas eventos JS, al pulsar en el título o en una 'llamada a una función' al lado izquierdo, te llevará al documento y a la línea de esa función en el panel de recursos. ",
"Revisa documentación más detallada aquí: developers.google.com/web/tools/profile-performance/evaluate-performance/timeline-tool"
]
},
{
"id": "56b15f15632298c12f315180",
@ -146,7 +191,15 @@
]
],
"type": "hike",
"challengeType": 6
"challengeType": 6,
"nameEs": "Herramientas de desarrollo de Chrome: Perfiles",
"descriptionEs": [
"El panel Perfiles te permite perfilar el tiempo de ejecución y el uso de memoria de una aplicación web o de una página. Esto se aplica principalmente a la ejecución de JavaScript en su página o aplicación. ",
"Hay tres tipos de perfiles que se pueden recolectar: el perfil de la CPU, instantáneas de la memoria con estructura montón (Heap), y el perfil de la memoria con estructura montón. Los perfiles de memoria en estructura montón tienen más que ver con el uso de memoria, mientras que un perfil de la CPU tiene más que ver con el rendimiento de JavaScript. ",
"Un perfilador llamado V8 se usa mientras se ejecuta el código para identificar lo que en el JavaScript toma mucho tiempo, facilitándote de esta forma optimizar tu código.",
"Cada uno de estos perfiles se puede ver a la izquierda, y se puede tomar múltiples perfiles de cada uno. En general, la pestaña de perfiles es muy útil cuando deseas optimizar tu código. ",
"Revisa documentación más detallada aquí: developers.google.com/web/tools/profile-performance/rendering-tools/js-execution"
]
},
{
"id": "56b15f15632298c12f31517f",
@ -167,7 +220,14 @@
]
],
"type": "hike",
"challengeType": 6
"challengeType": 6,
"nameEs": "Herramientas de desarrollo de Chrome: Recursos",
"descriptionEs": [
"El panel de Recursos te permite inspeccionar los recursos que se cargan en la página, incluyendo IndexedDB o bases de datos SQL Web, almacenamiento local y de sesión, las galletas (cookies), memoria caché de aplicaciones, imágenes, fuentes y hojas de estilo.",
"Puedes ver y editar toda esta información dentro del navegador.",
"A medida que vayas construyendo aplicaciones web más avanzadas, juega con el panel de recursos y verás cómo te ayudará a entender los requisitos de tu aplicación y de tu página en tiempo real.",
"Revisa documentación más detallada aquí: developers.google.com/web/tools/iterate/manage-data/index"
]
},
{
"id": "56b15f15632298c12f31517e",
@ -195,7 +255,16 @@
]
],
"type": "hike",
"challengeType": 6
"challengeType": 6,
"nameEs": "Herramientas de desarrollo de Chrome: Las auditorías",
"descriptionEs": [
"La herramienta de auditoría te guía para mejorar tu página paso a paso.",
"En este vídeo, se utiliza esta herramienta con un generador de citas aleatorias desarrollado como uno de los proyectos de desarrollo de interfaces.",
"Las sugerencias que se ven, se generan automáticamente con la función de auditoría.",
"Es importante tenerlas en cuenta para contextualizarlos con el resto de conocimiento que tienes de tu sitio.",
"A veces, puede ser que sea lo acertado, pero en ocasiones, por tu situación las sugerencias que da son equivocadas.",
"Usa esta herramienta cuando desees mejorar tu sitio o aplicación, pero no sepas por dónde empezar."
]
},
{
"id": "56b15f15632298c12f31517d",
@ -224,7 +293,17 @@
]
],
"type": "hike",
"challengeType": 6
"challengeType": 6,
"nameEs": "Herramientas de desarrollo de Chrome: Consola",
"descriptionEs": [
"El panel de la consola ofrece dos funciones principales: registro de datos de diagnóstico en el proceso de desarrollo y proporcionar un intérprete de órdenes que puedes utilizar para interactuar con el documento y las Herramientas de desarrollo",
"Al utilizar la consola, puedes ver los datos en bruto o estructurados mediante instrucciones estándar JS y órdenes específicas para la consola.",
"Un ejemplo de datos estructurados sería la información JSON que devuelva una API. Muy útil cuando se construyen las primeras aplicaciones de desarrollo de interfaces para FreeCodeCamp.",
"Debes saber que los mensajes se apilan y que puedes limpiarlos escribiendo <code>clear()</code>. También puedes guardar la bitácora seleccionando 'Preserve Log'. ",
"Hay diferentes órdenes que registrarán en bitácoras de manera diferente, como console.log() para registrar información básica, console.error() y console.warn() para registrar en bitácoras 'información llamativa'.",
"La consola puede realizar un seguimiento de excepciones, que básicamente registra cuando algo sale mal. Puede incluso hacer una pausa en el código durante esas excepciones, función que posiblemente recuerdes de la pestaña 'Fuente'. ",
"Revisa documentación más detallada aquí: developers.google.com/web/tools/javascript/console/"
]
},
{
"id": "56b15f15632298c12f31517c",
@ -244,7 +323,14 @@
]
],
"type": "hike",
"challengeType": 6
"challengeType": 6,
"nameEs": "Herramientas de desarrollo de Chrome: Resumen",
"descriptionEs": [
", Las herramientas de desarrollo de Chrome son impresionantes, y cuanto más te puedas sumergir y tratar de utilizarlas, más rápido aumentará tu nivel. ",
", Utiliza la documentación, incluso si nunca has leído documentación antes: developers.google.com/web/tools/chrome-devtools/ ",
", Una vez que comiences a sentirte cómodo en una pestaña, rétate aprendiendo a usar una diferente. Trabajar eficazmente con todas las pestañas te servirá exponencialmente más que pegarte en tu zona de confort."
]
}
]
}

95
seed/challenges/04-video-challenges/jslingo.json
View File

@ -29,7 +29,16 @@
]
],
"type": "hike",
"challengeType": 6
"challengeType": 6,
"nameEs": "JavaScript Lingo: MDN y Documentación",
"descriptionEs": [
"Esta es una introducción básica a MDN y el concepto de la documentación.",
"MDN, Mozilla Developer Network, es una fantástica colaboración de fuentes abiertas que documenta no sólo JavaScript, sino muchos otros lenguajes y temas. Si no has oído hablar de ellos, deberías darles un vistazo ahora. Personalmente obtengo mucha información de developer.mozilla.org/en-US/docs/Web/JavaScript ",
"Cuando digo documentación, estoy hablando acerca de la información que se proporciona sobre el producto a sus usuarios. La documentación de MDN no necesariamente está escrita por la gente detrás de JS. Brendan Eich creó JS en 1995, pero hoy en día el proyecto continúa creciendo gracias a un esfuerzo comunitario. ",
"A medida que continúes aprendiendo JavaScript, jQuery, y prácticamente cualquier otro lenguaje o servicio para desarrollo o programación, la documentación será tu amiga.",
"Cuanto más rápido te sientas cómodo leyendo y referenciando documentación, más rápido crecerás como desarrollador.",
"Estos vídeos no van a enseñarte JavaScript - te presentan términos y conceptos que serán valiosos a medida que continúes practicando y aprendiendo."
]
},
{
"id": "56b15f15632298c12f31518d",
@ -55,7 +64,14 @@
]
],
"type": "hike",
"challengeType": 6
"challengeType": 6,
"nameEs": "JavaScript Lingo: Tipos de valores",
"descriptionEs": [
"Aprende sobre los tres tipos más básicos de valores: Booleanos, cadenas y números",
"Un booleano es un valor <code>true</code> (verdadero) o <code>false</code> (falso). Estas palabras son especiales y reservadas. No puedes nombrar a una variable como \"true\", porque esa palabra es ya universal como un valor lógico (así como lo es \"false\"). ",
"Una cadena es un conjunto de caracteres que se establecen entre apóstrofes (') o entre comillas (\"). Una cadena puede ser \"true\", siempre y cuando sea con comillas o con apóstrofes. ",
"Los números se explican por sí mismos - un número es un valor que se compone sólo de dígitos, aunque también puede contener un decimal o un signo negativo."
]
},
{
"id": "56b15f15632298c12f31518b",
@ -84,7 +100,16 @@
]
],
"type": "hike",
"challengeType": 6
"challengeType": 6,
"nameEs": "JavaScript Lingo: Variables y capitalizaciónCamello",
"descriptionEs": [
"Vamos a cubrir lo que constituye una variable, y el razonamiento detrás de la capitalizaciónCamello (<em>camelCase</em>).",
"Una variable, también conocida como una 'var', es el nombre o el espacio para un booleano, una cadena, un número, u otra pieza de información estática.",
"Puedes usar las Herramientas de desarrollo de Google para inspeccionar la página principal de FreeCodeCamp y buscar algunas variables.",
"Tu 'declaras' variables por primera vez con <code>var</code> en frente de ella, pero después puedes referenciarla más adelante en tu programa.",
"capitalizaciónCamello es una forma en la que juntas varias palabras y aún así las mantienes legibles. La primera letra de la primera palabra va en minúsculas al igual que el resto de la primera palabra, pero la primera letra de cada palabra que siga se escribe en mayúsculas. No hay espacios. Ejemplos: brianaAmaSusMascotas, laMejorComidaEsElQueso, y valeLaPenaAprenderProgramacion.",
"Al asignar un nombre de variable, usa capitalizaciónCamello. Además, trata de mantener los nombres descriptivos y cortos para que los demás (¡e incluso tu!) puedan entender a lo que se refiere la variable simplemente por el nombre."
]
},
{
"id": "56b15f15632298c12f31518a",
@ -112,7 +137,16 @@
]
],
"type": "hike",
"challengeType": 6
"challengeType": 6,
"nameEs": "JavaScript Lingo: Vectores y objetos",
"descriptionEs": [
"Si desea almacenar más de una pieza de información en una variable, puedes hacerlo mediante la creación de un vector o de un objeto.",
"** Exención de responsabilidad: Los objetos de JS no son exactamente lo mismo que los objetos en otros lenguajes. Vamos a discutir aquí objetos con respecto a JS. ",
"Los vectores son conjuntos de valores entre [corchetes]. Los valores se separan con comas. Cada valor puede ser booleano, cadena, número, o incluso otro vector. A esto último le llamamos vector anidado. A un vector compuesto por vectores de la misma longitud le llamamos matriz. ",
"Los objetos son un tipo de datos que pueden verse o comportarse como un vector, en la medida que se trata de más valores almacenados en una variable de una manera organizada. Oirás que un objeto se puede representar en JSON, y con frecuencia cuando haces llamadas a la API de algunos sitios (para obtener información que necesitas mostrar en tu propia página) está será devuelta en JSON. ",
"Un ejemplo de la notación de objetos es: <code>var obj = { 'nombre': 'Briana', 'comida': 'queso', 'perro': 'Maurice'};</code>",
"Fíjate que un objeto se encierra entre llaves { ... }, que los diferentes atributos se separan por comas, que cada atributo consta de una palabra llave y de un valor. Por ejemplo son llaves 'nombre', 'comida' y 'perro' y sus respectivos valores son 'Briana', 'queso' y 'Maurice'. En este ejmplo todos los valores fueron cadenas, aunque también son válidos booleanos, números y otros tipos de datos."
]
},
{
"id": "56b15f15632298c12f315189",
@ -138,7 +172,13 @@
]
],
"type": "hike",
"challengeType": 6
"challengeType": 6,
"nameEs": "JavaScript Lingo: Encontrando e indexando valores en vectores",
"descriptionEs": [
"Hay muchas razones por las que puedes necesitar acceder a una determinada pieza de información al interior de un conjunto más amplio, lo cual haces referenciando su índice.",
"No vamos a entrar en la sintaxis, pero debes saber que el primer elemento en un vector tiene en realidad el índice 0.",
"Esto también aplica para cadenas y objetos. Todos estos índices comienzan en 0, por lo que si en tu programa usas <code>miVector[2]</code>, realmente vas a obtener la tercera pieza de información del vector <code>miVector</code>."
]
},
{
"id": "56b15f15632298c12f315188",
@ -167,7 +207,17 @@
]
],
"type": "hike",
"challengeType": 6
"challengeType": 6,
"nameEs": "JavaScript Lingo: Manipulación de los datos",
"descriptionEs": [
"Métodos y funciones son formas con las que puedes modificar variables u otros conjuntos de información.",
"Los métodos están integrados en JavaScript, y te familiarizarás con estos cuando realices los desafíos sobre algoritmos.",
"Me gustaría sugerirte dar un vistazo a MDN (Mozilla Developer Network que discutimos en el primer video) para que te familiarices con la cantidad y el potencial general de los métodos que existen. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Methods_Index",
"Los ejemplos incluyen <code>.split (' ')</code>, que convertirá una cadena en un vector y puede hacerlo de muchas maneras diferentes. Los métodos son de gran alcance - muchas veces cuando quieres que tu programa haga algo, ya habrá un método para eso.",
"Las funciones, al igual que las variables, son algo que tu defines y creas.",
"Durante tu práctica con algoritmos en FreeCodeCamp, vas a crear funciones que reciben una determinada pieza de información y la manipulan de la forma que elijas.",
"Vas a estar más familiarizado con la sintaxis, pero por ahora, sólo recuerda que con los métodos y funciones puedes hacer casi cualquier cosa con tu código."
]
},
{
"id": "56b15f15632298c12f315187",
@ -196,7 +246,17 @@
]
],
"type": "hike",
"challengeType": 6
"challengeType": 6,
"nameEs": "JavaScript Lingo: Matemáticas",
"descriptionEs": [
"Hay un objeto estático de nombre 'Math' en JS con muchos propiedades y métodos incluidos.",
"Vas a querer investigar más de este cuando manipules números. Consulta la documentación de MDN antes de escribir tus propias funciones, pues ya podrían estar definidas allí. ",
"Los ejemplos incluyen <code>Math.random()</code> que devolverá un número aleatorio en un rango y <code>Math.round()</code> que redondeará el número decimal que reciba al entero más cercano.",
"Yo utilicé <code>Math.random()</code> cuando construí el generador de citas aleatorias como proyecto de desarrollo de interfaces en FreeCodeCamp.",
"Cuando trabajes con números, también debes estar consciente de que JS tiene un atributo interesante llamado 'formato de coma flotante'.",
"Dependiendo de la cantidad de números, su tamaño y la cantidad de cálculos, JS puede devolver un número que es inexacto en 0,00004.",
"Hay maneras de evitar esto, y en general no plantean problemas, pero es algo que debes tener en cuenta si te encuentras con algunos problemas que parecen no tienen sentido."
]
},
{
"id": "56b15f15632298c12f315186",
@ -222,7 +282,13 @@
]
],
"type": "hike",
"challengeType": 6
"challengeType": 6,
"nameEs": "JavaScript Lingo: Ciclos",
"descriptionEs": [
"Si hay un conjunto de valores (vamos a utilizar un vector en este ejemplo, pero no tiene que ser así) y deseas realizar la misma operación a cada valor del conjunto, puedes usar algo llamado ciclo. ",
"Los ciclos tienen una sintaxis compleja a la que inicialmente es difícil acostumbrarse, pero una vez que la entiendas, son de gran utilidad. Yo usé ciclos en muchas de mis soluciones. ",
"No es necesario que entiendas todo aquí - sólo que sepas que existen ciclos cuando necesitas recorrer un conjunto de datos y que pueden reducir la cantidad de código que debes escribir."
]
},
{
"id": "56b15f15632298c12f315185",
@ -251,7 +317,18 @@
]
],
"type": "hike",
"challengeType": 6
"challengeType": 6,
"id": "56b15f15632298c12f315185",
"nameEs": "JavaScript Lingo: expresiones regulares (RegExp)",
"descriptionEs": [
"Las RegExp no siguen el formato del resto de JS, y pueden requerir una curva de aprendizaje.",
"Las epresiones regulares (abreviado <em>RegExp</em>) también pueden ser una herramienta muy útil y eficiente.",
"Usando RegExp, puedes hacer coincidir, reemplazar, buscar y dividir una cadena, uno de los tipos más difíciles de manipular.",
"Al igual que con todos los otros videos, no vamos a entrar en detalles, pero quiero mostrar algunos ejemplos donde las RegExp son útiles.",
"Si quisieras crear una página de registro que verifique las contraseñas para que contengan al menos un número y una letra mayúscula, puedes usar expresiones regulares.",
"Si quieres asegurarte de que las fechas introducidas en una página sean todas fechas válidas en el futuro, puedes usar RegExp.",
"Si bien hay infinitas maneras de utilizar RegExp, muchas de estas incluyen validaciones o ediciones automáticas de información."
]
}
]
}

2
server/views/challenges/showHTML.jade
View File

@ -17,7 +17,7 @@ block content
hr
.challenge-instructions
for sentence in description
if (/blockquote|h4|table/.test(sentence))
if (/\<blockquote|\<h4|\<table/.test(sentence))
!=sentence
else
p.wrappable!= sentence

8
server/views/resources/nonprofits.jade
View File

@ -14,20 +14,20 @@ block content
.spacer
hr
.spacer
h2 Nonprofits we've helped:
h2 What nonprofit leaders are saying:
.spacer
.row
.col-xs-12.col-sm-12.col-md-4
img.img-responsive.testimonial-image.img-center(src="http://i.imgur.com/ZHnFFN5.jpg", alt="Ewa's testimonial image")
p.nonprofit-testimonial-copy Thank you so much for your contribution of your time and your technical expertise. With your valuable contribution we were able to improve all of our systems and processes as part of our Wonder Women Eastern Indonesia program, and make sure that even more life changing technologies get to where they are needed most.
p.nonprofit-testimonial-copy With Free Code Camp's valuable contribution, we were able to improve all of our systems and processes as part of our Wonder Women Eastern Indonesia program, and make sure that even more life changing technologies get to where they are needed most.
h3 - Ewa Wojkowska with Kopernik
.col-xs-12.col-sm-12.col-md-4
img.img-responsive.testimonial-image.img-center(src="http://i.imgur.com/KHF8O2i.jpg", alt="Jennifer's testimonial image")
p.nonprofit-testimonial-copy We have been blown away by the professional quality of the work that has been produced by the campers working on our projects. Not only are we getting an excellent product that is moving our organizational goals forward, but participating in the weekly calls has helped us clarify our own thinking about the way we approach our work. Free Code Camp has been an invaluable partner and we are grateful for their support.
p.nonprofit-testimonial-copy We have been blown away by the professional quality of the work that has been produced by the campers working on our projects. Free Code Camp has been an invaluable partner and we are grateful for their support.
h3 - Jennifer McDowell with Child First Authority
.col-xs-12.col-sm-12.col-md-4
img.img-responsive.testimonial-image.img-center(src="http://i.imgur.com/9VknVe3.jpg", alt="Stephanie's testimonial image")
p.nonprofit-testimonial-copy Having custom code developed can be very pricy, and often out of reach for nonprofits. Enter: Free Code Camp! We had the pleasure to work with two very talented campers, Jonathan Lucas and David Alvarado, who went above and beyond to create a web-based app for us. I would highly recommend that nonprofits apply to Free Code Camp with their custom solution needs!
p.nonprofit-testimonial-copy We had the pleasure to work with two very talented campers who went above and beyond to create a web-based app for us. I would highly recommend that nonprofits apply to Free Code Camp with their custom solution needs!
h3 - Stephanie McAllister with Timeraiser
.spacer
hr

2
server/views/resources/terms-of-service.jade
View File

@ -11,7 +11,7 @@ block content
<h4>1. <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a>.</h4>
<ul>
<li><strong>Your <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a> Account and Website.</strong> If you create a website on <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a>, you are responsible for maintaining the security of your account and website, and you are fully responsible for all activities that occur under the account and any other actions taken in connection with the website. You must immediately notify Free Code Camp of any unauthorized uses of your website, your account, or any other breaches of security. Free Code Camp will not be liable for any acts or omissions by you, including any damages of any kind incurred as a result of such acts or omissions.</li>
<li><strong>Responsibility of Contributors.</strong> If you operate a website, comment on a website, post material to <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a>, post links on <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a>, or otherwise make (or allow any third party to make) material available (any such material, “Content”), you are entirely responsible for the content of, and any harm resulting from, that Content or your conduct. That is the case regardless of what form the Content takes, which includes, but is not limited to text, photo, video, audio, or code. By using <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a>, you represent and warrant that your Content and conduct do not violate these terms or the <a href="http://FreeCodeCamp.com/code-of-conduct/">Code of Conduct</a>. By submitting Content to Free Code Camp for inclusion on your website, you grant Free Code Camp a world-wide, royalty-free, and non-exclusive license to reproduce, modify, adapt and publish the Content solely for the purpose of displaying, distributing, and promoting your website. This license allows Free Code Camp to make publicly-posted content available to third parties selected by Free Code Camp (through the Free Code Camp Firehose, for example) so that these third parties can analyze and distribute (but not publicly display) your content through their services. You also give other <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a> users permission to share your Content on other <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a> websites and add their own Content to it (aka to reblog your Content), so long as they use only a portion of your post and they give you credit as the original author by linking back to your website (the <a href="http://en.support.FreeCodeCamp.com/reblogs">reblogging function</a> on <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a> does this automatically!). If you delete Content, Free Code Camp will use reasonable efforts to remove it from <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a>, but you acknowledge that caching or references to the Content may not be made immediately unavailable. Without limiting any of those representations or warranties, Free Code Camp has the right (though not the obligation) to, in Free Code Camp’s sole discretion, (i) refuse or remove any content that, in Free Code Camp’s reasonable opinion, violates any Free Code Camp policy or is in any way harmful or objectionable, or (ii) terminate or deny access to and use of <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a> to any individual or entity for any reason. Free Code Camp will have no obligation to provide a refund of any amounts previously paid.</li>
<li><strong>Responsibility of Contributors.</strong> If you operate a website, comment on a website, post material to <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a>, post links on <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a>, or otherwise make (or allow any third party to make) material available (any such material, “Content”), you are entirely responsible for the content of, and any harm resulting from, that Content or your conduct. That is the case regardless of what form the Content takes, which includes, but is not limited to text, photo, video, audio, or code. By using <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a>, you represent and warrant that your Content and conduct do not violate these terms or the <a href="http://FreeCodeCamp.com/code-of-conduct/">Code of Conduct</a>. By submitting Content to Free Code Camp for inclusion on your website, you grant Free Code Camp a world-wide, royalty-free, and non-exclusive license to reproduce, modify, adapt and publish the Content solely for the purpose of displaying, distributing, and promoting your website. This license allows Free Code Camp to make publicly-posted content available to third parties selected by Free Code Camp (through the Free Code Camp Firehose, for example) so that these third parties can analyze and distribute (but not publicly display) your content through their services. You also give other <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a> users permission to share your Content on other <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a> websites and add their own Content to it (aka to reblog your Content), so long as they use only a portion of your post and they give you credit as the original author by linking back to your website. If you delete Content, Free Code Camp will use reasonable efforts to remove it from <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a>, but you acknowledge that caching or references to the Content may not be made immediately unavailable. Without limiting any of those representations or warranties, Free Code Camp has the right (though not the obligation) to, in Free Code Camp’s sole discretion, (i) refuse or remove any content that, in Free Code Camp’s reasonable opinion, violates any Free Code Camp policy or is in any way harmful or objectionable, or (ii) terminate or deny access to and use of <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a> to any individual or entity for any reason. Free Code Camp will have no obligation to provide a refund of any amounts previously paid.</li>
<li><strong>Attribution.</strong> Free Code Camp reserves the right to display attribution links such as ‘Website at <a href="http://FreeCodeCamp.com">FreeCodeCamp.com</a>,’ theme author, and font attribution in your website footer or toolbar.</li>
</ul>
<h4><a id="4_Responsibility_of_Visitors_49"></a>4. Responsibility of Visitors.</h4>