Corrected capitalization, corrected to American spellings and typos (#30685)
* Translate challenge subtitles and example challenge text to Spanish * Corrected errors in syntax and punctuation * Multiple corrections of it/s to its plus other grammar corrections * Correction and added paragraph to CSS Flex article * Corrected my own typo * Corrected capitalization, American spellings and typos
This commit is contained in:
S.Hale
Paul Gamble
@ -6,7 +6,7 @@ about: Reporting a software bug, in learning platform (not for content in guide
|
||||
---
|
||||
|
||||
**Looking forward for reporting a security issue:**
|
||||
Please report security issues by sending an email to `security@freecodecamp.org` instead of raising a Github issue.
|
||||
Please report security issues by sending an email to `security@freecodecamp.org` instead of raising a GitHub issue.
|
||||
|
||||
**Describe the bug**
|
||||
A clear and concise description of what the bug is.
|
||||
|
||||
@ -7,8 +7,8 @@ challengeType: 2
|
||||
## Description
|
||||
<section id='description'>
|
||||
As a reminder, this project is being built upon the following starter project on <a href='https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-socialauth/'>Glitch</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-socialauth/'>GitHub</a>.
|
||||
The last part of setting up your Github authentication is to create the strategy itself. For this, you will need to add the dependency of 'passport-github' to your project and require it as GithubStrategy like <code>const GitHubStrategy = require('passport-github').Strategy;</code>.
|
||||
To set up the Github strategy, you have to tell <b>passport</b> to <b>use</b> an instantiated <b>GithubStrategy</b>, which accepts 2 arguments: An object (containing <em>clientID</em>, <em>clientSecret</em>, and <em>callbackURL</em>) and a function to be called when a user is successfully authenticated which we will determine if the user is new and what fields to save initially in the user's database object. This is common across many strategies but some may require more information as outlined in that specific strategy's github README; for example, Google requires a <em>scope</em> as well which determines what kind of information your request is asking returned and asks the user to approve such access. The current strategy we are implementing has its usage outlined <a>here</a>, but we're going through it all right here on freeCodeCamp!
|
||||
The last part of setting up your GitHub authentication is to create the strategy itself. For this, you will need to add the dependency of 'passport-github' to your project and require it as GithubStrategy like <code>const GitHubStrategy = require('passport-github').Strategy;</code>.
|
||||
To set up the GitHub strategy, you have to tell <b>passport</b> to <b>use</b> an instantiated <b>GitHubStrategy</b>, which accepts 2 arguments: An object (containing <em>clientID</em>, <em>clientSecret</em>, and <em>callbackURL</em>) and a function to be called when a user is successfully authenticated which we will determine if the user is new and what fields to save initially in the user's database object. This is common across many strategies but some may require more information as outlined in that specific strategy's github README; for example, Google requires a <em>scope</em> as well which determines what kind of information your request is asking returned and asks the user to approve such access. The current strategy we are implementing has its usage outlined <a>here</a>, but we're going through it all right here on freeCodeCamp!
|
||||
Here's how your new strategy should look at this point: <pre>passport.use(new GitHubStrategy({
|
||||
clientID: process.env.GITHUB_CLIENT_ID,
|
||||
clientSecret: process.env.GITHUB_CLIENT_SECRET,
|
||||
@ -19,7 +19,7 @@ Here's how your new strategy should look at this point: <pre>passport.use(new Gi
|
||||
//Database logic here with callback containing our user object
|
||||
}
|
||||
));</pre>
|
||||
Your authentication won't be successful yet, and actually throw an error, without the database logic and callback, but it should log to your console your Github profile if you try it!
|
||||
Your authentication won't be successful yet, and actually throw an error, without the database logic and callback, but it should log to your console your GitHub profile if you try it!
|
||||
Submit your page when you think you've got it right.
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ challengeType: 2
|
||||
## Description
|
||||
<section id='description'>
|
||||
As a reminder, this project is being built upon the following starter project on <a href='https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-socialauth/'>Glitch</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-socialauth/'>GitHub</a>.
|
||||
The final part of the strategy is handling the profile returned from Github. We need to load the users database object if it exists or create one if it doesn't and populate the fields from the profile, then return the user's object. Github supplies us a unique <em>id</em> within each profile which we can use to search with to serialize the user with (already implemented). Below is an example implementation you can use in your project- it goes within the function that is the second argument for the new strategy, right below the <code>console.log(profile);</code> currently is:
|
||||
The final part of the strategy is handling the profile returned from GitHub. We need to load the user's database object if it exists, or create one if it doesn't, and populate the fields from the profile, then return the user's object. GitHub supplies us a unique <em>id</em> within each profile which we can use to search with to serialize the user with (already implemented). Below is an example implementation you can use in your project- it goes within the function that is the second argument for the new strategy, right below the <code>console.log(profile);</code> currently is:
|
||||
<pre>db.collection('socialusers').findAndModify(
|
||||
{id: profile.id},
|
||||
{},
|
||||
@ -28,7 +28,7 @@ The final part of the strategy is handling the profile returned from Github. We
|
||||
return cb(null, doc.value);
|
||||
}
|
||||
);</pre>
|
||||
With a findAndModify, it allows you to search for an object and update it, as well as upsert the object if it doesn't exist and receive the new object back each time in our callback function. In this example, we always set the last_login as now, we always increment the login_count by 1, and only when we insert a new object(new user) do we populate the majority of the fields. Something to notice also is the use of default values. Sometimes a profile returned won't have all the information filled out or it will have been chosen by the user to remain private; so in this case we have to handle it to prevent an error.
|
||||
With a findAndModify, it allows you to search for an object and update it, as well as insert the object if it doesn't exist and receive the new object back each time in our callback function. In this example, we always set the last_login as now, we always increment the login_count by 1, and only when we insert a new object(new user) do we populate the majority of the fields. Something to notice also is the use of default values. Sometimes a profile returned won't have all the information filled out or it will have been chosen by the user to remain private; so in this case we have to handle it to prevent an error.
|
||||
You should be able to login to your app now- try it! Submit your page when you think you've got it right. If you're running into errors, you can check out an example of this mini-project's finished code <a href='https://glitch.com/#!/project/guttural-birch'>here</a>.
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,13 +7,13 @@ videoUrl: ''
|
||||
localeTitle: Agregar un margen negativo a un elemento
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> El <code>margin</code> es una propiedad que controla la cantidad de espacio entre el <code>border</code> de un elemento y los elementos circundantes. Si establece el <code>margin</code> en un valor negativo, el elemento aumentará de tamaño. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Intente establecer el <code>margin</code> en un valor negativo como el del cuadro rojo. Cambie el <code>margin</code> del cuadro azul a <code>-15px</code> , para que llene todo el ancho horizontal del cuadro amarillo que lo rodea. </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -77,7 +77,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -7,13 +7,13 @@ videoUrl: ''
|
||||
localeTitle: Añadir bordes alrededor de sus elementos
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Los bordes CSS tienen propiedades como <code>style</code> , <code>color</code> y <code>width</code>.<br>Por ejemplo, si quisiéramos crear un borde rojo de 5 píxeles alrededor de un elemento HTML, podríamos usar esta clase: <blockquote> <style> <br> .thin-red-border { <br> border-color: red; <br> border-width: 5px; <br> border-style: solid; <br> } <br> </style> </blockquote></section>
|
||||
## Descripción
|
||||
<section id="description"> Los bordes CSS tienen propiedades como <code>style</code> , <code>color</code> y <code>width</code> Por ejemplo, si quisiéramos crear un borde rojo de 5 píxeles alrededor de un elemento HTML, podríamos usar esta clase: <blockquote> <estilo> <br> .thin-red-border { <br> color del borde: rojo; <br> ancho del borde: 5px; <br> estilo de borde: sólido; <br> } <br> </style> </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Crea una clase llamada <code>thick-green-border</code> . Esta clase debe agregar un borde verde sólido de 10 px alrededor de un elemento HTML. Aplica la clase a tu foto de gato. Recuerde que puede aplicar varias clases a un elemento utilizando su atributo de <code>class</code> , separando cada nombre de clase con un espacio. Por ejemplo: <code><img class="class1 class2"></code> </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -61,33 +61,34 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>Cosas que los gatos aman:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>pellizco de gato</li>
|
||||
<li>punteros laser</li>
|
||||
<li>lasaña</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>3 cosas que odian los gatos:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>tratamiento de pulgas</li>
|
||||
<li>trueno</li>
|
||||
<li>otros gatos</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Interior</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Exterior</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Amoroso</label>
|
||||
<label><input type="checkbox" name="personality"> Perezoso</label>
|
||||
<label><input type="checkbox" name="personality"> Energético</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="submit">Enviar</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
@ -99,7 +100,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Añadir diferentes márgenes a cada lado de un elemento
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> A veces querrá personalizar un elemento para que tenga un <code>margin</code> diferente en cada uno de sus lados. CSS le permite controlar el <code>margin</code> de los cuatro lados individuales de un elemento con las propiedades <code>margin-top</code> , <code>margin-right</code> , <code>margin-bottom</code> y <code>margin-left</code> . </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Dé a la caja azul un <code>margin</code> de <code>40px</code> en su lado superior e izquierdo, pero solo <code>20px</code> en su lado inferior y derecho. </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -83,7 +83,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -7,13 +7,13 @@ videoUrl: ''
|
||||
localeTitle: Añadir diferente relleno a cada lado de un elemento
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> A veces querrá personalizar un elemento para que tenga diferentes cantidades de <code>padding</code> en cada uno de sus lados. CSS le permite controlar el <code>padding</code> de los cuatro lados individuales de un elemento con las propiedades <code>padding-top</code> , <code>padding-right</code> , <code>padding-bottom</code> y <code>padding-left</code> . </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Dale a la caja azul un <code>padding</code> de <code>40px</code> en su lado superior e izquierdo, pero solo <code>20px</code> en su lado inferior y derecho. </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -84,7 +84,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -7,13 +7,13 @@ videoUrl: ''
|
||||
localeTitle: Añadir esquinas redondeadas con radio de borde
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Tu foto de gato tiene actualmente esquinas afiladas. Podemos redondear esas esquinas con una propiedad CSS llamada <code>border-radius</code> . </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Puede especificar un <code>border-radius</code> con píxeles. Dale a tu foto de gato un <code>border-radius</code> de <code>10px</code> de <code>10px</code> . Nota: este desafío permite múltiples soluciones posibles. Por ejemplo, puede agregar <code>border-radius</code> <code>.thick-green-border</code> clase <code>.thick-green-border</code> o a la clase <code>.smaller-image</code> . </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -61,33 +61,33 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>Cosas que los gatos aman:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>pellizco de gato</li>
|
||||
<li>punteros laser</li>
|
||||
<li>lasaña</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>3 cosas que odian los gatos:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>tratamiento de pulgas</li>
|
||||
<li>trueno</li>
|
||||
<li>otros gatos</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Interior</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Exterior</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Amoroso</label>
|
||||
<label><input type="checkbox" name="personality"> Perezoso</label>
|
||||
<label><input type="checkbox" name="personality"> Energético</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="submit">Enviar</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
@ -99,7 +99,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -7,13 +7,13 @@ videoUrl: ''
|
||||
localeTitle: Ajustar el margen de un elemento
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> El <code>margin</code> un elemento controla la cantidad de espacio entre el <code>border</code> un elemento y los elementos circundantes. Aquí, podemos ver que el cuadro azul y el cuadro rojo están anidados dentro del cuadro amarillo. Tenga en cuenta que el cuadro rojo tiene un <code>margin</code> más <code>margin</code> que el cuadro azul, lo que hace que parezca más pequeño. Cuando aumente el <code>margin</code> del cuadro azul, aumentará la distancia entre su borde y los elementos circundantes. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Cambie el <code>margin</code> del cuadro azul para que coincida con el del cuadro rojo. </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -78,7 +78,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -7,13 +7,13 @@ videoUrl: ''
|
||||
localeTitle: Ajustar el relleno de un elemento
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Ahora vamos a guardar nuestra aplicación Cat Photo por un tiempo y aprender más sobre el estilo de HTML. Es posible que ya hayas 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: <code>padding</code> , <code>margin</code> y <code>border</code> . El <code>padding</code> un elemento controla la cantidad de espacio entre el contenido del elemento y su <code>border</code> . Aquí, podemos ver que el cuadro azul y el cuadro rojo están anidados dentro del cuadro amarillo. Tenga en cuenta que el cuadro rojo tiene más <code>padding</code> que el cuadro azul. Cuando aumente el <code>padding</code> del cuadro azul, aumentará la distancia ( <code>padding</code> ) entre el texto y el borde que lo rodea. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Cambie el <code>padding</code> de su caja azul para que coincida con el de su caja roja. </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -76,7 +76,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Adjuntar un valor de reserva a una variable CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Cuando use su variable como un valor de propiedad CSS, puede adjuntar un valor de reserva al que su navegador volverá si la variable dada no es válida. <strong>Nota:</strong> este respaldo no se utiliza para aumentar la compatibilidad del navegador, y no funcionará en los navegadores IE. Más bien, se usa para que el navegador tenga un color para mostrar si no puede encontrar su variable. Así es como lo haces: <blockquote> fondo: var (- piel de pingüino, negro); </blockquote> Esto establecerá el fondo en negro si su variable no se estableció. Tenga en cuenta que esto puede ser útil para la depuración. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Parece que hay un problema con las variables proporcionadas a las <code>.penguin-top</code> y <code>.penguin-bottom</code> . En lugar de corregir el error tipográfico, agregue un valor alternativo de <code>black</code> a la propiedad de <code>background</code> de las <code>.penguin-top</code> y <code>.penguin-bottom</code> . </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -245,7 +245,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Variables CSS en cascada
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Cuando creas una variable, queda disponible para que la uses dentro del elemento en el que la creas. También está disponible dentro de cualquier elemento anidado dentro de él. Este efecto se conoce como <dfn>cascada</dfn> . Debido a la conexión en cascada, las variables CSS a menudo se definen en el elemento <dfn>: raíz</dfn> . <code>:root</code> es un selector de <dfn>pseudo-clase</dfn> que coincide con el elemento raíz del documento, generalmente el <code></code> elemento. Al crear sus variables en <code>:root</code> , estarán disponibles globalmente y se podrá acceder a ellas desde cualquier otro selector más adelante en la hoja de estilo. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Defina una variable llamada <code>--penguin-belly</code> en el selector de <code>:root</code> y dale el valor de <code>pink</code> . Luego puede ver cómo el valor caerá en cascada para cambiar el valor a rosa, en cualquier lugar donde se use esa variable. </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -241,7 +241,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Cambiar una variable para un área específica
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Cuando cree sus variables en <code>:root</code> , establecerán el valor de esa variable para toda la página. Luego puede sobrescribir estas variables configurándolas nuevamente dentro de un elemento específico. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Cambia el valor de <code>--penguin-belly</code> a <code>white</code> en la clase de <code>penguin</code> . </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -243,7 +243,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Cambiar el color del texto
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Ahora cambiemos el color de algunos de nuestros textos. Podemos hacer esto cambiando el <code>style</code> de su elemento <code>h2</code> . La propiedad que es responsable del color del texto de un elemento es la propiedad de estilo de <code>color</code> . A continuación le indicamos cómo establecería el color del texto de su elemento <code>h2</code> en azul: <code><h2 style="color: blue;">CatPhotoApp</h2></code> Tenga en cuenta que es una buena práctica finalizar las declaraciones de <code>style</code> línea con una <code>;</code> . </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Cambia el estilo de tu elemento <code>h2</code> para que su color de texto sea rojo. </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -34,33 +34,34 @@ tests:
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p>Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>Cosas que los gatos aman:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>pellizco de gato</li>
|
||||
<li>punteros laser</li>
|
||||
<li>lasaña</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>3 cosas que odian los gatos:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>tratamiento de pulgas</li>
|
||||
<li>trueno</li>
|
||||
<li>otros gatos</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Interior</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Exterior</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Amoroso</label>
|
||||
<label><input type="checkbox" name="personality"> Perezoso</label>
|
||||
<label><input type="checkbox" name="personality"> Energético</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="submit">Enviar</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
@ -72,7 +73,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Cambiar el tamaño de fuente de un elemento
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> El tamaño de fuente se controla mediante la propiedad CSS de <code>font-size</code> , como esta: <blockquote> h1 { <br> tamaño de fuente: 30px; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Dentro de la misma etiqueta <code><style></code> que contiene su clase de <code>red-text</code> , cree una entrada para los elementos <code>p</code> y establezca el <code>font-size</code> en 16 píxeles ( <code>16px</code> ). </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -38,33 +38,33 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>Cosas que los gatos aman:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>pellizco de gato</li>
|
||||
<li>punteros laser</li>
|
||||
<li>lasaña</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>3 cosas que odian los gatos:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>tratamiento de pulgas</li>
|
||||
<li>trueno</li>
|
||||
<li>otros gatos</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Interior</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Exterior</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Amoroso</label>
|
||||
<label><input type="checkbox" name="personality"> Perezoso</label>
|
||||
<label><input type="checkbox" name="personality"> Energético</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="submit">Enviar</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
@ -76,7 +76,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Crear una variable CSS personalizada
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Para crear una Variable CSS, solo necesitas darle un <code>name</code> con <code>two dashes</code> delante y asignarle un <code>value</code> como este: <blockquote> --penguin-piel: gris; </blockquote> Esto creará una variable llamada <code>--penguin-skin</code> y le asignará el valor de <code>gray</code> . Ahora puede usar esa variable en otra parte de su CSS para cambiar el valor de otros elementos a gris. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> En la clase de <code>penguin</code> , crea un nombre de variable <code>--penguin-skin</code> y dale un valor de <code>gray</code> </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -236,7 +236,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Dar un color de fondo a un elemento div
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Puede establecer el color de fondo de un elemento con la propiedad de <code>background-color</code> . Por ejemplo, si quisiera que el color de fondo de un elemento fuera <code>green</code> , lo pondría dentro de su elemento de <code>style</code> : <blockquote> .green-background { <br> color de fondo: verde; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Crea una clase llamada <code>silver-background</code> con el <code>background-color</code> de <code>background-color</code> de plata. Asigna esta clase a tu elemento <code>div</code> . </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -63,33 +63,33 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>Cosas que los gatos aman:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>pellizco de gato</li>
|
||||
<li>punteros laser</li>
|
||||
<li>lasaña</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>3 cosas que odian los gatos:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>tratamiento de pulgas</li>
|
||||
<li>trueno</li>
|
||||
<li>otros gatos</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Interior</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Exterior</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Amoroso</label>
|
||||
<label><input type="checkbox" name="personality"> Perezoso</label>
|
||||
<label><input type="checkbox" name="personality"> Energético</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="submit">Enviar</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
@ -101,7 +101,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Importar una fuente de Google
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Además de especificar las fuentes comunes que se encuentran en la mayoría de los sistemas operativos, también podemos especificar fuentes web personalizadas y no estándar para su uso en nuestro sitio web. Existen varias fuentes de fuentes web en Internet, pero, para este ejemplo, nos centraremos en la biblioteca de fuentes de Google. <a href="https://fonts.google.com/" target="_blank">Google Fonts</a> es una biblioteca gratuita de fuentes web que puede utilizar en su CSS haciendo referencia a la URL de la fuente. Entonces, sigamos adelante, importemos y apliquemos una fuente de Google (tenga en cuenta que si Google está bloqueado en su país, deberá saltarse este desafío). Para importar una fuente de Google, puede copiar la URL de la (s) fuente (s) de la biblioteca de fuentes de Google y luego pegarla en su HTML. Para este desafío, importaremos la fuente <code>Lobster</code> . Para hacer esto, copie el siguiente fragmento de código y péguelo en la parte superior de su editor de código (antes del elemento de <code>style</code> apertura): <code><link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"></code> Ahora puede usar la fuente <code>Lobster</code> en su CSS usando <code>Lobster</code> como FAMILY_NAME como en el siguiente ejemplo: <br> <code>font-family: FAMILY_NAME, GENERIC_NAME;</code> . GENERIC_NAME es opcional y es una fuente alternativa en caso de que la otra fuente especificada no esté disponible. Esto está cubierto en el próximo desafío. Los nombres de las familias distinguen entre mayúsculas y minúsculas y deben estar entre comillas si hay un espacio en el nombre. Por ejemplo, necesita citas para usar la fuente <code>"Open Sans"</code> , pero no para usar la fuente <code>Lobster</code> . </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Cree una regla CSS de la <code>font-family</code> que use la fuente <code>Lobster</code> y asegúrese de que se aplicará a su elemento <code>h2</code> . </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -49,33 +49,33 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>Cosas que los gatos aman:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>pellizco de gato</li>
|
||||
<li>punteros laser</li>
|
||||
<li>lasaña</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>3 cosas que odian los gatos:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>tratamiento de pulgas</li>
|
||||
<li>trueno</li>
|
||||
<li>otros gatos</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Interior</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Exterior</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Amoroso</label>
|
||||
<label><input type="checkbox" name="personality"> Perezoso</label>
|
||||
<label><input type="checkbox" name="personality"> Energético</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="submit">Enviar</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
@ -87,7 +87,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Mejora la compatibilidad con los fallbacks del navegador
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Cuando trabaje con CSS, es probable que tenga problemas de compatibilidad con el navegador en algún momento. Esta es la razón por la que es importante proporcionar interrupciones en el navegador para evitar posibles problemas. Cuando su navegador analiza el CSS de una página web, ignora cualquier propiedad que no reconozca o admita. Por ejemplo, si usa una variable CSS para asignar un color de fondo en un sitio, Internet Explorer ignorará el color de fondo porque no admite las variables CSS. En ese caso, el navegador utilizará cualquier valor que tenga para esa propiedad. Si no puede encontrar ningún otro valor establecido para esa propiedad, volverá al valor predeterminado, que generalmente no es ideal. Esto significa que si desea proporcionar un respaldo de navegador, es tan fácil como proporcionar otro valor más ampliamente soportado inmediatamente antes de su declaración. De esa manera, un navegador antiguo tendrá algo en lo que basarse, mientras que un navegador más nuevo simplemente interpretará cualquier declaración que se presente más adelante en la cascada. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Parece que se está utilizando una variable para establecer el color de fondo de la clase <code>.red-box</code> . Mejoremos la compatibilidad de nuestro navegador agregando otra declaración de <code>background</code> justo antes de la declaración existente y establezcamos su valor en rojo. </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -51,7 +51,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Heredar estilos del elemento cuerpo
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Ahora hemos comprobado que cada página HTML tiene un elemento de <code>body</code> y que su elemento de <code>body</code> también se puede diseñar con CSS. Recuerde, puede diseñar su elemento de <code>body</code> como cualquier otro elemento HTML, y todos los demás elementos heredarán los estilos de su elemento de <code>body</code> . </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Primero, cree un elemento <code>h1</code> con el texto <code>Hello World</code> Then, vamos a dar a todos los elementos de su página el color <code>green</code> agregando <code>color: green;</code> a la declaración de estilo de tu elemento <code>body</code> . Finalmente, asigne a su elemento <code>body</code> la familia de fuentes de <code>monospace</code> agregando <code>font-family: monospace;</code> a la declaración de estilo de tu elemento <code>body</code> . </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -57,7 +57,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Hacer imágenes circulares con un radio de borde
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Además de los píxeles, también puede especificar el <code>border-radius</code> del <code>border-radius</code> usando un porcentaje. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Dale a tu foto de gato un <code>border-radius</code> de <code>border-radius</code> del <code>50%</code> . </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -61,33 +61,33 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>Cosas que los gatos aman:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>pellizco de gato</li>
|
||||
<li>punteros laser</li>
|
||||
<li>lasaña</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>3 cosas que odian los gatos:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>tratamiento de pulgas</li>
|
||||
<li>trueno</li>
|
||||
<li>otros gatos</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Interior</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Exterior</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Amoroso</label>
|
||||
<label><input type="checkbox" name="personality"> Perezoso</label>
|
||||
<label><input type="checkbox" name="personality"> Energético</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="submit">Enviar</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
@ -99,7 +99,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Anular todos los otros estilos usando Importante
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> ¡Hurra! Acabamos de demostrar que los estilos en línea anularán todas las declaraciones de CSS en su elemento de <code>style</code> . Pero espera. Hay una última forma de anular CSS. Este es el método más poderoso de todos. Pero antes de hacerlo, hablemos de por qué querría anular CSS. En muchas situaciones, usarás bibliotecas CSS. Estos pueden anular accidentalmente su propio CSS. Entonces, cuando necesite estar absolutamente seguro de que un elemento tiene un CSS específico, puede usarlo <code>!important</code> Volvamos a nuestra declaración de clase de <code>pink-text</code> . Recuerde que nuestra clase de <code>pink-text</code> fue anulada por las siguientes declaraciones de clase, declaraciones de id y estilos en línea. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Agreguemos la palabra clave <code>!important</code> para la declaración de color de su elemento de texto rosa para asegurarnos al 100% de que su elemento <code>h1</code> será rosa. Un ejemplo de cómo hacer esto es: <code>color: red !important;</code> </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -66,7 +66,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Anular declaraciones de clase por atributos de ID de estilo
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Acabamos de demostrar que los navegadores leen CSS de arriba a abajo. Eso significa que, en caso de conflicto, el navegador utilizará la declaración de CSS que haya sido la última. Pero aún no hemos terminado. Hay otras formas en que puedes anular CSS. ¿Recuerdas los atributos de identificación? Anulemos sus clases de <code>blue-text</code> <code>pink-text</code> <code>blue-text</code> , y hagamos que su elemento <code>h1</code> naranja, asignando una identificación al elemento <code>h1</code> y luego diseñando ese tipo de identificación. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Dale a tu elemento <code>h1</code> el atributo <code>id</code> del <code>orange-text</code> . Recuerde, los estilos de identificación tienen este aspecto: <code><h1 id="orange-text"></code> Deje las clases de <code>pink-text</code> <code>blue-text</code> y <code>pink-text</code> en su elemento <code>h1</code> . Cree una declaración CSS para su ID de <code>orange-text</code> en su elemento de <code>style</code> . Aquí hay un ejemplo de cómo se ve esto: <blockquote> # texto marrón { <br> color marrón; <br> } </blockquote> Nota: No importa si declara este CSS por encima o por debajo de la clase de texto rosado, ya que el atributo id siempre tendrá prioridad. </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -65,7 +65,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Anular declaraciones de clase con estilos en línea
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Así que hemos comprobado que las declaraciones de identificación anulan las declaraciones de clase, independientemente de dónde se declaren en su elemento de <code>style</code> CSS. Hay otras formas en que puedes anular CSS. ¿Recuerdas los estilos en línea? </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Use un <code>inline style</code> para tratar de hacer que nuestro elemento <code>h1</code> blanco. Recuerde, los estilos de línea se ven así: <code><h1 style="color: green;"></code> Deje las clases de <code>pink-text</code> <code>blue-text</code> y <code>pink-text</code> en su elemento <code>h1</code> . </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -64,7 +64,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Anular estilos en CSS subsiguiente
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Nuestra clase de "texto rosa" anuló la declaración CSS de nuestro elemento de <code>body</code> . Acabamos de demostrar que nuestras clases anularán el CSS del elemento <code>body</code> . Entonces, la siguiente pregunta lógica es: ¿qué podemos hacer para anular nuestra clase de <code>pink-text</code> ? </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Cree una clase CSS adicional llamada <code>blue-text</code> que le dé a un elemento el color azul. Asegúrate de que esté debajo de tu declaración de clase de <code>pink-text</code> . Aplique la clase de <code>blue-text</code> a su elemento <code>h1</code> además de su clase de <code>pink-text</code> , y veamos cuál gana. La aplicación de múltiples atributos de clase a un elemento HTML se realiza con un espacio entre ellos como este: <code>class="class1 class2"</code> Nota: No importa en qué orden se enumeran las clases en el elemento HTML. Sin embargo, lo que es importante es el orden de las declaraciones de <code>class</code> en la sección <code><style></code> . La segunda declaración siempre tendrá prioridad sobre la primera. Debido a que <code>.blue-text</code> se declara segundo, anula los atributos de <code>.pink-text</code> </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -56,7 +56,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Priorizar un estilo sobre otro
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> A veces, sus elementos HTML recibirán múltiples estilos que entren en conflicto entre sí. Por ejemplo, su elemento <code>h1</code> no puede ser verde y rosa al mismo tiempo. Veamos qué sucede cuando creamos una clase que hace que el texto sea rosa, luego lo aplicamos a un elemento. ¿Nuestra clase <em>anulará</em> el <code>color: green;</code> del elemento del <code>body</code> <code>color: green;</code> Propiedad CSS? </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Crea una clase de CSS llamada <code>pink-text</code> que le da a un elemento el color rosa. Dale a tu elemento <code>h1</code> la clase de <code>pink-text</code> . </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -51,7 +51,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Establecer la familia de fuentes de un elemento
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Puede establecer qué fuente debe usar un elemento, usando la propiedad de <code>font-family</code> . Por ejemplo, si quisiera establecer la fuente de su elemento <code>h2</code> en <code>sans-serif</code> , usaría el siguiente CSS: <blockquote> h2 { <br> Familia tipográfica: sans-serif; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Haz que todos tus elementos <code>p</code> utilicen la fuente <code>monospace</code> . </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -42,33 +42,33 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>Cosas que los gatos aman:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>pellizco de gato</li>
|
||||
<li>punteros laser</li>
|
||||
<li>lasaña</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>3 cosas que odian los gatos:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>tratamiento de pulgas</li>
|
||||
<li>trueno</li>
|
||||
<li>otros gatos</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Interior</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Exterior</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Amoroso</label>
|
||||
<label><input type="checkbox" name="personality"> Perezoso</label>
|
||||
<label><input type="checkbox" name="personality"> Energético</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="submit">Enviar</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
@ -80,7 +80,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Establecer la id de un elemento
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Además de las clases, cada elemento HTML también puede tener un atributo <code>id</code> . El uso de atributos de <code>id</code> tiene varios beneficios: puede usar una <code>id</code> para diseñar un solo elemento y más adelante aprenderá que puede usarlos para seleccionar y modificar elementos específicos con JavaScript. <code>id</code> atributos de <code>id</code> deben ser únicos. Los navegadores no harán cumplir esto, pero es una buena práctica ampliamente aceptada. Entonces, por favor, no le dé a más de un elemento el mismo atributo de <code>id</code> . Aquí hay un ejemplo de cómo le das a tu elemento <code>h2</code> el ID de <code>cat-photo-app</code> : <code><h2 id="cat-photo-app"></code> </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Dale a tu elemento de <code>form</code> la identificación <code>cat-photo-form</code> . </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -63,33 +63,33 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<p>Cosas que los gatos aman:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>pellizco de gato</li>
|
||||
<li>punteros laser</li>
|
||||
<li>lasaña</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>3 cosas que odian los gatos:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>tratamiento de pulgas</li>
|
||||
<li>trueno</li>
|
||||
<li>otros gatos</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Interior</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Exterior</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Amoroso</label>
|
||||
<label><input type="checkbox" name="personality"> Perezoso</label>
|
||||
<label><input type="checkbox" name="personality"> Energético</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="submit">Enviar</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
@ -101,7 +101,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Tamaño de sus imágenes
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> CSS tiene una propiedad llamada <code>width</code> que controla el ancho de un elemento. Al igual que con las fuentes, usaremos <code>px</code> (píxeles) para especificar el ancho de la imagen. Por ejemplo, si quisiéramos crear una clase CSS llamada <code>larger-image</code> que diera a los elementos HTML un ancho de 500 píxeles, usaríamos: <blockquote> <estilo> <br> .larger-image { <br> ancho: 500px; <br> } <br> </style> </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Cree una clase llamada <code>smaller-image</code> y utilícela para cambiar el tamaño de la imagen de modo que tenga solo 100 píxeles de ancho. <strong>Nota</strong> <br> Debido a las diferencias de implementación del navegador, es posible que tenga que estar al 100% del zoom para pasar las pruebas en este desafío. </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -50,33 +50,33 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>Cosas que los gatos aman:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>pellizco de gato</li>
|
||||
<li>punteros laser</li>
|
||||
<li>lasaña</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>3 cosas que odian los gatos:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>tratamiento de pulgas</li>
|
||||
<li>trueno</li>
|
||||
<li>otros gatos</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Interior</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Exterior</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Amoroso</label>
|
||||
<label><input type="checkbox" name="personality"> Perezoso</label>
|
||||
<label><input type="checkbox" name="personality"> Energético</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="submit">Enviar</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
@ -88,7 +88,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Especifique cómo deben degradarse las fuentes
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Hay varias fuentes predeterminadas que están disponibles en todos los navegadores. Estas familias de fuentes genéricas incluyen <code>monospace</code> , <code>serif</code> y <code>sans-serif</code> Cuando una fuente no está disponible, puede indicar al navegador que se "degrade" a otra fuente. Por ejemplo, si deseaba que un elemento usara la fuente <code>Helvetica</code> , pero se degradara a la <code>sans-serif</code> cuando <code>Helvetica</code> no estaba disponible, lo especificará de la siguiente manera: <blockquote> pag { <br> Familia tipográfica: Helvetica, sans-serif; <br> } </blockquote> Los nombres genéricos de las familias de fuentes no distinguen entre mayúsculas y minúsculas. Además, no necesitan comillas porque son palabras clave CSS. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Para empezar, aplique la fuente <code>monospace</code> al elemento <code>h2</code> , de modo que ahora tenga dos fuentes: <code>Lobster</code> y <code>monospace</code> . En el último desafío, importó la fuente <code>Lobster</code> usando la etiqueta de <code>link</code> . Ahora comente la importación de la fuente <code>Lobster</code> (utilizando los comentarios HTML que aprendió anteriormente) de Google Fonts para que ya no esté disponible. Observe cómo su elemento <code>h2</code> se degrada a la fuente <code>monospace</code> . <strong>Nota</strong> <br> Si tiene la fuente Lobster instalada en su computadora, no verá la degradación porque su navegador puede encontrar la fuente. </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -54,33 +54,33 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>Cosas que los gatos aman:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>pellizco de gato</li>
|
||||
<li>punteros laser</li>
|
||||
<li>lasaña</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>3 cosas que odian los gatos:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>tratamiento de pulgas</li>
|
||||
<li>trueno</li>
|
||||
<li>otros gatos</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Interior</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Exterior</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Amoroso</label>
|
||||
<label><input type="checkbox" name="personality"> Perezoso</label>
|
||||
<label><input type="checkbox" name="personality"> Energético</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="submit">Enviar</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
@ -92,7 +92,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,14 +6,14 @@ videoUrl: ''
|
||||
localeTitle: Estilo de elementos múltiples con una clase CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Las clases le permiten usar los mismos estilos CSS en varios elementos HTML. Puedes ver esto aplicando tu clase de <code>red-text</code> al primer elemento <code>p</code> . </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions">
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -47,33 +47,33 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p>Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>Cosas que los gatos aman:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>pellizco de gato</li>
|
||||
<li>punteros laser</li>
|
||||
<li>lasaña</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>3 cosas que odian los gatos:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>tratamiento de pulgas</li>
|
||||
<li>trueno</li>
|
||||
<li>otros gatos</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Interior</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Exterior</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Amoroso</label>
|
||||
<label><input type="checkbox" name="personality"> Perezoso</label>
|
||||
<label><input type="checkbox" name="personality"> Energético</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="submit">Enviar</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
@ -85,7 +85,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,15 @@ videoUrl: ''
|
||||
localeTitle: Estilo del elemento HTML del cuerpo
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Ahora comencemos de nuevo y hablemos de la herencia CSS. Cada página HTML tiene un elemento de <code>body</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Podemos probar que el elemento del <code>body</code> existe aquí dándole un <code>background-color</code> de <code>background-color</code> de negro. Podemos hacer esto agregando lo siguiente a nuestro elemento de <code>style</code> : <blockquote> body { <br> background-color: black; <br> } </blockquote></section>
|
||||
|
||||
## Tests
|
||||
## Instrucciones
|
||||
<section id="instructions"> Podemos probar que el elemento del <code>body</code> existe aquí dándole un <code>background-color</code> de <code>background-color</code> de negro. Podemos hacer esto agregando lo siguiente a nuestro elemento de <code>style</code> : <blockquote> cuerpo { <br> color de fondo: negro; <br> } </blockquote></section>
|
||||
=======
|
||||
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -46,7 +48,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Comprender unidades absolutas versus unidades relativas
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Los últimos varios desafíos establecen el margen o el relleno de un elemento con píxeles ( <code>px</code> ). Los píxeles son un tipo de unidad de longitud, que es lo que le dice al navegador cómo dimensionar o espaciar un elemento. Además de <code>px</code> , CSS tiene una serie de opciones de unidades de longitud diferentes que puede utilizar. Los dos tipos principales de unidades de longitud son absolutos y relativos. Unidades absolutas vinculadas a unidades físicas de longitud. Por ejemplo, <code>in</code> y <code>mm</code> refieren a pulgadas y milímetros, respectivamente. Las unidades de longitud absoluta se aproximan a la medida real en una pantalla, pero hay algunas diferencias según la resolución de la pantalla. Las unidades relativas, como <code>em</code> o <code>rem</code> , son relativas a otro valor de longitud. Por ejemplo, <code>em</code> se basa en el tamaño de la fuente de un elemento. Si lo usa para establecer la propiedad de <code>font-size</code> sí, es relativo al <code>font-size</code> de <code>font-size</code> . <strong>Nota</strong> <br> Hay varias opciones de unidades relativas que están vinculadas al tamaño de la ventana gráfica. Están cubiertos en la sección Principios de diseño web responsivo. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Agregue una propiedad de <code>padding</code> al elemento con la clase <code>red-box</code> y <code>1.5em</code> a <code>1.5em</code> . </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -76,7 +76,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Usa una clase CSS para diseñar un elemento
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Las clases son estilos reutilizables que se pueden agregar a elementos HTML. Aquí hay un ejemplo de declaración de clase CSS: <blockquote> <estilo> <br> .blue-text { <br> color azul; <br> } <br> </style> </blockquote> Puede ver que hemos creado una clase CSS llamada <code>blue-text</code> dentro de la etiqueta <code><style></code> . Puede aplicar una clase a un elemento HTML como este: <code><h2 class="blue-text">CatPhotoApp</h2></code> Tenga en cuenta que en su elemento de <code>style</code> CSS, los nombres de clase comienzan con un punto. En el atributo de clase de los elementos HTML, el nombre de la clase no incluye el período. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Dentro de su elemento de <code>style</code> , cambie el selector <code>h2</code> a <code>.red-text</code> y actualice el valor del <code>blue</code> de <code>blue</code> a <code>red</code> . Déle a su elemento <code>h2</code> el atributo de <code>class</code> con un valor de <code>'red-text'</code> . </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -44,33 +44,33 @@ tests:
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p>Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>Cosas que los gatos aman:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>pellizco de gato</li>
|
||||
<li>punteros laser</li>
|
||||
<li>lasaña</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>3 cosas que odian los gatos:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>tratamiento de pulgas</li>
|
||||
<li>trueno</li>
|
||||
<li>otros gatos</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Interior</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Exterior</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Amoroso</label>
|
||||
<label><input type="checkbox" name="personality"> Perezoso</label>
|
||||
<label><input type="checkbox" name="personality"> Energético</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="submit">Enviar</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
@ -82,7 +82,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Use una variable CSS personalizada
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Después de crear su variable, puede asignar su valor a otras propiedades de CSS haciendo referencia al nombre que le dio. <blockquote> fondo: var (- piel de pingüino); </blockquote> Esto cambiará el fondo de cualquier elemento que estés apuntando a gris porque ese es el valor de la variable <code>--penguin-skin</code> . Tenga en cuenta que los estilos no se aplicarán a menos que los nombres de las variables coincidan exactamente. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Aplique la variable <code>--penguin-skin</code> a la propiedad de <code>background</code> de las clases <code>penguin-top</code> , <code>penguin-bottom</code> , <code>right-hand</code> y <code>left-hand</code> . </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -255,7 +255,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Usa una consulta de medios para cambiar una variable
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Las Variables CSS pueden simplificar la forma en que utiliza las consultas de medios. Por ejemplo, cuando su pantalla es más pequeña o más grande que el punto de interrupción de su consulta de medios, puede cambiar el valor de una variable y aplicará su estilo donde sea que se use. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> En el <code>:root</code> selector de <code>:root</code> de la <code>media query</code> , cámbielo para que <code>--penguin-size</code> se redefina y se le dé un valor de <code>200px</code> . Además, redefine <code>--penguin-skin</code> y dale un valor de <code>black</code> . Luego cambie el tamaño de la vista previa para ver este cambio en acción. </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -271,7 +271,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Use el código hexadecimal abreviado
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Muchas personas se sienten abrumadas 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 código hexadecimal de rojo <code>#FF0000</code> puede <code>#FF0000</code> a <code>#F00</code> . Esta forma abreviada proporciona un dígito para el rojo, un dígito para el verde y un dígito para el azul. Esto reduce el número total de colores posibles a alrededor de 4.000. Pero los navegadores interpretarán <code>#FF0000</code> y <code>#F00</code> como exactamente del mismo color. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Adelante, intente usar los códigos hexadecimales abreviados para colorear los elementos correctos. <table class="table table-striped"><tbody><tr><th> Color </th><th> Código hexadecimal corto </th></tr><tr><td> Cian </td><td> <code>#0FF</code> </td> </tr><tr><td> Verde </td><td> <code>#0F0</code> </td> </tr><tr><td> rojo </td><td> <code>#F00</code> </td> </tr><tr><td> Fucsia </td><td> <code>#F0F</code> </td> </tr></tbody></table></section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -59,13 +59,13 @@ tests:
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
<h1 class="red-text">Estoy rojo!</h1>
|
||||
|
||||
<h1 class="fuchsia-text">I am fuchsia!</h1>
|
||||
<h1 class="fuchsia-text">Estoy fucsia!</h1>
|
||||
|
||||
<h1 class="cyan-text">I am cyan!</h1>
|
||||
<h1 class="cyan-text">Estoy cian!</h1>
|
||||
|
||||
<h1 class="green-text">I am green!</h1>
|
||||
<h1 class="green-text">Estoy verde!</h1>
|
||||
|
||||
```
|
||||
|
||||
@ -75,7 +75,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Use un atributo de ID para diseñar un elemento
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Una cosa interesante acerca de los atributos de <code>id</code> es que, al igual que las clases, puedes aplicarles un estilo usando CSS. Sin embargo, una <code>id</code> no es reutilizable y solo debe aplicarse a un elemento. Una <code>id</code> también tiene una mayor especificidad (importancia) que una clase, por lo que si ambas se aplican al mismo elemento y tienen estilos en conflicto, se aplicarán los estilos de la <code>id</code> . Este es un ejemplo de cómo puede tomar su elemento con el atributo <code>id</code> de <code>cat-photo-element</code> y darle el color de fondo de verde. En su elemento de <code>style</code> : <blockquote> # cat-photo-element { <br> color de fondo: verde; <br> } </blockquote> Tenga en cuenta que dentro de su elemento de <code>style</code> , siempre hace referencia a las clases poniendo un <code>.</code> delante de sus nombres. Siempre hace referencia a los identificadores colocando un <code>#</code> delante de sus nombres. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Intente darle a su formulario, que ahora tiene el atributo <code>id</code> de <code>cat-photo-form</code> , un fondo verde. </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -69,31 +69,31 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<p>Cosas que los gatos aman:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>pellizco de gato</li>
|
||||
<li>punteros laser</li>
|
||||
<li>lasaña</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>3 cosas que odian los gatos:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>tratamiento de pulgas</li>
|
||||
<li>trueno</li>
|
||||
<li>otros gatos</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Interior</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Exterior</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Amoroso</label>
|
||||
<label><input type="checkbox" name="personality"> Perezoso</label>
|
||||
<label><input type="checkbox" name="personality"> Energético</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
@ -107,7 +107,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Usar selectores de atributos para elementos de estilo
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Ha estado asignando atributos de <code>id</code> o <code>class</code> a los elementos que desea diseñar específicamente. Estos son conocidos como ID y selectores de clase. Hay otros selectores de CSS que puede usar para seleccionar grupos personalizados de elementos para personalizar. Vamos a sacar CatPhotoApp de nuevo para practicar el uso de los selectores de CSS. Para este desafío, utilizará el selector de atributo <code>[attr=value]</code> para diseñar las casillas de verificación en CatPhotoApp. Este selector combina y diseña elementos con un valor de atributo específico. Por ejemplo, el código siguiente cambia los márgenes de todos los elementos con el <code>type</code> atributo y el valor de <code>radio</code> correspondiente: <blockquote> [tipo = 'radio'] { <br> margen: 20px 0px 20px 0px; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Con el selector de atributos de <code>type</code> , intente dar a las casillas de verificación en CatPhotoApp un margen superior de 10 px y un margen inferior de 15 px. </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -67,33 +67,33 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<p>Cosas que los gatos aman:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>pellizco de gato</li>
|
||||
<li>punteros laser</li>
|
||||
<li>lasaña</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>3 cosas que odian los gatos:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>tratamiento de pulgas</li>
|
||||
<li>trueno</li>
|
||||
<li>otros gatos</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Interior</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Exterior</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Amoroso</label>
|
||||
<label><input type="checkbox" name="personality"> Perezoso</label>
|
||||
<label><input type="checkbox" name="personality"> Energético</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="submit">Enviar</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
@ -105,7 +105,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Usar la notación de las agujas del reloj para especificar el margen de un elemento
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Intentemos esto de nuevo, pero con <code>margin</code> esta vez. En lugar de especificar individualmente las propiedades <code>margin-top</code> , <code>margin-right</code> , <code>margin-bottom</code> y <code>margin-left</code> un elemento, puede especificarlas todas en una línea, como esta: <code>margin: 10px 20px 10px 20px;</code> Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado que utilizando las instrucciones de margen específicas para cada lado. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Use la <code>Clockwise Notation</code> para dar al elemento con la clase de <code>blue-box</code> un margen de <code>40px</code> en su lado superior e izquierdo, pero solo <code>20px</code> en su lado inferior y derecho. </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -80,7 +80,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Use la notación de las agujas del reloj para especificar el relleno de un elemento
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> En lugar de especificar las propiedades <code>padding-top</code> , <code>padding-right</code> , <code>padding-bottom</code> y <code>padding-left</code> individualmente, puede especificarlas todas en una línea, como esta: <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 que utilizando las instrucciones de relleno específicas para cada lado. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Use la notación de las agujas del reloj para darle a la clase ".blue-box" un <code>padding</code> de <code>40px</code> en su lado superior e izquierdo, pero solo <code>20px</code> en su lado inferior y derecho. </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -82,7 +82,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Usar los selectores de CSS para elementos de estilo
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Con CSS, hay cientos de <code>properties</code> de CSS que puedes usar para cambiar la apariencia de un elemento en tu página. Cuando ingresó <code><h2 style="color: red">CatPhotoApp</h2></code> , estaba diseñando ese elemento <code>h2</code> individual con <code>inline CSS</code> , que significa <code>Cascading Style Sheets</code> . Esa es una forma de especificar el estilo de un elemento, pero hay una mejor manera de aplicar <code>CSS</code> . En la parte superior de tu código, crea un bloque de <code>style</code> como este: <blockquote> <estilo> <br> </style> </blockquote> Dentro de ese bloque de estilo, puede crear un <code>CSS selector</code> para todos los elementos <code>h2</code> . Por ejemplo, si desea que todos los elementos <code>h2</code> sean rojos, debe agregar una regla de estilo que se vea así: <blockquote> <estilo> <br> h2 {color: rojo;} <br> </style> </blockquote> Tenga en cuenta que es importante tener llaves de apertura y cierre ( <code>{</code> y <code>}</code> ) alrededor de las reglas de estilo de cada elemento. También debe asegurarse de que la definición de estilo de su elemento se encuentre entre las etiquetas de estilo de apertura y de cierre. Finalmente, asegúrese de agregar un punto y coma al final de cada una de las reglas de estilo de su elemento. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Borre el atributo de estilo del elemento <code>h2</code> y, en su lugar, cree un bloque de <code>style</code> CSS. Agrega el CSS necesario para convertir todos los elementos <code>h2</code> azul. </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -40,22 +40,22 @@ tests:
|
||||
```html
|
||||
<h2 style="color: red">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p>Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>Cosas que los gatos aman:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>pellizco de gato</li>
|
||||
<li>punteros laser</li>
|
||||
<li>lasaña</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>3 cosas que odian los gatos:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>tratamiento de pulgas</li>
|
||||
<li>trueno</li>
|
||||
<li>otros gatos</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
@ -78,7 +78,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Usa las variables CSS para cambiar varios elementos a la vez
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> <dfn>Las Variables CSS</dfn> son una forma poderosa de cambiar muchas propiedades de estilo CSS a la vez cambiando solo un valor. Siga las instrucciones a continuación para ver cómo cambiar solo tres valores puede cambiar el estilo de muchos elementos. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> En la clase de <code>penguin</code> , cambie el valor de <code>black</code> a <code>gray</code> , el valor de <code>gray</code> a <code>white</code> y el de <code>yellow</code> a <code>orange</code> . </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -243,7 +243,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Use el código hexadecimal para colores específicos
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> ¿Sabías que hay otras formas de representar los colores en CSS? Una de estas formas se llama código hexadecimal, o <code>hex code</code> para abreviar. Usualmente usamos <code>decimals</code> , o números de base 10, que usan los símbolos del 0 al 9 para cada dígito. <code>Hexadecimals</code> (o <code>hex</code> ) son números base 16. Esto significa que utiliza dieciséis símbolos distintos. Al igual que los decimales, los símbolos 0-9 representan los valores de cero a nueve. Luego, A, B, C, D, E, F representan los valores de diez a quince. En total, de 0 a F puede representar un dígito en <code>hexadecimal</code> , lo que nos da un total de 16 valores posibles. Puede encontrar más información sobre los <a target="_blank" href="https://en.wikipedia.org/wiki/Hexadecimal">números hexadecimales aquí</a> . En CSS, podemos usar 6 dígitos hexadecimales para representar colores, dos para cada uno de los componentes rojo (R), verde (G) y azul (B). Por ejemplo, <code>#000000</code> es negro y también es el valor más bajo posible. Puede encontrar más información sobre el <a target="_blank" href="https://en.wikipedia.org/wiki/RGB_color_model">sistema de color RGB aquí</a> . <blockquote> cuerpo { <br> color: # 000000; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Reemplace la palabra <code>black</code> en el color de fondo de nuestro elemento del <code>body</code> con su representación en <code>hex code</code> , <code>#000000</code> . </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -46,7 +46,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Usa el código hexadecimal para mezclar colores
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Para revisar, los códigos hexadecimales usan 6 dígitos hexadecimales para representar los colores, dos para cada uno de los componentes rojo (R), verde (G) y azul (B). ¡De estos tres colores puros (rojo, verde y azul), podemos variar las cantidades de cada uno para crear más de 16 millones de otros colores! Por ejemplo, el naranja es rojo puro, mezclado con un poco de verde y sin azul. En código hexadecimal, esto se traduce en ser <code>#FFA500</code> . El dígito <code>0</code> es el número más bajo en código hexadecimal y representa una ausencia completa de color. El dígito <code>F</code> es el número más alto en código hexadecimal y representa el brillo máximo posible. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Reemplace las palabras de color en nuestro elemento de <code>style</code> con sus códigos hexadecimales correctos. <table class="table table-striped"><tbody><tr><th> Color </th><th> Código hexadecimal </th></tr><tr><td> Dodger Blue </td><td> <code>#1E90FF</code> </td> </tr><tr><td> Verde </td><td> <code>#00FF00</code> </td> </tr><tr><td> naranja </td><td> <code>#FFA500</code> </td> </tr><tr><td> rojo </td><td> <code>#FF0000</code> </td> </tr></tbody></table></section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -59,13 +59,13 @@ tests:
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
<h1 class="red-text">Estoy rojo!</h1>
|
||||
|
||||
<h1 class="green-text">I am green!</h1>
|
||||
<h1 class="green-text">Estoy verde!</h1>
|
||||
|
||||
<h1 class="dodger-blue-text">I am dodger blue!</h1>
|
||||
<h1 class="dodger-blue-text">Estoy azul de dodger!</h1>
|
||||
|
||||
<h1 class="orange-text">I am orange!</h1>
|
||||
<h1 class="orange-text">Estoy naranja!</h1>
|
||||
|
||||
```
|
||||
|
||||
@ -75,7 +75,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,13 +6,13 @@ videoUrl: ''
|
||||
localeTitle: Usa RGB para mezclar colores
|
||||
---
|
||||
|
||||
## Description
|
||||
## Descripción
|
||||
<section id="description"> Al igual que con el código hexadecimal, puede mezclar colores en RGB utilizando combinaciones de diferentes valores. </section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Reemplace los códigos hexadecimales en nuestro elemento de <code>style</code> con sus valores RGB correctos. <table class="table table-striped"><tbody><tr><th> Color </th><th> RGB </th></tr><tr><td> Azul </td><td> <code>rgb(0, 0, 255)</code> </td> </tr><tr><td> rojo </td><td> <code>rgb(255, 0, 0)</code> </td> </tr><tr><td> Orquídea </td><td> <code>rgb(218, 112, 214)</code> </td> </tr><tr><td> Tierra de siena </td><td> <code>rgb(160, 82, 45)</code> </td> </tr></tbody></table></section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -59,13 +59,13 @@ tests:
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
<h1 class="red-text">Estoy rojo!</h1>
|
||||
|
||||
<h1 class="orchid-text">I am orchid!</h1>
|
||||
<h1 class="orchid-text">Estoy orquídea!</h1>
|
||||
|
||||
<h1 class="sienna-text">I am sienna!</h1>
|
||||
<h1 class="sienna-text">Estoy siena!</h1>
|
||||
|
||||
<h1 class="blue-text">I am blue!</h1>
|
||||
<h1 class="blue-text">Estoy azul!</h1>
|
||||
|
||||
```
|
||||
|
||||
@ -75,7 +75,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -6,7 +6,9 @@ videoUrl: ''
|
||||
localeTitle: Usar valores RGB para elementos de color
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
## Descripción
|
||||
|
||||
<section id="description"> Otra forma de representar colores en CSS es mediante el uso de valores <code>RGB</code> . El valor RGB para negro se ve así: <code>rgb(0, 0, 0)</code> El valor RGB para blanco se ve así: <code>rgb(255, 255, 255)</code> En lugar de usar seis dígitos hexadecimales como lo hace con el código hexadecimal, con <code>RGB</code> usted Especifique el brillo de cada color con un número entre 0 y 255. Si hace los cálculos, los dos dígitos de un color son 16 veces 16, lo que nos da 256 valores totales. Entonces, <code>RGB</code> , que comienza a contar desde cero, tiene exactamente el mismo número de valores posibles que el código hexadecimal. Aquí hay un ejemplo de cómo cambiarías el fondo del cuerpo a naranja usando su código RGB.
|
||||
```css
|
||||
body {
|
||||
@ -15,10 +17,10 @@ body {
|
||||
```
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
## Instrucciones
|
||||
<section id="instructions"> Reemplazemos el código hexadecimal en el color de fondo de nuestro elemento del <code>body</code> con el valor RGB para negro: <code>rgb(0, 0, 0)</code> </section>
|
||||
|
||||
## Tests
|
||||
## Pruebas
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -52,7 +54,7 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solución
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
|
||||
@ -22,7 +22,7 @@ localeTitle: 10001st
|
||||
//Looping until primes array is equal to n
|
||||
while (primes.length < n){
|
||||
|
||||
//All the primes numbers of a number is always <= it's square root
|
||||
//All the primes numbers of a number is always <= its square root
|
||||
let max = Math.ceil(Math.sqrt(num));
|
||||
|
||||
for (let i = 0; primes[i] <= max; i++){
|
||||
|
||||
@ -45,7 +45,7 @@ localeTitle: Freecodecamp خوارزمية الإدراج دليل فرز
|
||||
arr[j+1] = arr[j];
|
||||
j = j-1;
|
||||
}
|
||||
arr[j+1] = key; // place element key at it's correct place
|
||||
arr[j+1] = key; // place element key at its correct place
|
||||
}
|
||||
}
|
||||
|
||||
@ -77,7 +77,7 @@ localeTitle: Freecodecamp خوارزمية الإدراج دليل فرز
|
||||
while j>=0 and key < arr[j] :
|
||||
arr[j+1] = arr[j]
|
||||
j -= 1
|
||||
arr[j+1] = key # place element key at it's correct place
|
||||
arr[j+1] = key # place element key at its correct place
|
||||
|
||||
# array to be sorted
|
||||
arr = [12, 11, 13, 5, 6]
|
||||
|
||||
@ -23,7 +23,7 @@ function nthPrime(n) {
|
||||
//Looping until primes array is equal to n
|
||||
while (primes.length < n){
|
||||
|
||||
//All the primes numbers of a number is always <= it's square root
|
||||
//All the primes numbers of a number is always <= its square root
|
||||
let max = Math.ceil(Math.sqrt(num));
|
||||
|
||||
for (let i = 0; primes[i] <= max; i++){
|
||||
|
||||
@ -3,7 +3,7 @@ title: Continuous Integration
|
||||
---
|
||||
## Continuous Integration
|
||||
|
||||
At it's most basic, continuous integration (CI) is an agile development methodology in which developers regularly merge their code directly to the main source, usually a remote `master` branch. In order to ensure that no breaking changes are introduced, a full test suite is run on every potentiual build to regression test the new code, i.e. test that the new code does not break existing, working features.
|
||||
At its most basic, continuous integration (CI) is an agile development methodology in which developers regularly merge their code directly to the main source, usually a remote `master` branch. In order to ensure that no breaking changes are introduced, a full test suite is run on every potentiual build to regression test the new code, i.e. test that the new code does not break existing, working features.
|
||||
|
||||
This approach requires good test coverage of the code base, meaning that a majority, if not all, of the code has tests which ensure its features are fully functional. Ideally continuous integration would be practiced together with full <a href='https://guide.freecodecamp.org/agile/test-driven-development' target='_blank' rel='nofollow'>Test-Driven Development</a>.
|
||||
|
||||
|
||||
@ -3,13 +3,13 @@ title: Integration Hell
|
||||
---
|
||||
## Integration Hell
|
||||
|
||||
Integration Hell is a slang term for when all the members of a development team goes through the process of implementing their code at random times with no way to incorporate the different pieces of code into one seamless sring of code. The development team will have to spend several hours or days testing and tweaking the code to get it all to work.
|
||||
Integration Hell is a slang term for when all the members of a development team goes through the process of implementing their code at random times with no way to incorporate the different pieces of code into one seamless string of code. The development team will have to spend several hours or days testing and tweaking the code to get it all to work.
|
||||
|
||||
In practice, the longer components are developed in isolation, the more the interfaces tend to diverge from what is expected. When the components are finally integrated at the end of the project, it would take a great deal more time than allocated, often leading to deadline pressures, and difficult integration. This painful integration work at the end of the project is the eponymous hell.
|
||||
In practice, the longer components are developed in isolation, the more the interfaces tend to diverge from what is expected. When the components are finally integrated at the end of the project, it would take a great deal more time than allocated, often leading to deadline pressures and difficult integration. This painful integration work at the end of the project is the eponymous hell.
|
||||
|
||||
Continuous Integration, the idea that a development team should use specific tools to "continously integrate" the parts of the code they are working on multiple times a day so that the tools can match the different "chunks" of code together to integrate much more seamlessly than before.
|
||||
Continuous Integration is the idea that a development team should use specific tools to "continously integrate" the parts of the code they are working on multiple times a day so that the tools can match the different "chunks" of code together to integrate much more seamlessly than before.
|
||||
|
||||
Code Repositories, like Git (and it's open source interface we all know and love, GitHub) allow development teams to organize their efforts so that more time can be spent coding and less time on worrying if the different parts of the code will all integrate.
|
||||
Code Repositories, like Git (and its open source interface we all know and love, GitHub) allow development teams to organize their efforts so that more time can be spent coding and less time on worrying if the different parts of the code will all integrate.
|
||||
|
||||
<a href='https://guide.freecodecamp.org/agile/continuous-integration/'>Continuous Integration</a> is the Agile antidote to this problem. Integration is still painful, but doing it at least daily keeps interfaces from diverging too much.
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ And from this discussion, the team creates a list of behaviors that they work on
|
||||
|
||||
When commiting to action items, make sure you focus on 1 - 3. It is better to get a couple done, than commiting to more and not doing them. If it is difficult to come up with actions, try running experiments: Write down what you will do and what you want to achieve with that. In the following retro check if what you did achieved what you had planned. If it did not - you can learn out of the experiment and try out something else.
|
||||
|
||||
A good approach to find out which topics should be discussed is *"Discuss and mention"*. It consists on a board with as many columns as people in the team (you can use something like Trello or just a regular whiteboard) and two more for the things to "discuss" and those to be "mentioned". Everybody has 10 minutes to fill their column with things from the last sprint they want to highlight (these are represented with cards or Post-it's). Afterwards, each team member explains each of their own items. Finally, each team member chooses which topics they think should be mentioned or discussed, by moving the card/post-it to the respectively column. The team then decides which topics should be discussed and talk about them for about 10 minutes.
|
||||
A good approach to find out which topics should be discussed is *"Discuss and mention"*. It consists on a board with as many columns as people in the team (you can use something like Trello or just a regular whiteboard) and two more for the things to "discuss" and those to be "mentioned". Everybody has 10 minutes to fill their column with things from the last sprint they want to highlight (these are represented with cards or Post-its). Afterwards, each team member explains each of their own items. Finally, each team member chooses which topics they think should be mentioned or discussed, by moving the card/post-it to the respectively column. The team then decides which topics should be discussed and talk about them for about 10 minutes.
|
||||
|
||||
Invite the scrum team only to the Retrospective. (Delivery Team, Product Owner, Scrum Master). Discourage managers, stakeholders, business partners, etc. They are a distraction and can hinder the sense of openness the team needs.
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ A binary search tree (BST) adds these two characteristics:
|
||||
The BST is built up on the idea of the <a href='https://guide.freecodecamp.org/algorithms/search-algorithms/binary-search' targer='_blank' rel='nofollow'>binary search</a> algorithm, which allows for fast lookup, insertion and removal of nodes. The way that they are set up means that, on average, each comparison allows the operations to skip about half of the tree, so that each lookup, insertion or deletion takes time proportional to the logarithm of the number of items stored in the tree, `O(log n)`. However, some times the worst case can happen, when the tree isn't balanced and the time complexity is `O(n)` for all three of these functions. That is why self-balancing trees (AVL, red-black, etc.) are a lot more effective than the basic BST.
|
||||
|
||||
|
||||
**Worst case scenario example:** This can happen when you keep adding nodes that are *always* larger than the node before (it's parent), the same can happen when you always add nodes with values lower than their parents.
|
||||
**Worst case scenario example:** This can happen when you keep adding nodes that are *always* larger than the node before (its parent), the same can happen when you always add nodes with values lower than their parents.
|
||||
|
||||
### Basic operations on a BST
|
||||
- Create: creates an empty tree.
|
||||
|
||||
@ -46,7 +46,7 @@ Sorting algorithms are said to be `in place` if they require a constant `O(1)` e
|
||||
|
||||
* `Insertion sort` and `Quick-sort` are `in place` sort as we move the elements about the pivot and do not actually use a separate array which is NOT the case in merge sort where the size of the input must be allocated beforehand to store the output during the sort.
|
||||
|
||||
* `Merge Sort` is an example of `out place` sort as it require extra memory space for it's operations.
|
||||
* `Merge Sort` is an example of `out place` sort as it require extra memory space for its operations.
|
||||
|
||||
### Best possible time complexity for any comparison based sorting
|
||||
Any comparison based sorting algorithm must make at least nLog2n comparisons to sort the input array, and Heapsort and merge sort are asymptotically optimal comparison sorts.This can be easily proved by drawing the desicion tree diagram.
|
||||
|
||||
@ -13,7 +13,7 @@ Adding bootstrap to your page is a fast process, just add the following to the `
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||
```
|
||||
|
||||
You will also need to add the following between the `body` tags in your code. With bootstrap you'll be using `<div>` tags when using many of Bootstrap's features, each tag will have it's own unique set of classes applied that allows the tag to perform it's task. Other sections of this Bootstrap guide will show more examples of how Bootstrap uses `<div>` tags. (`<div>` tags are not exclusive to Bootstrap however Bootstrap makes use of them.). Below is the code that would would add to the `body` tags in your code to finish getting started. Keep in mind that while this creates the container, the page will still remain blank until you add content to the container.
|
||||
You will also need to add the following between the `body` tags in your code. With bootstrap you'll be using `<div>` tags when using many of Bootstrap's features, each tag will have its own unique set of classes applied that allows the tag to perform its task. Other sections of this Bootstrap guide will show more examples of how Bootstrap uses `<div>` tags. (`<div>` tags are not exclusive to Bootstrap however Bootstrap makes use of them.). Below is the code that would would add to the `body` tags in your code to finish getting started. Keep in mind that while this creates the container, the page will still remain blank until you add content to the container.
|
||||
```html
|
||||
<div class="alert alert-success" role="alert">
|
||||
<strong>Congratulations!</strong>
|
||||
|
||||
@ -6,7 +6,7 @@ title: Get Started
|
||||
There are several ways to get started with Bulma.
|
||||
* <b>npm</b> install the bulma package.
|
||||
* cdnjs <b>CDN</b> to link to the bulma stylesheet.
|
||||
* use the <b>Github Repository</b> to get the latest development version.
|
||||
* use the <b>GitHub Repository</b> to get the latest development version.
|
||||
|
||||
1) Using npm
|
||||
```terminal
|
||||
|
||||
@ -150,7 +150,7 @@ double a[5], b[5]
|
||||
a = b;
|
||||
```
|
||||
You can **only** deal with the values in an array one by one. You **cannot assign all at once**, when you learn about pointers later, the reasons will be clear.
|
||||
>(Basically, the first element of an array points to a memory address, and the elements after that are the "houses" next to that first one. So technically an array is just it's first element's memory address. When you want to assign the second array the first array, you run into error due to differing types, or you are trying to change the second memory address of the first element in the second array.)
|
||||
>(Basically, the first element of an array points to a memory address, and the elements after that are the "houses" next to that first one. So technically an array is just its first element's memory address. When you want to assign the second array the first array, you run into error due to differing types, or you are trying to change the second memory address of the first element in the second array.)
|
||||
|
||||
- When you want to create an array, you have to either tell its size, or assign values to it. Do not do this:
|
||||
```C
|
||||
|
||||
@ -43,7 +43,7 @@ sizeof(int)
|
||||
```
|
||||
Let's start from `sizeof`. The `malloc` needs to know how much space allocate for your data. In fact a `int` variable will use less storage space then a `double` one.
|
||||
It is generally not safe to assume the size of any datatype. For example, even though most implementations of C and C++ on 32-bit systems define type int to be four octets, this size may change when code is ported to a different system, breaking the code.
|
||||
`sizeof` as it's name suggests generates the size of a variable or datatype.
|
||||
`sizeof` as its name suggests generates the size of a variable or datatype.
|
||||
|
||||
```C
|
||||
arrayPointer = (int*) malloc(sizeof(int) * arrayDimension);
|
||||
|
||||
@ -46,7 +46,7 @@ typedef struct{
|
||||
point image_dimension = {640,480};
|
||||
```
|
||||
|
||||
Or if you prefer to set it's values following a different order:
|
||||
Or if you prefer to set its values following a different order:
|
||||
|
||||
```C
|
||||
point img_dim = { .y = 480, .x = 640 };
|
||||
|
||||
@ -112,7 +112,7 @@ Return the completed inventory in alphabetical order.
|
||||
* The variable **index** stores the location (index) of a product.
|
||||
* The helper function `getProductIndex()` returns the index of a specified product. It iterates through each element of the array that it is called on until it can find the name parameter. If the product is not found in the inventory, `undefined` is returned.
|
||||
* Then, each item in the new inventory (delivery) is worked through:
|
||||
* **index** is set to the result of invoking the helper function i.e., search the new inventory for that product name and return it's index.
|
||||
* **index** is set to the result of invoking the helper function i.e., search the new inventory for that product name and return its index.
|
||||
* If the item is found, quantity of the product is added to the quantity of the same product in current inventory.
|
||||
* If the item is not found, the entire product (name and quantity) is added to the current inventory.
|
||||
* The updated inventory, **arr1**, is then sorted by product name (held in `arr1[x][1]`).
|
||||
|
||||
@ -19,7 +19,7 @@ function nthPrime(n) {
|
||||
//Looping until primes array is equal to n
|
||||
while (primes.length < n){
|
||||
|
||||
//All the primes numbers of a number is always <= it's square root
|
||||
//All the primes numbers of a number is always <= its square root
|
||||
let max = Math.ceil(Math.sqrt(num));
|
||||
|
||||
for (let i = 0; primes[i] <= max; i++){
|
||||
|
||||
@ -5,7 +5,7 @@ title: Change Inline CSS Conditionally Based on Component State
|
||||
|
||||
## Hint 1:
|
||||
|
||||
You are going to be checking the length of ```this.state.input``` so use it's ```.length``` property.
|
||||
You are going to be checking the length of ```this.state.input``` so use its ```.length``` property.
|
||||
|
||||
```
|
||||
this.state.input.length
|
||||
|
||||
@ -6,7 +6,7 @@ title: Create a Controlled Form
|
||||
Creating a controlled form is the same process as creating a controlled input, except you need to handle a submit event.
|
||||
|
||||
First, create a controlled input that stores its value in state, so that there is a single source of truth.
|
||||
(This is what you did in the previous challenge.) Create an input element, set it's value attribute to the input variable located in state. Remember, state can be accessed by `this.state`. Next, set the input element's `onChange` attribute to call the function 'handleChange'.
|
||||
(This is what you did in the previous challenge.) Create an input element, set its value attribute to the input variable located in state. Remember, state can be accessed by `this.state`. Next, set the input element's `onChange` attribute to call the function 'handleChange'.
|
||||
|
||||
### Solution
|
||||
```react.js
|
||||
|
||||
@ -4,7 +4,7 @@ title: Render with an If/Else Condition
|
||||
## Render with an If/Else Condition
|
||||
|
||||
### Method
|
||||
Inside of the render method of the component, write if/else statements that each have it's own return method that has different JSX. This gives programmers the ability to render different UI according to various conditions.
|
||||
Inside of the render method of the component, write if/else statements that each have its own return method that has different JSX. This gives programmers the ability to render different UI according to various conditions.
|
||||
|
||||
First, wrap the current return method inside of an if statement and set the condition to check if the variable 'display' is true. Remember, you access state using `this.state`.
|
||||
|
||||
|
||||
@ -186,7 +186,7 @@ Finally, we need a method to do the actual splitting and we can use `Array.slice
|
||||
### Code Explanation:
|
||||
|
||||
* Array smaller than size is returned nested.
|
||||
* For any array larger than size, it's splited in two. First segment is nested and concatnated with second second segment which makes a recursive call.
|
||||
* For any array larger than size, it is split in two. First segment is nested and concatenated with second segment which makes a recursive call.
|
||||
|
||||
#### Relevant Links
|
||||
|
||||
|
||||
@ -62,7 +62,7 @@ We have to return a sentence with title case. This means that the first letter w
|
||||
|
||||
We are modifying the `replaceAt` function using prototype to facilitate the use of the program.
|
||||
|
||||
Split the string by white spaces, and create a variable to track the updated title. Then we use a loop to turn turn the first character of the word to uppercase and the rest to lowercase. by creating concatenated string composed of the whole word in lowercase with the first character replaced by it's uppercase.
|
||||
Split the string by white spaces, and create a variable to track the updated title. Then we use a loop to turn turn the first character of the word to uppercase and the rest to lowercase. by creating concatenated string composed of the whole word in lowercase with the first character replaced by its uppercase.
|
||||
|
||||
#### Relevant Links
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ title: Global vs. Local Scope in Functions
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
Remember that global scope means that the variable is available throughout the entire code. Local scope, means that the variable is available within a certain range.
|
||||
|
||||
In this exercise, you have an `outerWear` variable in global scope with "T-shirt" as it's value. You should now create another variable named `outerWear`, but this time within the function `myOutfit()`. The basic code solution as follows:
|
||||
In this exercise, you have an `outerWear` variable in global scope with "T-shirt" as its value. You should now create another variable named `outerWear`, but this time within the function `myOutfit()`. The basic code solution is as follows:
|
||||
|
||||
```javascript
|
||||
var outerWear = "T-shirt";
|
||||
|
||||
@ -32,7 +32,7 @@ It's required to use template literals to return a list as every element in the
|
||||
```const resultDisplayArray = arr.map(item => `<li class="text-warning">${item}</li>`);```
|
||||
|
||||
## No map() solution
|
||||
Despite it's a less flexible solution, if you know the number of elements in advance, you can enumerate them as in
|
||||
Despite being a less flexible solution, if you know the number of elements in advance, you can enumerate them as in
|
||||
|
||||
```const resultDisplayArray = [`<li class="text-warning">${arr[0]}</li>`,
|
||||
`<li class="text-warning">${arr[1]}</li>`
|
||||
|
||||
@ -118,7 +118,7 @@ This problem does not involve rearranging the input into different combinations
|
||||
|
||||
* First define an object with all pair possibilities, this allows us to easily find by key or value.
|
||||
* Split `str` into a characters array so we can use each letter to find its pair.
|
||||
* Use the map function to map each character in the array to an array with the character and it's matching pair, creating a 2D array.
|
||||
* Use the map function to map each character in the array to an array with the character and its matching pair, creating a 2D array.
|
||||
|
||||
#### Relevant Links
|
||||
|
||||
|
||||
@ -67,7 +67,7 @@ Leave anything that doesn't come between A-Z as it is.
|
||||
* A string variable `nstr` is declared and initialized to store the decoded string.
|
||||
* The for loop is used to loop through each character of the input string.
|
||||
* If the character is not uppercase English alphabets(i.e. its ascii doesn't lie between 65 and 91 ), we'll leave it as it is and <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue' target='_blank' rel='nofollow'>continue</a> with next iteration.
|
||||
* If it's the uppercase English alphabet, we'll subtract 13 from it's ascii code.
|
||||
* If it's the uppercase English alphabet, we'll subtract 13 from its ascii code.
|
||||
* If the ascii code is less than 78, it'll get out of range when subtracted by 13 so we'll add 26 (number of letters in English alphabets) to it so that after A it'll go back to Z. e.g. M(77)  77-13 = 64(Not an English alphabet) +26 = 90  Z(90).
|
||||
|
||||
#### Relevant Links
|
||||
|
||||
@ -96,10 +96,10 @@ The first expression gets evaluated if it's false, and the second gets evaluated
|
||||
|
||||
 <a href='https://ideone.com/zu5RCq' target='_blank' rel='nofollow'>IDEOne it!</a>
|
||||
|
||||
The `:else` keyword can be used in place of a logical expression in the last expression pair in `cond`. It signifies that it's corresponding expression should be evaluated if all other boolean expressions evaluate to false. It is the same as putting `true` as the last boolean expression.
|
||||
The `:else` keyword can be used in place of a logical expression in the last expression pair in `cond`. It signifies that its corresponding expression should be evaluated if all other boolean expressions evaluate to false. It is the same as putting `true` as the last boolean expression.
|
||||
|
||||
## Special Forms and Evalution
|
||||
You may have noticed that the rules of evaluating conditional expressions is a bit different from other expressions. Conditional expression are a part of a group of expressions called _special forms_. This means that they don't follow normal Clojure evaluation rules.
|
||||
You may have noticed that the rules of evaluating conditional expressions are a bit different from other expressions. Conditional expressions are a part of a group of expressions called _special forms_. This means that they don't follow normal Clojure evaluation rules.
|
||||
|
||||
As you now know, a conditional expression only evaluates the subexpression that corresponds to the boolean result. This means that invalid code within a conditional expression won't be evaluated in some cases. Consider the two `if` expressions below. Although `(+ 1 "failure")` is an invalid expression, Clojure only raises an exception when the condition is `false`.
|
||||
|
||||
@ -120,7 +120,7 @@ Compare this with the behavior of `my-if` defined below:
|
||||
|
||||
 <a href='https://ideone.com/U7cVI4' target='_blank' rel='nofollow'>IDEOne it!</a>
|
||||
|
||||
`my-if` is a function with normal evaluation rules, so all of it's subexpressions must be evaluted before it can be evaluted.
|
||||
`my-if` is a function with normal evaluation rules, so all of its subexpressions must be evaluted before it can be evaluted.
|
||||
|
||||
Clojure has plenty of useful macros like these for all kinds of tasks. Try having a look at <a href='https://clojuredocs.org/' target='_blank' rel='nofollow'>the Clojure documentation</a> and see if you can find any more!
|
||||
|
||||
|
||||
@ -38,7 +38,7 @@ Popular AWS services include:
|
||||
* CloudFormation (Infrastructure as Code)
|
||||
|
||||
#### AWS Certifications
|
||||
AWS offers many different certifications for it's practitioners. There are different tiers to AWS certs as well as role-based certifications.
|
||||
AWS offers many different certifications for its practitioners. There are different tiers to AWS certs as well as role-based certifications.
|
||||
The tiers are:
|
||||
* Foundational (Cloud Practitioner)
|
||||
* Associate (Solutions Architect, Developer, SysOps Administrator)
|
||||
|
||||
@ -5,7 +5,7 @@ title: Firebase
|
||||
|
||||
|
||||
### Overview
|
||||
Firebase, in it's most basic form, was acquired by Google in October 2014. Since then, Google has acquired additional companies that complimented the original Firebase product. This selection of software tools now makes up the current selection of Firebase tools that are on offer today.
|
||||
Firebase, in its most basic form, was acquired by Google in October 2014. Since then, Google has acquired additional companies that complimented the original Firebase product. This selection of software tools now makes up the current selection of Firebase tools that are on offer today.
|
||||
|
||||
### Firebase Main Features
|
||||
Firebase main features are grouped to 3 categories:
|
||||
|
||||
@ -45,7 +45,7 @@ Here are some examples of databases that use the key-value approach:
|
||||
- [Oracle NoSQL Database](https://www.oracle.com/database/nosql/index.html)
|
||||
- [Cassandra](http://cassandra.apache.org) (hybrid between key-value and column-oriented databases)
|
||||
- [Voldemort](http://www.project-voldemort.com/voldemort/)
|
||||
- [Consul KV store](https://www.consul.io/intro/getting-started/kv.html) (a tool with it's own key-value store)
|
||||
- [Consul KV store](https://www.consul.io/intro/getting-started/kv.html) (a tool with its own key-value store)
|
||||
|
||||
#### More Information:
|
||||
* Key-value databases on [Wikipedia](https://en.wikipedia.org/wiki/Key-value_database)
|
||||
|
||||
@ -5,7 +5,7 @@ title: Dynamic Programming
|
||||
## Dynamic Programming
|
||||
|
||||
Dynamic Programming(DP) is a programming technique for solving problems where the computations of its subproblems overlap: you write your program in a way that avoids recomputing already solved problems.
|
||||
This technique, it's usually applied in conjunction with memoization which is an optimization technique where you cache previously computed results, and return the cached result when the same computation is needed again.
|
||||
This technique is usually applied in conjunction with memoization which is an optimization technique where you cache previously computed results, and return the cached result when the same computation is needed again.
|
||||
|
||||
An example with Fibonacci's series which is defined as:
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ In .net programming, heap has three generations called generation 0, 1, 2. Gener
|
||||
|
||||
Generations 1 and 2 has object which has the longer life time. GC on generations 1 and 2 will not happen until the generations 0 has sufficient memory to allocate.
|
||||
|
||||
Its not advisable to invoke the GC programmatically. It's good to let it happend on its own. GC get call whenever the generation 0 gets filled. GC will not impact the performance of your program.
|
||||
Its not advisable to invoke the GC programmatically. It's good to let it happen on its own. GC gets called whenever the generation 0 gets filled. GC will not impact the performance of your program.
|
||||
|
||||
Garbage collection is the process in which programs try to free up memory space that is no longer used by variables, objects, and such. Garbage collection is implemented differently for every language. Most high-level programming languages have some sort of garbage collection built in. Low-level programming languages may add garbage collection through libraries.
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ title: Docker
|
||||
|
||||
[Docker](https://www.docker.com/) is a widely-used container platform available for Linux, Windows, and Mac, as well as cloud providers like AWS and Azure.
|
||||
|
||||
A common use case would be to package an app and all it's requirements in a container. The container can then be used during development, passed to quality assurance/testing, and on to production/operations. This eliminates the "works on my machine" mentality, as the container effectively _is_ the machine, no matter what actual hardware it may be running on.
|
||||
A common use case would be to package an app and all its requirements in a container. The container can then be used during development, passed to quality assurance/testing, and on to production/operations. This eliminates the "works on my machine" mentality, as the container effectively _is_ the machine, no matter what actual hardware it may be running on.
|
||||
|
||||
After you are done setting up your computer and installig docker, you can simply test your Docker by running command:
|
||||
|
||||
|
||||
@ -120,7 +120,7 @@ Docker by default takes space from **/** drive of host system to store data. Ove
|
||||
Let the partition created is **mypart**
|
||||
- Then, run following command
|
||||
`$ docker run –it -v /mypart:/data centos`
|
||||
- **mypart** is a partition in base system and **data** is the folder where docker will store it's data.
|
||||
- **mypart** is a partition in base system and **data** is the folder where docker will store its data.
|
||||
- **v** - volume
|
||||
|
||||
### Attaching dvd to a container
|
||||
|
||||
@ -21,7 +21,7 @@ const int y = 10; // y is set to 10.
|
||||
const_cast<int &>(y) = 20; // undefined behaviour.
|
||||
```
|
||||
### dynamic_cast
|
||||
Dynamic cast is used to cast an object within it's class hierarchy (to parent, from parent and to siblings). Dynamic cast can only be called on polymorphic classes. Thus, the original class in this case `MyClass` must have a virtual member, which is present in the form of the virtual destructor.
|
||||
Dynamic cast is used to cast an object within its class hierarchy (to parent, from parent and to siblings). Dynamic cast can only be called on polymorphic classes. Thus, the original class in this case `MyClass` must have a virtual member, which is present in the form of the virtual destructor.
|
||||
|
||||
If dynamic cast fails, it will return a `nullptr`. Dynamic cast may be useful in determination of object types at runtime. However, it should be noted that dynamic cast is not free and in some cases other techniques may prove to be more efficient at determination of class type at runtime.
|
||||
|
||||
|
||||
@ -78,7 +78,7 @@ Now let's read about a new type of variable-
|
||||
#### Static variable
|
||||
|
||||
Static variables : When a variable is declared as static, space for it gets allocated for the lifetime of the program. Even if the function is called multiple times, space for the static variable is allocated only once and the value of variable in the previous call gets carried through the next function call. This is useful for implementing coroutines in C/C++ or any other application where previous state of function needs to be stored.
|
||||
In layman terms , it means that a normal variable when goes out of scope looses it's identity (value) , but a static variable has a global scope and retain it's value till end of program , but unlike global variable it is not necessary to declare it at start of program.
|
||||
In layman's terms , it means that when a normal variable goes out of scope it loses its identity (value), but a static variable has a global scope and retains its value until the end of the program, but unlike a global variable it is not necessary to declare it at the start of the program.
|
||||
|
||||
#### EXTRA-
|
||||
Static is a keyword in C++ used to give special characteristics to an element. Static elements are allocated storage only once in a program lifetime in static storage area. And they have a scope till the program lifetime.
|
||||
|
||||
@ -113,7 +113,7 @@ for(auto it = v.begin(); it != v.end(); it++) { //notice use of auto keyword
|
||||
cout<<*it<<endl; //Will print out string that the iterator is currently ppointing to
|
||||
}
|
||||
```
|
||||
From here, you can do all sorts of cool stuff, like manipulating the vector or mess around with it's order as you please!
|
||||
From here, you can do all sorts of cool stuff, like manipulating the vector or mess around with its order as you please!
|
||||
|
||||
### Some useful member functions
|
||||
The standard template library (STL) also provide different *methods* for you:
|
||||
|
||||
@ -32,7 +32,7 @@ To use an enum, you can declare a variable of its type and assign a value to it:
|
||||
|
||||
`Gender myVar = Gender.Male;`
|
||||
|
||||
You can also cast an enumeration name value to its underlying integer value and visa versa:
|
||||
You can also cast an enumeration name value to its underlying integer value and vice versa:
|
||||
|
||||
```
|
||||
Console.WriteLine($"Male: {(int)Gender.Male}");
|
||||
|
||||
@ -5,7 +5,7 @@ title: CSS Preprocessors
|
||||
## CSS Preprocessors
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
CSS Preprocessors are increasingly becoming a mainstay in the workflow of front end web developers. CSS is an incredibly complicated and nuanced language, and in an effort to make it's usage easier, developers often turn to using preprocessors such as SASS or LESS.
|
||||
CSS Preprocessors are increasingly becoming a mainstay in the workflow of front end web developers. CSS is an incredibly complicated and nuanced language, and in an effort to make its usage easier, developers often turn to using preprocessors such as SASS or LESS.
|
||||
|
||||
CSS Preprocessors compile the code which is written using a special compiler, and then use that to create a css file, which can then be refereneced by the main HTML document. When using any CSS Preprocessor, you will be able to program in normal CSS just as you would if the preprocessor were not in place, but you also have more options available to you. Some, such as SASS, has specific style standards which are meant make the writing of the document even easier, such as the freedom to omit braces if you choose to do so.
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: CSS3 Flexible Box
|
||||
---
|
||||
## CSS3 Flexible Box
|
||||
The Flexbox model provides for an efficient way to layout, align, and distribute space among elements within your document — even when the viewport and the size of your elements is dynamic or unknown.
|
||||
The Flexbox model provides for an efficient way to lay out, align, and distribute space among elements within your document - even when the viewport and the size of your elements is dynamic or unknown.
|
||||
|
||||
The most important idea behind the Flexbox model is that the parent container can alter its items' width/height/order to best fill the available space. A flex container expands items to fill available free space, or shrinks them to prevent overflow.<sup>1</sup>
|
||||
|
||||
@ -19,9 +19,16 @@ Flexbox can be used to center any amount of given elements inside one element. A
|
||||
}
|
||||
```
|
||||
|
||||
Let's break down this example. First we set the display property to "flex" so we can apply our flexbox properties. Next we declare the way flexbox will handle our elements. This can either be in a row, or in a column. Setting it to row will align the elements horizontal inside the element. The column will align them vertical.
|
||||
Let's break down this example. First we set the display property to "flex" so we can apply our flexbox properties. Next we declare the way flexbox will handle our elements. This can either be in a row or in a column. Setting it to row will align the elements horizontal inside the element. The column will align them vertical.
|
||||
|
||||
Now lets have a short look at "justify-content". This property declares how elements are distributed inside the parent element. We chose the "center" value. This means all elements inside this element will be centered. "Flex-start" will align everything to the left, and "flex-end" to the right.
|
||||
|
||||
There are three slightly more interesting options for `justify-content` you might want to try out. "space-between" will evenly space the children out across the available space, pushing the outermost children to the edges. "space-evenly" ensures the same amount of space between the items; this can look a little more centralized. "space-around" gives them equal space all around themselves, a little like a margin - two adjacent children will have double the space where they touch, and only a single amount where they're alongside the border.
|
||||
|
||||
`justify-content` defines the behavior of child elements on the main axis. What about vertical? This is where you'll need `align-items`, which defines how items lie on the cross-axis. Keep in mind that whether you're in a row or a column will determine what your main and your cross axis is.
|
||||
|
||||
`flex-start`, `center` and `flex-end` behave as before - left, center and right have become top, center and bottom. Other options are `baseline`, whereby all children will centralize themselves down a single baseline, and `stretch`, whereby they will stretch to fill the container.
|
||||
|
||||
Now lets have a short look at "justify-content". This property declares how elements are distributed inside the parent element. We chose the "center" value. This means all elements inside this element will be centered.
|
||||
|
||||
#### More Information:
|
||||
To get a complete understanding of Flexbox, read <a href="https://medium.freecodecamp.org/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af" target='_blank' rel="nofollow">Understanding Flexbox Everything you need to know</a> on the FreeCodeCamp Medium page.
|
||||
@ -30,7 +37,7 @@ For an interactive guide go through <a href="https://medium.freecodecamp.org/the
|
||||
|
||||
Both of these are great resources by Ohans Emmanuel.
|
||||
|
||||
Yet another great visual guide that is in-depth but easy to follow can be found in <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank" rel="nofolow"> A Guide to Flexbox</a> by <a href="https://css-tricks.com" target="_blank" rel="nofolow">CSS-Tricks</a>
|
||||
Yet another great visual guide that is in-depth but easy to follow can be found in <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank" rel="nofollow"> A Guide to Flexbox</a> by <a href="https://css-tricks.com" target="_blank" rel="nofolow">CSS-Tricks</a>
|
||||
|
||||
### Sources
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@ h1 {
|
||||
text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
### CSS3 Box Shadow
|
||||
|
||||
@ -11,7 +11,7 @@ It can automatically assign items to _areas_, size and resize them, take care of
|
||||
|
||||
- You can easily have a 12-column grid with one line of CSS. `grid-template-columns: repeat(12, 1fr)`
|
||||
- Grid lets you move things in any direction. Unlike Flex, where you can move items either horizontally (`flex-direction: row`) or vertically (`flex-direction: column`) - not both at the same time, Grid lets you move any _grid item_ to any predefined _grid area_ on the page. The items you move do not have to be adjacent.
|
||||
- With CSS Grid, you can **change the order of HTML elements using only CSS**. Move something from top to the right, move elements that were in footer to the sidebar etc. Instead of moving the `<div>` from `<footer>` to `<aside>` in the HTML, you can just change it's placement with `grid-area` in the CSS stylesheet.
|
||||
- With CSS Grid, you can **change the order of HTML elements using only CSS**. Move something from top to the right, move elements that were in footer to the sidebar etc. Instead of moving the `<div>` from `<footer>` to `<aside>` in the HTML, you can just change its placement with `grid-area` in the CSS stylesheet.
|
||||
|
||||
### Grid vs. Flex
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Object Fit
|
||||
---
|
||||
# Object Fit
|
||||
|
||||
The `object-fit` property specifies how an element responds to the width / height of it's parent box.
|
||||
The `object-fit` property specifies how an element responds to the width / height of its parent box.
|
||||
|
||||
This property can be used for image, video, or any other media. It can also be used with the `object-position` property to get more control on how the media is displayed.
|
||||
|
||||
|
||||
@ -59,7 +59,7 @@ h1{
|
||||
## CSS Color Properties explained
|
||||
|
||||
* Colors by Name:
|
||||
- These are pretty self explanatory. Each color is represented by it's name.
|
||||
- These are pretty self explanatory. Each color is represented by its name.
|
||||
|
||||
* Hexadecimal:
|
||||
- These colors are represented by hex triplets.
|
||||
|
||||
@ -3,7 +3,7 @@ title: Width Property
|
||||
---
|
||||
## Width Property
|
||||
|
||||
The width property sets the width of an element. It can be a keyword value, a length value (any value followed by a CSS unit like px or em), percentage, or it can be inherited by it's parent. By default, it's value is auto.
|
||||
The width property sets the width of an element. It can be a keyword value, a length value (any value followed by a CSS unit like px or em), percentage, or it can be inherited by its parent. By default, its value is auto.
|
||||
|
||||
**Note**: The width property does not include padding, borders, or margins; it sets the width of the area inside the padding, border, and margin of the element!
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ The `text-indent` property can also inherit from its parent element using `inher
|
||||
For example:
|
||||
- `text-indent: inherit;`
|
||||
|
||||
The 'text-indent' property can be reset to it's initial CSS property default value.
|
||||
The 'text-indent' property can be reset to its initial CSS property default value.
|
||||
|
||||
For example:
|
||||
- 'text-indent: initial;'
|
||||
|
||||
@ -3,7 +3,7 @@ title: Useful screenshot shortcuts
|
||||
---
|
||||
|
||||
### DevTools screenshot functionality
|
||||
When using Chrome developer tools, it can be useful to capture a screenshot of the entire page. And while there are add-ons to achieve this, google chrome has it's own functionality built in.
|
||||
When using Chrome developer tools, it can be useful to capture a screenshot of the entire page. And while there are add-ons to achieve this, google chrome has its own functionality built in.
|
||||
|
||||
## Steps
|
||||
1. Open Chrome Devtools
|
||||
|
||||
@ -66,7 +66,7 @@ This message shows that your installation appears to be working correctly.
|
||||
```
|
||||
|
||||
### What is containerization then:
|
||||
Simply put, it is nothing more than packaging of a process/application and it's dependencies into a distributable image which can run in isolation.
|
||||
Simply put, it is nothing more than packaging of a process/application and its dependencies into a distributable image which can run in isolation.
|
||||
|
||||
### Why do we need Docker:
|
||||
It makes the life of software engineers very smooth as they will always work on the same development environment.
|
||||
|
||||
@ -3,7 +3,7 @@ title: Erlang Term Storage
|
||||
---
|
||||
## Erlang Term Storage
|
||||
|
||||
Erlang Term Storage, normally abreviated as ETS, is an in-memory database built into OTP, it's accessible within Elixir, and is a powerful alternative to solutions like Redis when your application runs on a single node.
|
||||
Erlang Term Storage, normally abreviated as ETS, is an in-memory database built into OTP, its accessible within Elixir, and is a powerful alternative to solutions like Redis when your application runs on a single node.
|
||||
|
||||
## Quick Start
|
||||
To create an ETS table you first need to initalize a table `tableName = :ets.new(:table_otp_name, [])`, once you have initalized a table you can: insert data, lookup values, delete data, and more.
|
||||
|
||||
@ -7,7 +7,7 @@ title: libGDX
|
||||
libGDX is a free and open-source game-development application framework written in the Java programming language with some C and C++ components for performance dependent code.
|
||||
|
||||
### Overview
|
||||
LibGDX supports both 2d and 3d game development, and is written in Java. In addition to Java, other JVM languages, such as Kotlin or Scala can be used to program libGDX games. At it's core, libGDX uses LWJGL 3 to handle basic game functions such as graphics, input, and audio. LibGDX offers a large API to simplify game programming. LibGDX has an informative [wiki](https://github.com/libgdx/libgdx/wiki) on it's Github page, and there are many tutorials on the internet.
|
||||
LibGDX supports both 2d and 3d game development, and is written in Java. In addition to Java, other JVM languages, such as Kotlin or Scala can be used to program libGDX games. At its core, libGDX uses LWJGL 3 to handle basic game functions such as graphics, input, and audio. LibGDX offers a large API to simplify game programming. LibGDX has an informative [wiki](https://github.com/libgdx/libgdx/wiki) on its Github page, and there are many tutorials on the internet.
|
||||
|
||||
#### Resources:
|
||||
|
||||
|
||||
@ -109,7 +109,7 @@ func (u User) updateLoginCount {
|
||||
|
||||
### Modifying properties via methods
|
||||
|
||||
To modify the data of an object from within one of it's methods, the object must be a pointer. An example might look like this:
|
||||
To modify the data of an object from within one of its methods, the object must be a pointer. An example might look like this:
|
||||
|
||||
```go
|
||||
// SetEmail sets the user's email address
|
||||
|
||||
@ -4,7 +4,7 @@ title: Blockquote Tag
|
||||
## Blockquote Tag
|
||||
|
||||
### Purpose
|
||||
The HTML `<blockquote>` element breaks out a quote from the surrounding content. This allows the reader to clearly see the quotation as material attributed to it's original author.
|
||||
The HTML `<blockquote>` element breaks out a quote from the surrounding content. This allows the reader to clearly see the quotation as material attributed to its original author.
|
||||
|
||||
### Usage
|
||||
Just like the "H" tags send signals to a reader that the information is important, the blockquote alerts a reader that the information they're reading is from an outside source. The `<blockquote>` tag can include A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the `<cite>` element.
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
title: HTML5 Semantic Elements
|
||||
---
|
||||
## HTML5 Semantic Elements
|
||||
Semantic HTML elements clearly describe it's meaning in a human and machine readable way. Elements such as `<header>`, `<footer>` and `<article>` are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.
|
||||
Semantic HTML elements clearly describe its meaning in a human and machine readable way. Elements such as `<header>`, `<footer>` and `<article>` are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.
|
||||
|
||||
|
||||
### A Quick History
|
||||
HTML was originally created as a markup language to describe documents on the early internet. As the internet grew and was adopted by more people, it's needs changed. Where the internet was originally inteded for sharing scientific documents, now people wanted to share other things as well. Very quickly, people started wanting to make the web look nicer. Because the web was not initially built to be designed, programmers used different hacks to get things laid out in different ways. Rather than using the ```<table></table>``` to describe information using a table, programmers would use them to position other elements on a page. As the use of visually designed layouts progressed, programmers started to use a generic "non-semantic" tag like `<div>`. They would often give these elements a `class` or `id` attribute to describe their purpose. For example, instead of `<header>` this was often written as `<div class="header">`. As HTML5 is still relatively new, this use of non-semantic elements is still very common on websites today.
|
||||
HTML was originally created as a markup language to describe documents on the early internet. As the internet grew and was adopted by more people, its needs changed. Where the internet was originally inteded for sharing scientific documents, now people wanted to share other things as well. Very quickly, people started wanting to make the web look nicer. Because the web was not initially built to be designed, programmers used different hacks to get things laid out in different ways. Rather than using the ```<table></table>``` to describe information using a table, programmers would use them to position other elements on a page. As the use of visually designed layouts progressed, programmers started to use a generic "non-semantic" tag like `<div>`. They would often give these elements a `class` or `id` attribute to describe their purpose. For example, instead of `<header>` this was often written as `<div class="header">`. As HTML5 is still relatively new, this use of non-semantic elements is still very common on websites today.
|
||||
|
||||
#### List of new semantic elements
|
||||
The semantic elements added in HTML5 are:
|
||||
|
||||
@ -27,7 +27,7 @@ There are a couple ways you can tacklet this, but for this tutorial let's focus
|
||||
|
||||
|
||||
### Example of Centering a Div Tag with Margins
|
||||
If you specify a `width` on your child div you can use `margin: auto`. This will center your child `<div>` by evenly distributing it's left-and-right margins.
|
||||
If you specify a `width` on your child div you can use `margin: auto`. This will center your child `<div>` by evenly distributing its left-and-right margins.
|
||||
|
||||
```css
|
||||
.parent {
|
||||
|
||||
@ -17,7 +17,7 @@ These access modifiers can be applied to fields, methods and classes (Classes ar
|
||||
#### Private Access Modifier
|
||||
Allows a variable or method to only be accessed in the class in which it was created. No other class beyond the class that created the variable or method can access it. This is closely similar to your internal organs. They are only accessible to the owner. To make a variable or method private, you simply append the `private` keyword before the variable or method type, like `private int age`.
|
||||
|
||||
Let us use `private` in a coding example. If a bank wants to provide an interest rate of 10% on it's loans, it would make sure that the interest rate variable would stay private so as no other class would try to access it and change it.
|
||||
Let us use `private` in a coding example. If a bank wants to provide an interest rate of 10% on its loans, it would make sure that the interest rate variable would stay private so as no other class would try to access it and change it.
|
||||
For example:
|
||||
|
||||
```java
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user