start updating HTML challenge styling
This commit is contained in:
Quincy Larson
@ -9,7 +9,7 @@
|
||||
"description": [
|
||||
"Welcome to Free Code Camp's first coding challenge!",
|
||||
"You can edit <code>code</code> in your <code>text editor</code>, which we've embedded into this web page.",
|
||||
"Do you see the code in your text editor that says <code><h1>Hello</h1></code>? That's an HTML <code>element</code>.",
|
||||
"Do you see the code in your text editor that says <code><h1>Hello</h1></code>? That's an HTML <code>element</code>",
|
||||
"Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>. Opening tags look like this: <code><h1></code>. Closing tags look like this: <code></h1></code>. Note that the only difference between opening tags and closing tags is that closing tags have a slash after their opening angle bracket.",
|
||||
"Once you've completed each challenge, and all its tests are passing, the \"Go to my next challenge\" button will become enabled. Click it - or press control and enter at the same time - to advance to the next challenge.",
|
||||
"To enable the \"Go to my next challenge\" button on this exercise, change your <code>h1</code> tag's text to say \"Hello World\" instead of \"Hello\"."
|
||||
@ -45,7 +45,7 @@
|
||||
"Willkommen bei der ersten Programmier-Challenge von Free Code Camp! Klicke auf den folgenden Button für weitere Instruktionen.",
|
||||
"Sehr gut. Jetzt kannst du den Rest der Instruktionen für diese Challenge lesen.",
|
||||
"Mithilfe des eingebauten <code>Text Editors</code> kannst du den <code>Code</code> bearbeiten.",
|
||||
"Siehst du den Code <code><h1>Hallo</h1></code> im Editor? Das ist ein HTML <code>Element</code>.",
|
||||
"Siehst du den Code <code><h1>Hallo</h1></code> im Editor? Das ist ein HTML <code>Element</code>",
|
||||
"Die meisten HTML Elemente haben eine <code>öffnende Auszeichnung (Tag)</code> und eine <code>sich schließende</code>. Öffnende Tags sehen so aus: <code><h1></code>. Schließende Tags so: <code></h1></code>. Beachte, dass der einzige Unterschied zwischen öffnenden und schließenden Tags in dem Slash besteht, das bei schließenden Tags auf die sich öffnende spitze Klammer folgt.",
|
||||
"Sobald du eine Challenge abgeschlossen hast und alle Tests erfolgreich sind, wird der Button \"Go to my next challenge\" aktiv. Klicke auf diesen – oder drücke Steuerung (Control) und gleichzeitig Enter – um zur nächsten Challenge zu gehen.",
|
||||
"Um den Button \"Go to my next challenge\" dieser Lektion zu aktivieren, ändere den Inhalt des <code>h1</code> Tags von \"Hello\" zu \"Hello World\"."
|
||||
@ -57,10 +57,10 @@
|
||||
"description": [
|
||||
"Over the next few challenges, we'll build an HTML5 app that will look something like this:",
|
||||
"<a href=\"http://i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/jOc1JF1.png\" title=\"Click to enlarge\" alt=\"A screen shot of our finished Cat Photo App\"></a>",
|
||||
"Add an <code>h2</code> tag that says \"CatPhotoApp\" to create a second HTML <code>element</code> below your \"Hello World\" <code>h1</code> element.",
|
||||
"The <code>h2</code> element you enter will create an <code>h2</code> element on the website.",
|
||||
"This element tells the browser how to render the text that it contains.",
|
||||
"<code>h2</code> elements are slightly smaller than <code>h1</code> elements. There are also <code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code> elements."
|
||||
"<code>h2</code> elements are slightly smaller than <code>h1</code> elements. There are also <code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code> elements.",
|
||||
"Add an <code>h2</code> tag that says \"CatPhotoApp\" to create a second HTML <code>element</code> below your \"Hello World\" <code>h1</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert(($(\"h2\").length > 0), 'Create an <code>h2</code> element.')",
|
||||
@ -84,7 +84,7 @@
|
||||
"Agrega una etiqueta <code>h2</code> que diga \"CatPhotoApp\" para crear un segundo <code>elemento</code> HTML debajo de tu elemento <code>h1</code> \"Hello World\".",
|
||||
"El elemento h2 que ingreses creará un elemento h2 en el sitio web.",
|
||||
"Este elemento le dice al navegador cómo mostrar el texto que contiene.",
|
||||
"Los elementos <code>h2</code> son ligeramente más pequeños que los elementos <code>h1</code>. También hay elementos <code>h3</code>, <code>h4</code>, <code>h5</code> y <code>h6</code>."
|
||||
"Los elementos <code>h2</code> son ligeramente más pequeños que los elementos <code>h1</code>. También hay elementos <code>h3</code>, <code>h4</code>, <code>h5</code> y <code>h6</code>"
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": [],
|
||||
@ -100,9 +100,9 @@
|
||||
"id": "bad87fee1348bd9aedf08801",
|
||||
"title": "Inform with the Paragraph Element",
|
||||
"description": [
|
||||
"Create a <code>p</code> element below your <code>h2</code> element, and give it the text \"Hello Paragraph\".",
|
||||
"<code>p</code> elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".",
|
||||
"You can create a <code>p</code> element like so: <code><p>I'm a p tag!</p></code>."
|
||||
"You can create a <code>p</code> element like so: <code><p>I'm a p tag!</p></code>",
|
||||
"Create a <code>p</code> element below your <code>h2</code> element, and give it the text \"Hello Paragraph\"."
|
||||
],
|
||||
"tests": [
|
||||
"assert(($(\"p\").length > 0), 'Create a <code>p</code> element.')",
|
||||
@ -123,9 +123,9 @@
|
||||
"descriptionRu": [],
|
||||
"nameEs": "Waypoint: Informa con el Elemento Párrafo",
|
||||
"descriptionEs": [
|
||||
"Crea un elemento párrafo debajo de tu elemento h2, y dale el texto \"Hello Paragraph\". Apenas escribas la etiqueta de apertura <code><p></code>, una de nuestras pruebas pasarán (ya que ésta es HTML válido). Asegúrate de cerrar el elemento agregando la etiqueta de cierre <code></p></code>.",
|
||||
"Crea un elemento párrafo debajo de tu elemento h2, y dale el texto \"Hello Paragraph\". Apenas escribas la etiqueta de apertura <code><p></code>, una de nuestras pruebas pasarán (ya que ésta es HTML válido). Asegúrate de cerrar el elemento agregando la etiqueta de cierre <code></p></code>",
|
||||
"Los elementos párrafo son los principales elementos para los párrafos de texto en tamaño normal en sitios web.",
|
||||
"Tú puedes crear un elemento párrafo como éste: <code><p>I'm a p tag!</p></code>."
|
||||
"Tú puedes crear un elemento párrafo como éste: <code><p>I'm a p tag!</p></code>"
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": [],
|
||||
@ -140,10 +140,10 @@
|
||||
"id": "bad87fee1348bd9aedf08802",
|
||||
"title": "Uncomment HTML",
|
||||
"description": [
|
||||
"Uncomment your <code>h1</code>, <code>h2</code> and <code>p</code> elements.",
|
||||
"Commenting is a way that you can leave comments within your code without affecting the code itself.",
|
||||
"Commenting is also a convenient way to make code inactive without having to delete it entirely.",
|
||||
"You can start a comment with <code><!--</code> and end a comment with <code>--></code>."
|
||||
"You can start a comment with <code><!--</code> and end a comment with <code>--></code>",
|
||||
"Uncomment your <code>h1</code>, <code>h2</code> and <code>p</code> elements."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h1\").length > 0, 'Make your <code>h1</code> element visible on your page by uncommenting it.')",
|
||||
@ -170,10 +170,10 @@
|
||||
"descriptionRu": [],
|
||||
"nameEs": "Waypoint: Quitar comentarios HTML",
|
||||
"descriptionEs": [
|
||||
"Quitar el comentario a los elementos <code>h1</code>, <code>h2</code> y <code>p</code>.",
|
||||
"Quitar el comentario a los elementos <code>h1</code>, <code>h2</code> y <code>p</code>",
|
||||
"Crear comentarios es una forma en la que puedes dejar mensajes dentro de tu código sin afectar el resultado.",
|
||||
"Agregar comentarios es también una forma conveniente de desactivar tu código sin tener que borrarlo por completo.",
|
||||
"Puedes comenzar un comentario con <code><!--</code> y terminar de comentar con <code>--></code>."
|
||||
"Puedes comenzar un comentario con <code><!--</code> y terminar de comentar con <code>--></code>"
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": [],
|
||||
@ -189,9 +189,9 @@
|
||||
"id": "bad87fee1348bd9aedf08804",
|
||||
"title": "Comment out HTML",
|
||||
"description": [
|
||||
"Comment out your <code>h1</code> element and your <code>p</code> element, but leave your <code>h2</code> element uncommented.",
|
||||
"Remember that in order to start a comment, you need to use <code><!--</code> and to end a comment, you need to use <code>--></code>.",
|
||||
"Here you'll need to end the comment before your <code>h2</code> element begins."
|
||||
"Remember that in order to start a comment, you need to use <code><!--</code> and to end a comment, you need to use <code>--></code>",
|
||||
"Here you'll need to end the comment before your <code>h2</code> element begins.",
|
||||
"Comment out your <code>h1</code> element and your <code>p</code> element, but leave your <code>h2</code> element uncommented."
|
||||
],
|
||||
"tests": [
|
||||
"assert(($(\"h1\").length === 0), 'Comment out your <code>h1</code> element so that it is not visible on your page.')",
|
||||
@ -218,8 +218,8 @@
|
||||
"descriptionRu": [],
|
||||
"nameEs": "Waypoint: Comenta en HTML",
|
||||
"descriptionEs": [
|
||||
"Comenta el elemento <code>h1</code> y el elemento <code>p</code>, pero deja sin comentar el elemento <code>h2</code>.",
|
||||
"Recuerda que para comenzar un comentario, necesitas usar <code><!--</code> y para terminar un comentario, necesitas usar <code>--></code>.",
|
||||
"Comenta el elemento <code>h1</code> y el elemento <code>p</code>, pero deja sin comentar el elemento <code>h2</code>",
|
||||
"Recuerda que para comenzar un comentario, necesitas usar <code><!--</code> y para terminar un comentario, necesitas usar <code>--></code>",
|
||||
"Aquí necesitarás terminar el comentario antes que comience el elemento h2."
|
||||
],
|
||||
"namePt": "",
|
||||
@ -237,8 +237,8 @@
|
||||
"description": [
|
||||
"Web developers traditionally use <code>lorem ipsum text</code> as placeholder text. It's called <code>lorem ipsum text</code> because those are the first two words of a famous passage by Cicero of Ancient Rome.",
|
||||
"<code>lorem ipsum text</code> has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
|
||||
"Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called <code>kitty ipsum text</code>.",
|
||||
"Replace the text inside your <code>p</code> element with the first few words of this <code>kitty ipsum text</code>: <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>"
|
||||
"Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called <code>kitty ipsum text</code>",
|
||||
"Replace the text inside your <code>p</code> element with the first few words of this kitty ipsum text: <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>"
|
||||
],
|
||||
"tests": [
|
||||
"assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($(\"p\").text()), 'Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.')"
|
||||
@ -260,7 +260,7 @@
|
||||
"descriptionRu": [],
|
||||
"nameEs": "Waypoint: Llena espacios con texto de relleno",
|
||||
"descriptionEs": [
|
||||
"Cambia el texto en el elemento <code>p</code> para usar las primeras palabras del texto <code>Kitty Ipsum</code>.",
|
||||
"Cambia el texto en el elemento <code>p</code> para usar las primeras palabras del texto <code>Kitty Ipsum</code>",
|
||||
"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 <a href=πhttp://kittyipsum.com/\">Kitty Ipsum</a>!",
|
||||
@ -281,9 +281,9 @@
|
||||
"id": "bad87fed1348bd9aedf08833",
|
||||
"title": "Delete HTML Elements",
|
||||
"description": [
|
||||
"Delete your <code>h1</code> element so we can simplify our view.",
|
||||
"Our phone doesn't have much vertical space.",
|
||||
"Let's remove the unnecessary elements so we can start building our CatPhotoApp."
|
||||
"Let's remove the unnecessary elements so we can start building our CatPhotoApp.",
|
||||
"Delete your <code>h1</code> element so we can simplify our view."
|
||||
],
|
||||
"tests": [
|
||||
"assert(($(\"h1\").length == 0), 'Delete your <code>h1</code> element.')",
|
||||
@ -324,10 +324,11 @@
|
||||
"id": "bad87fee1348bd9aedf08803",
|
||||
"title": "Change the Color of Text",
|
||||
"description": [
|
||||
"Change your <code>h2</code> element's style so that its text color is red.",
|
||||
"We can do this by changing the \"style\" of your <code>h2</code> element.",
|
||||
"Now let's change the color of some of our text.",
|
||||
"We can do this by changing the <code>style</code> of your <code>h2</code> element.",
|
||||
"The style that is responsible for the color of an element's text is the \"color\" style.",
|
||||
"Here's how you would set your <code>h2</code> element's text color to blue: <code><h2 style=\"color: blue\">CatPhotoApp</h2></code>."
|
||||
"Here's how you would set your <code>h2</code> element's text color to blue: <code><h2 style=\"color: blue\">CatPhotoApp</h2></code>",
|
||||
"Change your <code>h2</code> element's style so that its text color is red."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.')"
|
||||
@ -348,9 +349,9 @@
|
||||
"nameEs": "Waypoint: Cambia el color del texto",
|
||||
"descriptionEs": [
|
||||
"Cambia el estilo del elemento <code>h2</code> de manera que el color de su texto sea rojo.",
|
||||
"Podemos hacer esto por medio de cambiar el <code>estilo</code> del elemento <code>h2</code>.",
|
||||
"Podemos hacer esto por medio de cambiar el <code>estilo</code> del elemento <code>h2</code>",
|
||||
"El estilo responsable del color de texto de un elemento es el estilo \"color\".",
|
||||
"Así es como podrías volver el color de texto de tu elemento <code>h2</code> en azul: <code><h2 style=\"color: blue\">CatPhotoApp</h2></code>."
|
||||
"Así es como podrías volver el color de texto de tu elemento <code>h2</code> en azul: <code><h2 style=\"color: blue\">CatPhotoApp</h2></code>"
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": [],
|
||||
@ -358,20 +359,23 @@
|
||||
"descriptionDe": [
|
||||
"Ändere den Style des <code>h2</code> Elements, damit die Textfarbe Rot ist.",
|
||||
"Wir können das bewerkstelligen, indem wir den \"style\" des <code>h2</code> Elements ändern.",
|
||||
"So könntest du die Textfarbe des <code>h2</code> Elements in Blau ändern: <code><h2 style=\"color: blue\">CatPhotoApp</h2></code>."
|
||||
"So könntest du die Textfarbe des <code>h2</code> Elements in Blau ändern: <code><h2 style=\"color: blue\">CatPhotoApp</h2></code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedf08805",
|
||||
"title": "Use CSS Selectors to Style Elements",
|
||||
"description": [
|
||||
"Delete your <code>h2</code> element's style attribute and instead create a CSS <code>style</code> element. Add the necessary CSS to turn all <code>h2</code> elements blue.",
|
||||
"With CSS, there are hundreds of CSS <code>properties</code> that you can use to change the way an element looks on your page.",
|
||||
"When you entered <code><h2 style=\"color: red\">CatPhotoApp</h2></code>, you were giving that individual <code>h2</code> element an <code>inline style</code>.",
|
||||
"That's one way to add style to an element, but a better way is by using <code>CSS</code>, which stands for <code>Cascading Style Sheets</code>.",
|
||||
"At the top of your code, create a <code>style</code> element like this: <code><style></style></code>.",
|
||||
"Inside that style element, you can create a <code>CSS selector</code> for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, your style element would look like this: <code><style>h2 {color: red;}</style></code>.",
|
||||
"Note that it's important to have both opening and closing curly braces (<code>{</code> and <code>}</code>) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of your element's styles."
|
||||
"When you entered <code><h2 style=\"color: red\">CatPhotoApp</h2></code>, you were giving that individual <code>h2</code> element an <code>inline style</code>",
|
||||
"That's one way to add style to an element, but a better way is by using <code>CSS</code>, which stands for <code>Cascading Style Sheets</code>",
|
||||
"At the top of your code, create a <code>style</code> element like this: <code><style></style></code>",
|
||||
"Inside that style element, you can create a <code>CSS selector</code> for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, your style element would look like this:",
|
||||
"<code><style></code>",
|
||||
"  <code>h2 {color: red;}</code>",
|
||||
"<code></style></code>",
|
||||
"Note that it's important to have both opening and closing curly braces (<code>{</code> and <code>}</code>) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of your element's styles.",
|
||||
"Delete your <code>h2</code> element's style attribute and instead create a CSS <code>style</code> element. Add the necessary CSS to turn all <code>h2</code> elements blue."
|
||||
],
|
||||
"tests": [
|
||||
"assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your <code>h2</code> element.')",
|
||||
@ -396,10 +400,10 @@
|
||||
"descriptionEs": [
|
||||
"Borra el atributo <code>style</code> de tu elemento <code>h2</code> y escribe el CSS para hacer todos los elementos <code>h2</code> de color azul.",
|
||||
"Con CSS, hay cientos de <code>atributos CSS</code> que puedes usar para cambiar como un elemento se ve en una página web.",
|
||||
"Cuando entraste <code><h2 style=\"color: red\">CatPhotoApp<h2></code>, le estuviste dando a ese elemento h2 en particular 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 una <code>etiqueta style</code> como ésta: <code><style></style></code>.",
|
||||
"Dentro de ese elemento style, puedes crear un <code>selector css</code> para todos los elementos <code>h2</code>. Por ejemplo, si querías que todos los elementos <code>h2</code> sean rojos, tu elemento style se vería así: <code><style>h2 {color: red;}</style></code>.",
|
||||
"Cuando entraste <code><h2 style=\"color: red\">CatPhotoApp<h2></code>, le estuviste dando a ese elemento h2 en particular 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 una <code>etiqueta style</code> como ésta: <code><style></style></code>",
|
||||
"Dentro de ese elemento style, puedes crear un <code>selector css</code> para todos los elementos <code>h2</code>. Por ejemplo, si querías que todos los elementos <code>h2</code> sean rojos, tu elemento style se vería así: <code><style>h2 {color: red;}</style></code>",
|
||||
"Fíjate que es importante tener <code>llaves de apertura y de cierre</code> (<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."
|
||||
],
|
||||
"namePt": "",
|
||||
@ -419,7 +423,6 @@
|
||||
"id": "bad87fee1348bd9aecf08806",
|
||||
"title": "Use a CSS Class to Style an Element",
|
||||
"description": [
|
||||
"Create a CSS class called <code>red-text</code> and apply it to your <code>h2</code> element.",
|
||||
"Classes are reusable styles that can be added to HTML elements.",
|
||||
"Here's an example CSS class declaration:",
|
||||
"<code><style></code>",
|
||||
@ -428,9 +431,10 @@
|
||||
"<code>  }</code>",
|
||||
"<code></style></code>",
|
||||
"You can see that we've created a CSS class called <code>blue-text</code> within the <code><style></code> tag.",
|
||||
"You can apply a class to an HTML element like this: <code><h2 class=\"blue-text\">CatPhotoApp</h2></code>.",
|
||||
"You can apply a class to an HTML element like this: <code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||||
"Note that in your CSS <code>style</code> element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.",
|
||||
"Instead of creating a new <code>style</code> element, try removing the <code>h2</code> style declaration from your existing style element, then replace it with the class declaration for <code>.red-text</code>."
|
||||
"Instead of creating a new <code>style</code> element, try removing the <code>h2</code> style declaration from your existing style element, then replace it with the class declaration for <code>.red-text</code>",
|
||||
"Create a CSS class called <code>red-text</code> and apply it to your <code>h2</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.')",
|
||||
@ -458,12 +462,12 @@
|
||||
"descriptionRu": [],
|
||||
"nameEs": "Waypoint: Utiliza una clase CSS para darle estilo a un elemento",
|
||||
"descriptionEs": [
|
||||
"Crea una clase CSS llamada \"red-text\" y aplicala a tu elemento <code>h2</code>.",
|
||||
"Crea una clase CSS llamada \"red-text\" y aplicala a tu elemento <code>h2</code>",
|
||||
"Las clases son estilos reutilizables que pueden ser añadidos a elementos HTML",
|
||||
"Esta es la anatomía de una clase CSS:",
|
||||
"<img class=\"img-responsive\" alt=\"a diagram of how style tags are composed, which is also described in detail on the following lines.\" src=\"https://www.evernote.com/l/AHSCzZV0l_dDLrqD8r9JsHaBWfEzdN0OpRwB/image.png\">",
|
||||
"Puedes ver que hemos creado una clase CSS llamada \"blue-text\" dentro de la etiqueta <code><style></code>.",
|
||||
"Puedes aplicar una clase a un elemento HTML de esta manera: <code><h2 class=\"blue-text\">CatPhotoApp</h2></code>.",
|
||||
"Puedes ver que hemos creado una clase CSS llamada \"blue-text\" dentro de la etiqueta <code><style></code>",
|
||||
"Puedes aplicar una clase a un elemento HTML de esta manera: <code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||||
"Nota que en el elemento CSS <code>style</code>, las clases deberían comenzar con un punto. En los elementos HTML, las declaraciones de clase, NO deberían comenzar con punto. ",
|
||||
"En vez de de crear un nuevo elemento <code>style</code>, prueba remover la declaración de estilo de <code>h2</code> y reemplazarla por la declaración \"red-text\"."
|
||||
],
|
||||
@ -476,7 +480,7 @@
|
||||
"So sieht eine CSS Klasse aus:",
|
||||
"<img class=\"img-responsive\" alt=\"Ein Beispiel, wie Styles geschrieben werden. Das wird im Detail in den folgenden Zeilen beschrieben.\" src=\"https://www.evernote.com/l/AHSCzZV0l_dDLrqD8r9JsHaBWfEzdN0OpRwB/image.png\">",
|
||||
"Du siehst, dass wir die CSS Klasse \"blue-text\" innerhalb von <code><style></code> geschrieben haben.",
|
||||
"Du kannst eine Klasse folgendermaßen einem HTML Element beifügen: <code><h2 class=\"blue-text\">CatPhotoApp</h2></code>.",
|
||||
"Du kannst eine Klasse folgendermaßen einem HTML Element beifügen: <code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||||
"Beachte, dass Klassen in deinem CSS <code>style</code> Element mit einem Punkt beginngen sollten. In deinen Klassen-Deklarationen von HTML Elementen sollten diese nicht mit einem Punkt beginnen.",
|
||||
"Anstatt ein neues <code>style</code> Element zu erstellen, versuche die <code>h2</code> Style-Deklaration von deinem bereits bestehenden Style Element zu entfernen und sie mit der Klassen-Deklaration \".red-text\" zu ersetzen."
|
||||
]
|
||||
@ -485,15 +489,20 @@
|
||||
"id": "bad87fee1348bd9aefe08806",
|
||||
"title": "Style Multiple Elements with a CSS Class",
|
||||
"description": [
|
||||
"Apply the <code>red-text</code> class to your <code>h2</code> and <code>p</code> elements.",
|
||||
"Remember that you can attach classes to HTML elements by using <code>class=\"your-class-here\"</code> within the relevant element's opening tag.",
|
||||
"Remember that CSS class selectors require a period at the beginning like this: <code>.blue-text { color: blue; }</code>, but that class declarations don't use a period, like this: <code><h2 class=\"blue-text\">CatPhotoApp<h2></code>."
|
||||
"Remember that CSS class selectors require a period at the beginning like this:",
|
||||
"<code>.blue-text {</code>",
|
||||
"<code>  color: blue;</code>",
|
||||
"<code>}</code>",
|
||||
"But also remember that class declarations don't use a period, like this:",
|
||||
"<code><h2 class=\"blue-text\">CatPhotoApp<h2></code>",
|
||||
"Apply the <code>red-text</code> class to your <code>h2</code> and <code>p</code> elements."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.')",
|
||||
"assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.')",
|
||||
"assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>')",
|
||||
"assert($(\"p\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>p</code> element should be red.')",
|
||||
"assert($(\"p\").hasClass(\"red-text\"), 'Your <code>p</code> element should have the class <code>red-text</code>.')"
|
||||
"assert($(\"p\").hasClass(\"red-text\"), 'Your <code>p</code> element should have the class <code>red-text</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -516,9 +525,9 @@
|
||||
"descriptionRu": [],
|
||||
"nameEs": "Waypoint: Estila multiples elementos con una clase CSS",
|
||||
"descriptionEs": [
|
||||
"Aplica la clase \"red-text\" a tus elementos <code>h2</code> y <code>p</code>.",
|
||||
"Aplica la clase \"red-text\" a tus elementos <code>h2</code> y <code>p</code>",
|
||||
"Recuerda que puedes agregar clases a elementos HTML utilizando <code>class=\"your-class-here\"</code> dentro de la tag de entrada del mismo.",
|
||||
"Recuerda que los selectores CSS requieren un punto al principio: <code>.blue-text { color: blue; }</code>, pero que las declaraciones de clase NO llevan punto: <code><h2 class=\"blue-text\">CatPhotoApp<h2></code>."
|
||||
"Recuerda que los selectores CSS requieren un punto al principio: <code>.blue-text { color: blue; }</code>, pero que las declaraciones de clase NO llevan punto: <code><h2 class=\"blue-text\">CatPhotoApp<h2></code>"
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": [],
|
||||
@ -526,17 +535,20 @@
|
||||
"descriptionDe": [
|
||||
"Füge den <code>h2</code> und <code>p</code> Elementen die Klasse \"red-text\" hinzu.",
|
||||
"Du kannst Klassen zu HTML Elementen hinzufügen, indem du zum Beispiel <code>class=\"deine-klasse\"</code> innerhalb des öffnenden Tags schreibst.",
|
||||
"Du weißt, es gehört ein Punkt vor CSS Klassen: <code>.red-text { color: blue; }</code>. Aber diese Klassen-Deklarationen brauchen keinen Punkt: <code><h2 class=\"blue-text\">CatPhotoApp<h2></code>."
|
||||
"Du weißt, es gehört ein Punkt vor CSS Klassen: <code>.red-text { color: blue; }</code>. Aber diese Klassen-Deklarationen brauchen keinen Punkt: <code><h2 class=\"blue-text\">CatPhotoApp<h2></code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedf08806",
|
||||
"title": "Change the Font Size of an Element",
|
||||
"description": [
|
||||
"Create a second <code>p</code> element with the following <code>kitty ipsum text</code>: <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>",
|
||||
"Then, inside your <code><style></code> element, set the <code>font-size</code> of all <code>p</code> elements to 16 pixels.",
|
||||
"Font size is controlled by the <code>font-size</code> CSS property, like this: <code>h1 { font-size: 30px; }</code>.",
|
||||
"See if you can figure out how to give both of your <code>p</code> elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code><style></code> tag that we created for your <code>red-text</code> class."
|
||||
"Font size is controlled by the <code>font-size</code> CSS property, like this:",
|
||||
"<code>h1 {</code>",
|
||||
"<code>  font-size: 30px;</code>",
|
||||
"}</code>",
|
||||
"See if you can figure out how to give both of your <code>p</code> elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code><style></code> tag that we created for your <code>red-text</code> class.",
|
||||
"Create a second <code>p</code> element with the following kitty ipsum text: <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>",
|
||||
"Then, inside your <code><style></code> element, set the <code>font-size</code> of all <code>p</code> elements to 16 pixels."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"p\").length > 1, 'You need 2 <code>p</code> elements with Kitty Ipsum text.')",
|
||||
@ -566,7 +578,7 @@
|
||||
"nameEs": "Waypoint: Cambia el tamaño de fuente de un elemento.",
|
||||
"descriptionEs": [
|
||||
"Crea un segundo elemento <code>p</code>. Luego, dentro de tu elemento <code><style></code>, pon el \"font-size\" de todos los elementos <code>p</code> a 16 pixeles.",
|
||||
"El tamaño de fuente es controlado por el atributo CSS \"font-size\", como aquí: <code>h1 { font-size: 30px; }</code>.",
|
||||
"El tamaño de fuente es controlado por el atributo CSS \"font-size\", como aquí: <code>h1 { font-size: 30px; }</code>",
|
||||
"Primero, 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>",
|
||||
"Ve si puedes encontrar una manera de darle a ambos elementos <code>p</code> un font-size de 16 pixeles (<code>16px</code>). Puedes hacer esto dentro de la misma etiqueta <code><style></code> que creamos para la clase \"red-text\"."
|
||||
],
|
||||
@ -575,7 +587,7 @@
|
||||
"nameDe": "Waypoint: Ändere die Schriftgröße eines Elements",
|
||||
"descriptionDe": [
|
||||
"Erstelle ein zweites <code>p</code> Element. Ändere dann innerhalb deines <code><style></code> Elements die Schriftgröße oder \"font-size\" von allen <code>p</code> Elementen auf 16 Pixel.",
|
||||
"Schriftgröße wird von dem CSS Attribut \"font-size\" kontrolliert: <code>h1 { font-size: 30px; }</code>.",
|
||||
"Schriftgröße wird von dem CSS Attribut \"font-size\" kontrolliert: <code>h1 { font-size: 30px; }</code>",
|
||||
"Zuerst erstellst du ein zweites <code>p</code> Element mit dem folgenden Kitty Ipsum Text: <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>",
|
||||
"Versuche nun beiden <code>p</code> Elementen die Schriftgröße von 16 Pixeln (<code>16px</code>) zu geben. Du kannst das innerhalb des selben <code><style></code> Tags machen, welches wir für deine \"red-text\" Klasse erstellt haben."
|
||||
]
|
||||
@ -584,9 +596,12 @@
|
||||
"id": "bad87fee1348bd9aede08807",
|
||||
"title": "Set the Font Family of an Element",
|
||||
"description": [
|
||||
"Make all of your <code>p</code> elements use the <code>Monospace</code> font.",
|
||||
"You can set an element's font by using the <code>font-family</code> property.",
|
||||
"For example, if you wanted to set your <code>h2</code> element's font to <code>Sans-serif</code>, you would use the following CSS: <code>h2 { font-family: Sans-serif; }</code>."
|
||||
"For example, if you wanted to set your <code>h2</code> element's font to <code>Sans-serif</code>, you would use the following CSS:",
|
||||
"<code>h2 {</code>",
|
||||
"<code>  font-family: Sans-serif;</code>",
|
||||
"<code>}</code>",
|
||||
"Make all of your <code>p</code> elements use the <code>Monospace</code> font."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> elements should use the font <code>Monospace</code>.')"
|
||||
@ -623,18 +638,19 @@
|
||||
"descriptionDe": [
|
||||
"Definiere für alle <code>p</code> Elemente die Schriftart \"Monospace\".",
|
||||
"Du kannst einem Element mit \"font-family\" eine Schriftart zuweisen.",
|
||||
"Wenn du zum Beispiel deinem <code>h2</code> Element die Schriftart \"Sans-serif\" zuweisen willst, kannst du das mit dem folgenden CSS tun: <code>h2 { font-family: Sans-serif; }</code>."
|
||||
"Wenn du zum Beispiel deinem <code>h2</code> Element die Schriftart \"Sans-serif\" zuweisen willst, kannst du das mit dem folgenden CSS tun: <code>h2 { font-family: Sans-serif; }</code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedf08807",
|
||||
"title": "Import a Google Font",
|
||||
"description": [
|
||||
"Apply the <code>font-family</code> of <code>Lobster</code> to your <code>h2</code> element.",
|
||||
"Now, let's import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).",
|
||||
"First, you'll need to make a <code>call</code> to Google to grab the <code>Lobster</code> font and load it into your HTML.",
|
||||
"Copy the following code snippet and paste it into your code editor:",
|
||||
"<code><link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"></code>.",
|
||||
"Now you can set <code>Lobster</code> as a font-family value on your <code>h2</code> element."
|
||||
"<code><link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"></code>",
|
||||
"Now you can set <code>Lobster</code> as a font-family value on your <code>h2</code> element.",
|
||||
"Apply the <code>font-family</code> of <code>Lobster</code> to your <code>h2</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert(new RegExp(\"googleapis\", \"gi\").test(editor), 'Import the <code>Lobster</code> font.')",
|
||||
@ -675,7 +691,7 @@
|
||||
"Füge dem <code>h2</code> Element die Schriftart oder <code>font-family</code> \"Lobster\" hinzu.",
|
||||
"Zuerst musst du Google Fonts in dein HTML einbinden, um auf \"Lobster\" zugreifen zu können.",
|
||||
"Kopiere den folgenden Code und füge diesen in deinen Editor über dem <code>style</code> Element ein:",
|
||||
"<code><link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"></code>.",
|
||||
"<code><link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"></code>",
|
||||
"Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem <code>h2</code> Element hinzufügen."
|
||||
]
|
||||
},
|
||||
@ -683,8 +699,12 @@
|
||||
"id": "bad87fee1348bd9aedf08808",
|
||||
"title": "Specify How Fonts Should Degrade",
|
||||
"description": [
|
||||
"There are several default fonts that are available in all browsers. These include <code>Monospace</code>, <code>Serif</code> and <code>Sans-Serif</code>. Leave <code>Lobster</code> as the font-family for your <code>h2</code> elements. Make them \"degrade\" to <code>Monospace</code> when <code>Lobster</code> isn't available.",
|
||||
"For example, if you wanted an element to use the <code>Helvetica</code> font, but also degrade to the <code>Sans-Serif</code> font when <code>Helvetica</code> wasn't available, you could use this CSS style: <code>p { font-family: Helvetica, Sans-Serif; }</code>.",
|
||||
"There are several default fonts that are available in all browsers. These include <code>Monospace</code>, <code>Serif</code> and <code>Sans-Serif</code>",
|
||||
"When one font isn't available, you can tell the browser to \"degrade\" to another font.",
|
||||
"For example, if you wanted an element to use the <code>Helvetica</code> font, but also degrade to the <code>Sans-Serif</code> font when <code>Helvetica</code> wasn't available, you could use this CSS style:",
|
||||
"<code>p {</code>",
|
||||
"<code>  font-family: Helvetica, Sans-Serif;</code>",
|
||||
"<code>}</code>",
|
||||
"Now comment out your call to Google Fonts, so that the <code>Lobster</code> font isn't available. Notice how it degrades to the <code>Monospace</code> font."
|
||||
],
|
||||
"tests": [
|
||||
@ -731,7 +751,7 @@
|
||||
"descriptionDe": [
|
||||
"Füge allen <code>h2</code> Elementen die Schriftart \"Lobster\" hinzu und definiere \"Monospace\" als Ersatzschrift, wenn \"Lobster\" nicht verfügbar ist.",
|
||||
"Du kannst \"Lobster\" als Schriftart deines <code>h2</code> Elements belassen, aber gleichzeitig dafür sorgen, dass eine alternative Schrift geladen wird, wenn \"Lobster\" nicht zur Verfügung steht.",
|
||||
"Wenn du zum Beispiel einem Element die Schriftart \"Helvetica\" geben möchtest, aber gleichzeitig die alternative Schrift \"Sans-Serif\" laden willst, wenn \"Helvetica\" nicht verfügbar ist, kannst du diesen CSS Style verwenden: <code>p { font-family: Helvetica, Sans-Serif; }</code>.",
|
||||
"Wenn du zum Beispiel einem Element die Schriftart \"Helvetica\" geben möchtest, aber gleichzeitig die alternative Schrift \"Sans-Serif\" laden willst, wenn \"Helvetica\" nicht verfügbar ist, kannst du diesen CSS Style verwenden: <code>p { font-family: Helvetica, Sans-Serif; }</code>",
|
||||
"Es gibt verschiedene Schriftarten, die jedem Browser standardmäßig zur Verfügung stehen. Das sind unter anderem \"Monospace\", \"Serif\" und \"Sans-Serif\". Probiere deinem <code>h2</code> Element gleichzeitig die Schriftart \"Lobster\" und als Alternative \"Monospace\" zu geben.",
|
||||
"Jetzt versuche den Aufruf von Google Fonts in deinem HTML auszukommentieren, sodass \"Lobster\" nicht zur Verfügung steht. Beachte, wie nun die Schriftart \"Monospace\" geladen wird."
|
||||
]
|
||||
@ -741,8 +761,10 @@
|
||||
"title": "Add Images to your Website",
|
||||
"description": [
|
||||
"You can add images to your website by using the <code>img</code> element, and point to a specific image's URL using the <code>src</code> attribute.",
|
||||
"An example of this would be <code><img src=\"http://www.your-image-source.com/your-image.jpg\"></code>. Note that in most cases, <code>img</code> elements are self-closing.",
|
||||
"Try it with this image: <code>https://bit.ly/fcc-relaxing-cat</code>."
|
||||
"An example of this would be:",
|
||||
"<code><img src=\"http://www.your-image-source.com/your-image.jpg\"></code>",
|
||||
"Note that in most cases, <code>img</code> elements are self-closing.",
|
||||
"Try it with this image: <code>https://bit.ly/fcc-relaxing-cat</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"img\").length > 0, 'Your page should have an image element.')",
|
||||
@ -787,7 +809,7 @@
|
||||
"Nutze ein <code>img</code> Element um das Bild <code>https://bit.ly/fcc-relaxing-cat</code> einzufügen.",
|
||||
"Du kannst <code>img</code> Elemente verwenden, um Bilder in deine Website einzubauen. Um zur URL des Bildes zu verweisen, benutzt du das <code>src</code> Attribut.",
|
||||
"Ein Beispiel dafür wäre <code><img src=\"www.bild-quelle.com/bild.jpg\"/></code>. Beachte, dass <code>img</code> Elemente in den meisten Fällen selbstschließend sind.",
|
||||
"Versuche es mit diesem Bild: <code>https://bit.ly/fcc-relaxing-cat</code>."
|
||||
"Versuche es mit diesem Bild: <code>https://bit.ly/fcc-relaxing-cat</code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -795,7 +817,12 @@
|
||||
"title": "Size your Images",
|
||||
"description": [
|
||||
"CSS has a property called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.",
|
||||
"For example, if we wanted to create a CSS class called <code>larger-image</code> that gave HTML elements a width of 500 pixels, we'd use: <code><style> .larger-image { width: 500px; } </style></code>.",
|
||||
"For example, if we wanted to create a CSS class called <code>larger-image</code> that gave HTML elements a width of 500 pixels, we'd use:",
|
||||
"<code><style></code>",
|
||||
"<code>  .larger-image {</code>",
|
||||
"<code>    width: 500px;</code>",
|
||||
"<code>  }</code>",
|
||||
"<code></style></code>",
|
||||
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide."
|
||||
],
|
||||
"tests": [
|
||||
@ -842,17 +869,25 @@
|
||||
"descriptionDe": [
|
||||
"Erstelle eine Klasse mit dem Namen <code>smaller-image</code> und verwende sie, um dein Bild auf 100 Pixel zu skalieren.",
|
||||
"Die Breite eines Elements wird mit dem CSS Attribut <code>width</code> kontrolliert. Wie bei Schriftarten verwenden wir Pixel (px) um die Größe zu definieren.",
|
||||
"Wenn wir also die CSS Klasse \"larger-image\" erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir: <code><style> .larger-image { width: 500px; } </style></code>."
|
||||
"Wenn wir also die CSS Klasse \"larger-image\" erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir: <code><style> .larger-image { width: 500px; } </style></code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9bedf08813",
|
||||
"title": "Add Borders Around your Elements",
|
||||
"description": [
|
||||
"CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>.",
|
||||
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <code><style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style></code>.",
|
||||
"CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>",
|
||||
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:",
|
||||
"<code><style></code>",
|
||||
"<code>  .thin-red-border {</code>",
|
||||
"<code>    border-color: red;</code>",
|
||||
"<code>    border-width: 5px;</code>",
|
||||
"<code>    border-style: solid;</code>",
|
||||
"<code>  }</code>",
|
||||
"<code></style></code>",
|
||||
"Create a class called <code>thick-green-border</code> that puts a 10-pixel-wide green border with a style of <code>solid</code> around an HTML element, and apply that class to your cat photo.",
|
||||
"Remember that you can apply multiple classes to an element by separating each class with a space within its <code>class</code> attribute. For example: <code><img class=\"class1 class2\"></code>"
|
||||
"Remember that you can apply multiple classes to an element by separating each class with a space within its <code>class</code> attribute. For example:",
|
||||
"<code><img class=\"class1 class2\"></code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"img\").hasClass(\"smaller-image\"), 'Your <code>img</code> element should have the class <code>smaller-image</code>.')",
|
||||
@ -905,16 +940,16 @@
|
||||
"descriptionDe": [
|
||||
"Erstelle die Klasse \"thick-green-border\", welche einen 10 Pixel dicken, grünen Rahmen mit dem Style \"solid\" um ein HTML Element setzt. Füge diese Klasse zu deinem Katzenfoto hinzu.",
|
||||
"CSS Rahmen haben Attribute wie Style, Color und Width.",
|
||||
"Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, würden wir so vorgehen: <code><style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style></code>."
|
||||
"Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, würden wir so vorgehen: <code><style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style></code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedf08814",
|
||||
"title": "Add Rounded Corners with a Border Radius",
|
||||
"description": [
|
||||
"Your cat photo currently has sharp corners. We can round out those corners with a CSS property called <code>border-radius</code>.",
|
||||
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this property to your <code>thick-green-border</code> class and set it to <code>10px</code>.",
|
||||
"Give your cat photo a <code>border-radius</code> of <code>10px</code>."
|
||||
"Your cat photo currently has sharp corners. We can round out those corners with a CSS property called <code>border-radius</code>",
|
||||
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this property to your <code>thick-green-border</code> class and set it to <code>10px</code>",
|
||||
"Give your cat photo a <code>border-radius</code> of <code>10px</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"img\").hasClass(\"thick-green-border\"), 'Your image element should have the class \"thick-green-border\".')",
|
||||
@ -978,7 +1013,7 @@
|
||||
"title": "Make Circular Images with a Border Radius",
|
||||
"description": [
|
||||
"In addition to pixels, you can also specify a <code>border-radius</code> using a percentage.",
|
||||
"Give your cat photo a <code>border-radius</code> of <code>50%</code>."
|
||||
"Give your cat photo a <code>border-radius</code> of <code>50%</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of <code>50%</code>, making it perfectly circular.')",
|
||||
@ -1044,8 +1079,9 @@
|
||||
"<code>a</code> elements, also known as <code>anchor</code> elements, are used to link to content outside of the current page.",
|
||||
"Here's a diagram of an <code>a</code> element. In this case, the <code>a</code> element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.",
|
||||
"<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\"></a>",
|
||||
"Here's an example: <code><p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p></code>.",
|
||||
"Create an <code>a</code> element that links to <code>http://freecatphotoapp.com</code> and has \"cat photos\" as its <code>anchor text</code>."
|
||||
"Here's an example:",
|
||||
"<code><p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p></code>",
|
||||
"Create an <code>a</code> element that links to <code>http://freecatphotoapp.com</code> and has \"cat photos\" as its <code>anchor text</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert((/cat photos/gi).test($(\"a\").text()), 'Your <code>a</code> element should have the <code>anchor text</code> of \"cat photos\"')",
|
||||
@ -1104,7 +1140,7 @@
|
||||
"Erstelle ein <code>a</code> Element oder \"Anker Element\", das auf http://freecatphotoapp.com verlinkt und den Link-Text \"cat photos\" oder \"anchor text\" beinhaltet.",
|
||||
"So sieht ein <code>a</code> Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.",
|
||||
"<img class=\"img-responsive\" alt=\"Ein Beispiel wie Anker Tags geschrieben werden.\" src=\"https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png\">",
|
||||
"Hier ist ein Beispiel: <code><p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p></code>."
|
||||
"Hier ist ein Beispiel: <code><p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p></code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -1113,7 +1149,8 @@
|
||||
"description": [
|
||||
"Again, here's a diagram of an <code>a</code> element for your reference:",
|
||||
"<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\"></a>",
|
||||
"Here's an example: <code><p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p></code>.",
|
||||
"Here's an example:",
|
||||
"<code><p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p></code>",
|
||||
"<code>Nesting</code> just means putting one element inside of another element.",
|
||||
"Now nest your existing <code>a</code> element within a new <code>p</code> element so that the surrounding paragraph says \"View more cat photos\", but where only \"cat photos\" is a link, and the rest of the text is plain text."
|
||||
],
|
||||
@ -1256,7 +1293,8 @@
|
||||
"title": "Turn an Image into a Link",
|
||||
"description": [
|
||||
"You can make elements into links by nesting them within an <code>a</code> element.",
|
||||
"Nest your image within an <code>a</code> element. Here's an example: <code><a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a></code>.",
|
||||
"Nest your image within an <code>a</code> element. Here's an example:",
|
||||
"<code><a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a></code>",
|
||||
"Remember to use <code>#</code> as your <code>a</code> element's <code>href</code> property in order to turn it into a dead link.",
|
||||
"Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link."
|
||||
],
|
||||
@ -1318,7 +1356,7 @@
|
||||
"descriptionDe": [
|
||||
"Umschließe dein <code>img</code> Element mit einem <code>a</code> Element als toten Link.",
|
||||
"Du kannst jedes Element in einen Link verwandeln, indem du es mit einem <code>a</code> Element umschließt.",
|
||||
"Umschließe nun dein Bild mit einem <code>a</code> Element. Hier ist ein Beispiel: <code><a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a></code>.",
|
||||
"Umschließe nun dein Bild mit einem <code>a</code> Element. Hier ist ein Beispiel: <code><a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a></code>",
|
||||
"Vergewissere dich, dass du ein Hash Symbol (#) innerhalb des <code>href</code> Attributs des <code>a</code> Elements nutzt, um daraus einen toten Link zu machen.",
|
||||
"Sobald du das gemacht hast, kannst du mit der Maus über dein Bild fahren. Der normale Mauszeiger sollte nun zu einer Hand für Links werden. Das Bild ist jetzt ein Link."
|
||||
]
|
||||
@ -1329,7 +1367,8 @@
|
||||
"description": [
|
||||
"<code>alt</code> attributes, also known as <code>alt text</code>, are what browsers will display if they fail to load the image. <code>alt</code> attributes are also important for blind or visually impaired users to understand what an image portrays. And search engines also look at <code>alt</code> attributes.",
|
||||
"In short, every image should have an <code>alt</code> attribute!",
|
||||
"You can add an <code>alt</code> attribute right in the img element like this: <code><img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"></code>.",
|
||||
"You can add an <code>alt</code> attribute right in the img element like this:",
|
||||
"<code><img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"></code>",
|
||||
"Add an <code>alt</code> attribute with the text <code>A cute orange cat lying on its back</code> to our cat photo."
|
||||
],
|
||||
"tests": [
|
||||
@ -1390,7 +1429,7 @@
|
||||
"<code>alt</code> Attribute – auch \"Alt Text\" genannt – werden vom Browser angezeigt, wenn sie ein Bild nicht laden können. Für blinde oder visuell eingeschränkte Menschen sind sie ebenfalls wichtig um zu verstehen, was ein Bild darstellt. Zudem werden diese Texte von Suchmaschinen genutzt.",
|
||||
"Kurz gesagt: Jedes Bild sollte ein <code>alt</code> Attribut beinhalten!",
|
||||
"<code>alt</code> Attribute sind nützlich um Personen – und Web Crawlers wie Google – zu sagen was in einem Foto abgebildet wird. Das ist extrem wichtig, damit blinde oder visuell eingeschränkte Menschen den Inhalt der Website verstehen.",
|
||||
"Du kannst das <code>alt</code> Attribut direkt in das Img Element einfügen: <code><img src=\"www.bild-quelle.com/bild.jpg\" alt=\"Dein Alt Text.\"/></code>."
|
||||
"Du kannst das <code>alt</code> Attribut direkt in das Img Element einfügen: <code><img src=\"www.bild-quelle.com/bild.jpg\" alt=\"Dein Alt Text.\"/></code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -1559,9 +1598,11 @@
|
||||
"id": "bad87fee1348bd9aedf08829",
|
||||
"title": "Create a Text Field",
|
||||
"description": [
|
||||
"Now let's create a web <code>form</code>.",
|
||||
"Now let's create a web <code>form</code>",
|
||||
"Text inputs are a convenient way to get input from your user.",
|
||||
"You can create one like this: <code><input type=\"text\"></code>. Note that <code>input</code> elements are self-closing.",
|
||||
"You can create one like this:",
|
||||
"<code><input type=\"text\"></code>",
|
||||
"Note that <code>input</code> elements are self-closing.",
|
||||
"Create an <code>input</code> element of type <code>text</code> below your lists."
|
||||
],
|
||||
"tests": [
|
||||
@ -1638,7 +1679,8 @@
|
||||
"title": "Add Placeholder Text to a Text Field",
|
||||
"description": [
|
||||
"Your placeholder text is what appears in your text <code>input</code> before your user has inputed anything.",
|
||||
"You can create placeholder text like so: <code><input type=\"text\" placeholder=\"this is placeholder text\"></code>.",
|
||||
"You can create placeholder text like so:",
|
||||
"<code><input type=\"text\" placeholder=\"this is placeholder text\"></code>",
|
||||
"Set the <code>placeholder</code> value of your text <code>input</code> to \"cat photo URL\"."
|
||||
],
|
||||
"tests": [
|
||||
@ -1709,7 +1751,7 @@
|
||||
"descriptionDe": [
|
||||
"Setze bei deinem <code>input</code> Element den Wert für <code>placeholder</code> auf \"cat photo URL\".",
|
||||
"Platzhalter erscheinen in <code>input</code> Feldern, bevor der Nutzer etwas eingibt.",
|
||||
"Du kannst Platzhalter auf folgende Weise erstellen: <code><input type=\"text\" placeholder=\"Das ist ein Platzhalter.\"></code>."
|
||||
"Du kannst Platzhalter auf folgende Weise erstellen: <code><input type=\"text\" placeholder=\"Das ist ein Platzhalter.\"></code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -1717,12 +1759,13 @@
|
||||
"title": "Create a Form Element",
|
||||
"description": [
|
||||
"You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your <code>form</code> element.",
|
||||
"For example: <code><form action=\"/url-where-you-want-to-submit-form-data\"></form></code>.",
|
||||
"For example:",
|
||||
"<code><form action=\"/url-where-you-want-to-submit-form-data\"></form></code>",
|
||||
"Nest your text field in a <code>form</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"form\") && $(\"form\").children(\"input\") && $(\"form\").children(\"input\").length > 0, 'Nest your text input element within a <code>form</code> element.')",
|
||||
"assert($(\"form\").attr(\"action\") === \"/submit-cat-photo\", 'Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>.')",
|
||||
"assert($(\"form\").attr(\"action\") === \"/submit-cat-photo\", 'Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>')",
|
||||
"assert(editor.match(/<\\/form>/g) && editor.match(/<form/g) && editor.match(/<\\/form>/g).length === editor.match(/<form/g).length, 'Make sure your <code>form</code> element has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@ -1789,7 +1832,7 @@
|
||||
"descriptionDe": [
|
||||
"Umschließe dein Textfeld mit einem <code>form</code> Element. Füge anschließend das Attribut <code>action=\"/submit-cat-photo\"</code> hinzu.",
|
||||
"Du kannst Web Formulare bauen, die Daten zu einem Server übertragen – und das nur mit HTML. Das wird möglich, indem du eine Aktion für dein <code>form</code> Element bestimmst.",
|
||||
"Zum Beispiel: <code><form action=\"/url-wohin-du-deine-formular-daten-senden-willst\"></form></code>."
|
||||
"Zum Beispiel: <code><form action=\"/url-wohin-du-deine-formular-daten-senden-willst\"></form></code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -1797,7 +1840,8 @@
|
||||
"title": "Add a Submit Button to a Form",
|
||||
"description": [
|
||||
"Let's add a <code>submit</code> button to your form. Clicking this button will send the data from your form to the URL you specified with your form's <code>action</code> attribute.",
|
||||
"Here's an example submit button: <code><button type=\"submit\">this button submits the form</button></code>.",
|
||||
"Here's an example submit button:",
|
||||
"<code><button type=\"submit\">this button submits the form</button></code>",
|
||||
"Add a submit button to your <code>form</code> element with type <code>submit</code> and \"Submit\" as its text."
|
||||
],
|
||||
"tests": [
|
||||
@ -1872,7 +1916,7 @@
|
||||
"descriptionDe": [
|
||||
"Füge eine Schaltfläche zum Senden mit dem Typ \"submit\" und \"Submit\" als Text zu deinem <code>form</code> Element hinzu.",
|
||||
"Lass uns nun eine Schaltfläche zum Senden zu deinem Formlar hinzufügen. Durch einen Klick auf diese Schaltfläche werden die Daten des Formulars an die URL gesendet, welche du in dem <code>action</code> Attribut deines Formulars angegeben hast.",
|
||||
"Hier ist ein Beispiel einer solchen Schaltfläche: <code><button type=\"submit\">Diese Schaltfläche überträgt die Daten des Formulars.</button></code>."
|
||||
"Hier ist ein Beispiel einer solchen Schaltfläche: <code><button type=\"submit\">Diese Schaltfläche überträgt die Daten des Formulars.</button></code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -1880,7 +1924,7 @@
|
||||
"title": "Use HTML5 to Require a Field",
|
||||
"description": [
|
||||
"You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.",
|
||||
"For example, if you wanted to make a text input field required, you can just add the word <code>required</code> within your <code>input</code> element, you would use: <code><input type=\"text\" required></code>.",
|
||||
"For example, if you wanted to make a text input field required, you can just add the word <code>required</code> within your <code>input</code> element, you would use: <code><input type=\"text\" required></code>",
|
||||
"Make your text <code>input</code> a <code>required</code> field, so that your user can't submit the form without completing this field."
|
||||
],
|
||||
"tests": [
|
||||
@ -1953,7 +1997,7 @@
|
||||
"descriptionDe": [
|
||||
"Mache aus deinem <code>input</code> Feld ein Pflichtfeld – \"required\" – damit deine Nutzer das Formular nicht abschicken können, ohne dieses Feld auszufüllen.",
|
||||
"Du kannst bestimmte Felder eines Formulars als Pflichtfelder deklarieren. Damit ist es deinen Nutzern nicht mehr möglich, das Formular abzuschicken, ohne die Pflichtfelder auszufüllen.",
|
||||
"Um zum Beispiel ein Textfeld als Pflichtfeld zu deklarieren, kannst du einfach ein \"required\" innerhalb deines <code>input</code> Elements hinzufügen: <code><input type=\"text\" required></code>."
|
||||
"Um zum Beispiel ein Textfeld als Pflichtfeld zu deklarieren, kannst du einfach ein \"required\" innerhalb deines <code>input</code> Elements hinzufügen: <code><input type=\"text\" required></code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -1961,11 +2005,12 @@
|
||||
"title": "Create a Set of Radio Buttons",
|
||||
"description": [
|
||||
"You can use <code>radio buttons</code> for questions where you want the user to only give you one answer.",
|
||||
"Radio buttons are a type of <code>input</code>.",
|
||||
"Radio buttons are a type of <code>input</code>",
|
||||
"Each of your radio buttons should be nested within its own <code>label</code> element.",
|
||||
"All related radio buttons should have the same <code>name</code> attribute.",
|
||||
"Here's an example of a radio button: <code><label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label></code>.",
|
||||
"Add to your form a pair of radio buttons. Each radio button should be nested within its own <code>label</code> element. They should share a common <code>name</code> attribute. One should have the option of <code>indoor</code> and the other should have the option of <code>outdoor</code>."
|
||||
"Here's an example of a radio button:",
|
||||
"<code><label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label></code>",
|
||||
"Add to your form a pair of radio buttons. Each radio button should be nested within its own <code>label</code> element. They should share a common <code>name</code> attribute. One should have the option of <code>indoor</code> and the other should have the option of <code>outdoor</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')",
|
||||
@ -2045,7 +2090,7 @@
|
||||
"Optionsfelder sind lediglich ein weiterer Typ von <code>input</code> Elementen.",
|
||||
"Jedes deiner Optionsfelder sollte innerhalb des eigenen <code>label</code> Elements liegen.",
|
||||
"Alle Optionsfelder mit Bezug zueinander sollten das gleiche <code>name</code> Attribut teilen.",
|
||||
"Ein Beispiel eines Optionsfeldes: <code><label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label></code>."
|
||||
"Ein Beispiel eines Optionsfeldes: <code><label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label></code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -2053,11 +2098,12 @@
|
||||
"title": "Create a Set of Checkboxes",
|
||||
"description": [
|
||||
"Forms commonly use <code>checkboxes</code> for questions that may have more than one answer.",
|
||||
"Checkboxes are a type of <code>input</code>.",
|
||||
"Checkboxes are a type of <code>input</code>",
|
||||
"Each of your checkboxes should be nested within its own <code>label</code> element.",
|
||||
"All related checkbox inputs should have the same <code>name</code> attribute.",
|
||||
"Here's an example of a checkbox: <code><label><input type=\"checkbox\" name=\"personality\"> Loving</label></code>.",
|
||||
"Add to your form a set of three checkboxes. Each checkbox should be nested within its own <code>label</code> element. All three should share the <code>name</code> attribute of <code>personality</code>."
|
||||
"Here's an example of a checkbox:",
|
||||
"<code><label><input type=\"checkbox\" name=\"personality\"> Loving</label></code>",
|
||||
"Add to your form a set of three checkboxes. Each checkbox should be nested within its own <code>label</code> element. All three should share the <code>name</code> attribute of <code>personality</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.')",
|
||||
@ -2134,7 +2180,7 @@
|
||||
"descriptionDe": [
|
||||
"Füge deinem Formular drei Kontrollkästchen hinzu. Jedes dieser Elemente sollte innerhalb seines eigenen <code>label</code> Elements stehen. Alle sollten das gleiche <code>name</code> Attribut \"personality\" teilen.",
|
||||
"Formulare nutzen Kontrollkästchen meistens für Fragen, die mehrerer Antworten bedürfen.",
|
||||
"Als Beispiel: <code><label><input type=\"checkbox\" name=\"personality\"> liebevoll</label></code>."
|
||||
"Als Beispiel: <code><label><input type=\"checkbox\" name=\"personality\"> liebevoll</label></code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -2142,7 +2188,8 @@
|
||||
"title": "Check Radio Buttons and Checkboxes by Default",
|
||||
"description": [
|
||||
"You can set a checkbox or radio button to be checked by default using the <code>checked</code> attribute.",
|
||||
"To do this, just add the word \"checked\" to the inside of an input element. For example, <code><input type=\"radio\" name=\"test-name\" checked></code>.",
|
||||
"To do this, just add the word \"checked\" to the inside of an input element. For example:",
|
||||
"<code><input type=\"radio\" name=\"test-name\" checked></code>",
|
||||
"Set the first of your <code>radio buttons</code> and the first of your <code>checkboxes</code> to both be checked by default."
|
||||
],
|
||||
"tests": [
|
||||
@ -2221,7 +2268,7 @@
|
||||
"descriptionDe": [
|
||||
"Stelle sicher, dass jeweilse dein erstes Optionsfeld und Kontrollkästchen standardmäßig markiert sind.",
|
||||
"Das kannst du erreichen, indem beiden das Attribut <code>checked</code> beigefügt wird.",
|
||||
"Um das zu bewerkstelligen, füge einfach \"checked\" innerhalb eines Eingabefeldes hinzu. Als Beispiel: <code><input type=\"radio\" name=\"test-name\" checked></code>."
|
||||
"Um das zu bewerkstelligen, füge einfach \"checked\" innerhalb eines Eingabefeldes hinzu. Als Beispiel: <code><input type=\"radio\" name=\"test-name\" checked></code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -2230,8 +2277,8 @@
|
||||
"description": [
|
||||
"The <code>div</code> element, also known as a division element, is a general purpose container for other elements.",
|
||||
"The <code>div</code> element is probably the most commonly used HTML element of all. It's useful for passing the CSS of its own class declarations down to all the elements that it contains.",
|
||||
"Just like any other non-self-closing element, you can open a <code>div</code> element with <code><div></code> and close it on another line with <code></div></code>.",
|
||||
"Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one <code>div</code>.",
|
||||
"Just like any other non-self-closing element, you can open a <code>div</code> element with <code><div></code> and close it on another line with <code></div></code>",
|
||||
"Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one <code>div</code>",
|
||||
"Nest your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element."
|
||||
],
|
||||
"tests": [
|
||||
@ -2315,7 +2362,7 @@
|
||||
"Das <code>div</code> Element oder \"Division\" ist ein allgemeiner Container für andere Elemente.",
|
||||
"Dieses Element wird von allen HTML Elementen wahrscheinlich am häufigsten verwendet. Es ist nützlich um die CSS Stile der eigenen Klasse an die enthaltenen Elemente zu vererben.",
|
||||
"Wie jedes andere Element – das sich nicht selbst schließt – kannst du ein <code>div</code> Element mit <code><div></code> öffnen und mit <code></div></code> wieder schließen.",
|
||||
"Versuche deine öffnende <code>div</code> Auszeichnung überhalb des <code>p</code> Elements von \"Things cats love\" und das schließende <code>div</code> unterhalb der schließenden <code>ol</code> Auszeichnung zu platzieren. Damit befinden sich beide Listen innerhalb eines <code>div</code>."
|
||||
"Versuche deine öffnende <code>div</code> Auszeichnung überhalb des <code>p</code> Elements von \"Things cats love\" und das schließende <code>div</code> unterhalb der schließenden <code>ol</code> Auszeichnung zu platzieren. Damit befinden sich beide Listen innerhalb eines <code>div</code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -2412,7 +2459,7 @@
|
||||
"There are several benefits to using <code>id</code> attributes, and you'll learn more about them once you start using jQuery.",
|
||||
"<code>id</code> attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same <code>id</code> attribute.",
|
||||
"Here's an example of how you give your <code>h2</code> element the id of <code>cat-photo-app</code>: <code><h2 id=\"cat-photo-app\"></code>",
|
||||
"Give your <code>form</code> element the id <code>cat-photo-form</code>."
|
||||
"Give your <code>form</code> element the id <code>cat-photo-form</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of <code>cat-photo-form</code>.')"
|
||||
@ -2591,8 +2638,8 @@
|
||||
"title": "Adjusting the Padding of an Element",
|
||||
"description": [
|
||||
"You may have already noticed this, but all HTML elements are essentially little rectangles.",
|
||||
"Three important properties control the space that surrounds each HTML element: <code>padding</code>, <code>margin</code>, and <code>border</code>.",
|
||||
"An element's <code>padding</code> controls the amount of space between the element and its <code>border</code>.",
|
||||
"Three important properties control the space that surrounds each HTML element: <code>padding</code>, <code>margin</code>, and <code>border</code>",
|
||||
"An element's <code>padding</code> controls the amount of space between the element and its <code>border</code>",
|
||||
"Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more <code>padding</code> than the green box.",
|
||||
"When you increase the green box's <code>padding</code>, it will increase the distance between the text <code>padding</code> and the border around it.",
|
||||
"Change the <code>padding</code> of your green box to match that of your red box."
|
||||
@ -2651,7 +2698,7 @@
|
||||
"nameDe": "Wegpunkt: Justiere den Innenabstand eines Elements",
|
||||
"descriptionDe": [
|
||||
"Die nächsten Wegpunkte werden dir drei wichtige Aspekte von Raum – und Zeit! – bei HTML Elementen näher bringen: <code>padding</code>, <code>margin</code> und <code>border</code>. Das mit der Zeit war ein Scherz. Gleiche nun den Innenabstand – <code>padding</code> – deiner grünen Box dem der roten Box an.",
|
||||
"<code>padding</code> kontrolliert den Raum oder Abstand zwischen dem Inhalt eines Elements und dessen Rahmen – <code>border</code>.",
|
||||
"<code>padding</code> kontrolliert den Raum oder Abstand zwischen dem Inhalt eines Elements und dessen Rahmen – <code>border</code>",
|
||||
"Wir sehen in diesem Beispiel, dass sich die grüne Box und die rote Box innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr <code>padding</code> hat als die grüne Box.",
|
||||
"Wenn du den Innenabstand der grünen Box – also <code>padding</code> – erhöhst, wird sich die Entfernung zwischen dem Text \"padding\" und dem Rahmen darum erhöhen."
|
||||
]
|
||||
@ -2940,7 +2987,7 @@
|
||||
"id": "bad87fee1348bd9aedf08826",
|
||||
"title": "Use Clockwise Notation to Specify the Padding of an Element",
|
||||
"description": [
|
||||
"Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties, you can specify them all in one line, like this: <code>padding: 10px 20px 10px 20px;</code>.",
|
||||
"Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties, you can specify them all in one line, like this: <code>padding: 10px 20px 10px 20px;</code>",
|
||||
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.",
|
||||
"Use Clockwise Notation to give the \".green-box\" class a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||||
],
|
||||
@ -3000,7 +3047,7 @@
|
||||
"nameDe": "Wegpunkt: Nutze die Notation im Uhrzeigersinn um den Innenabstand eines Elements zu bestimmen",
|
||||
"descriptionDe": [
|
||||
"Gib der Klasse \".green-box\" mit einer Notation im Uhrzeigersinn einen Innenabstand – <code>padding</code> – von 40 Pixeln auf der oberen und linken Seite, aber nur 20 Pixel auf der unteren und rechten Seite.",
|
||||
"Anstatt die Eigenschaften <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> und <code>padding-left</code> zu verwenden, kannst du sie alle in einer Zeile schreiben: <code>padding: 10px 20px 10px 20px;</code>.",
|
||||
"Anstatt die Eigenschaften <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> und <code>padding-left</code> zu verwenden, kannst du sie alle in einer Zeile schreiben: <code>padding: 10px 20px 10px 20px;</code>",
|
||||
"Diese vier Werte funktionieren wie eine Uhr: oben, rechts, unten und links. Sie bedeuten exakt das selbe wie die seitenspezifischen Anweisungen."
|
||||
]
|
||||
},
|
||||
@ -3009,7 +3056,7 @@
|
||||
"title": "Use Clockwise Notation to Specify the Margin of an Element",
|
||||
"description": [
|
||||
"Let's try this again, but with <code>margin</code> this time.",
|
||||
"Instead of specifying an element's <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties, you can specify them all in one line, like this: <code>margin: 10px 20px 10px 20px;</code>.",
|
||||
"Instead of specifying an element's <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties, you can specify them all in one line, like this: <code>margin: 10px 20px 10px 20px;</code>",
|
||||
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.",
|
||||
"Use <code>Clockwise Notation</code> to give the element with the <code>green-box</code> class a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||||
],
|
||||
@ -3069,7 +3116,7 @@
|
||||
"nameDe": "Wegpunkt: Nutze die Notation im Uhrzeigersinn um den Außenabstand eines Elements zu bestimmen",
|
||||
"descriptionDe": [
|
||||
"Versuchen wir das noch einmal, aber diesmal mit dem Außenabstand – also <code>margin</code>. Nutze die Notation im Uhrzeigersinn – auch <code>Clockwise Notation</code> genannt – um einem Element 40 Pixel Außenabstand auf der oberen und linken Seite, aber nur 20 Pixel auf der unteren und rechten Seite zu verleihen.",
|
||||
"Anstatt die Eigenschaften <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> und <code>margin-left</code> zu verwenden, kannst du alle in eine Zeile schreiben: <code>margin: 10px 20px 10px 20px;</code>.",
|
||||
"Anstatt die Eigenschaften <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> und <code>margin-left</code> zu verwenden, kannst du alle in eine Zeile schreiben: <code>margin: 10px 20px 10px 20px;</code>",
|
||||
"Diese vier Werte funktionieren wieder wie eine Uhr: oben, rechts, unten und links. Sie meinen exakt das gleiche wie die seitenspezifischen Anweisungen."
|
||||
]
|
||||
},
|
||||
@ -3111,7 +3158,7 @@
|
||||
"description": [
|
||||
"Now we've proven that every HTML page has a <code>body</code> element, and that its <code>body</code> element can also be styled with CSS.",
|
||||
"Remember, you can style your <code>body</code> element just like any other HTML element, and all your other elements will inherit your <code>body</code> element's styles.",
|
||||
"First, create a <code>h1</code> element with the text <code>Hello World</code>.",
|
||||
"First, create a <code>h1</code> element with the text <code>Hello World</code>",
|
||||
"Then, let's give all elements on your page the color of <code>green</code> by adding <code>color: green;</code> to your <code>body</code> element's style declaration.",
|
||||
"Finally, give your <code>body</code> element the font-family of <code>Monospace</code> by adding <code>font-family: Monospace;</code> to your <code>body</code> element's style declaration."
|
||||
],
|
||||
@ -3155,7 +3202,7 @@
|
||||
"For example, your <code>h1</code> element can't be both green and pink at the same time.",
|
||||
"Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class <code>override</code> the <code>body</code> element's <code>color: green;</code> CSS property?",
|
||||
"Create a CSS class called <code>pink-text</code> that gives an element the color pink.",
|
||||
"Give your <code>h1</code> element the class of <code>pink-text</code>."
|
||||
"Give your <code>h1</code> element the class of <code>pink-text</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')",
|
||||
@ -3335,7 +3382,7 @@
|
||||
"description": [
|
||||
"Yay! We just proved that in-line styles will override all the CSS declarations in your <code>style</code> element.",
|
||||
"But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.",
|
||||
"In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use <code>!important</code>.",
|
||||
"In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use <code>!important</code>",
|
||||
"Let's go all the way back to our <code>pink-text</code> class declaration. Remember that our <code>pink-text</code> class was overridden by subsequent class declarations, id declarations, and in-line styles.",
|
||||
"Let's add the keyword <code>!important</code> to your pink-text element's color declaration to make 100% sure that your <code>h1</code> element will be pink.",
|
||||
"An example of how to do this is: <code>color: red !important;</code>"
|
||||
@ -3423,7 +3470,7 @@
|
||||
"description": [
|
||||
"<code>0</code> is the lowest number in hex code, and represents a complete absence of color.",
|
||||
"<code>F</code> is the highest number in hex code, and it represents the maximum possible brightness.",
|
||||
"Let's turn our <code>body</code> element's background-color white by changing its hex code to <code>#FFFFFF</code>."
|
||||
"Let's turn our <code>body</code> element's background-color white by changing its hex code to <code>#FFFFFF</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'Your <code>body</code> element should have the <code>background-color</code> of white.')",
|
||||
@ -3459,7 +3506,7 @@
|
||||
"How many colors are possible? 16 values and 6 positions means we have 16 to the 6th power, or more than 16 million possible colors.",
|
||||
"Hex code follows the red-green-blue, or <code>rgb</code> format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.",
|
||||
"So to get the absolute brightest red, you would just use <code>F</code> for the first and second digits (the highest possible value) and <code>0</code> for the third, fourth, fifth and sixth digits (the lowest possible value).",
|
||||
"Make the <code>body</code> element's background color red by giving it the hex code value of <code>#FF0000</code>."
|
||||
"Make the <code>body</code> element's background color red by giving it the hex code value of <code>#FF0000</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of red.')",
|
||||
@ -3493,7 +3540,7 @@
|
||||
"description": [
|
||||
"Remember that <code>hex code</code> follows the red-green-blue, or <code>rgb</code> format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.",
|
||||
"So to get the absolute brightest green, you would just use <code>F</code> for the third and fourth digits (the highest possible value) and <code>0</code> for all the other digits (the lowest possible value).",
|
||||
"Make the <code>body</code> element's background color green by giving it the hex code value of <code>#00FF00</code>."
|
||||
"Make the <code>body</code> element's background color green by giving it the hex code value of <code>#00FF00</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of <code>green</code>.')",
|
||||
@ -3527,7 +3574,7 @@
|
||||
"description": [
|
||||
"Hex code follows the red-green-blue, or <code>rgb</code> format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.",
|
||||
"So to get the absolute brightest blue, we use <code>F</code> for the fifth and sixth digits (the highest possible value) and <code>0</code> for all the other digits (the lowest possible value).",
|
||||
"Make the <code>body</code> element's background color blue by giving it the hex code value of <code>#0000FF</code>."
|
||||
"Make the <code>body</code> element's background color blue by giving it the hex code value of <code>#0000FF</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 255)\", 'Give your <code>body</code> element the <code>background-color</code> of blue.')",
|
||||
@ -3561,7 +3608,7 @@
|
||||
"description": [
|
||||
"From these three pure colors (red, green and blue), we can create 16 million other colors.",
|
||||
"For example, orange is pure red, mixed with some green, and no blue.",
|
||||
"Make the <code>body</code> element's background color orange by giving it the hex code value of <code>#FFA500</code>."
|
||||
"Make the <code>body</code> element's background color orange by giving it the hex code value of <code>#FFA500</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 165, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of orange.')",
|
||||
@ -3595,7 +3642,7 @@
|
||||
"description": [
|
||||
"From these three pure colors (red, green and blue), we can create 16 million other colors.",
|
||||
"We can also create different shades of gray by evenly mixing all three colors.",
|
||||
"Make the <code>body</code> element's background color gray by giving it the hex code value of <code>#808080</code>."
|
||||
"Make the <code>body</code> element's background color gray by giving it the hex code value of <code>#808080</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(128, 128, 128)\", 'Give your <code>body</code> element the <code>background-color</code> of gray.')",
|
||||
@ -3628,7 +3675,7 @@
|
||||
"title": "Use Hex Code for Specific Shades of Gray",
|
||||
"description": [
|
||||
"We can also create other shades of gray by evenly mixing all three colors. We can go very close to true black.",
|
||||
"Make the <code>body</code> element's background color a dark gray by giving it the hex code value of <code>#111111</code>."
|
||||
"Make the <code>body</code> element's background color a dark gray by giving it the hex code value of <code>#111111</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(17, 17, 17)\", 'Give your <code>body</code> element the <code>background-color</code> of a dark gray.')",
|
||||
@ -3891,39 +3938,6 @@
|
||||
"descriptionPt": [],
|
||||
"nameDe": "",
|
||||
"descriptionDe": []
|
||||
},
|
||||
{
|
||||
"id": "bad83fee1348bd9aede08720",
|
||||
"title": "Use RGB to Color Elements Gray",
|
||||
"description": [
|
||||
"With RGB values, we can make an element gray by using combinations of the same value for all three colors.",
|
||||
"Change the <code>body</code> element's background color to the RGB value for gray: <code>rgb(128, 128, 128)</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(128, 128, 128)\", 'Your <code>body</code> element should have a gray background.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*128\\s*,\\s*128\\s*,\\s*128\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of gray. For example <code>body { background-color: rgb(128, 128, 128); }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" body {",
|
||||
" background-color: rgb(255, 165, 0);",
|
||||
" }",
|
||||
"</style>"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"nameCn": "",
|
||||
"descriptionCn": [],
|
||||
"nameFr": "",
|
||||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"namePt": "",
|
||||
"descriptionPt": [],
|
||||
"nameDe": "",
|
||||
"descriptionDe": []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
"Ride like the wind!",
|
||||
"Legen - wait for it - dary!",
|
||||
"Ludicrous Speed! Go!",
|
||||
"Yes you can!",
|
||||
"Yes we can!",
|
||||
"Most triumphant!",
|
||||
"One loop to rule them all!",
|
||||
"By the power of Grayskull!",
|
||||
|
||||
Reference in New Issue
Block a user