Curso de Frontend Developer

Dado el siguiente código:

<div>
    <div>¿Qué es CSS Grid?</div>

    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
</div>

¿Cuál de las siguientes opciones brinda la estructura semántica más apropiada?

<section> <h1>¿Qué es CSS Grid?</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> </section>

Con flexbox (con el valor por defecto de flex-direction) para centrar un elemento de manera horizontal debo usar:

justify-content: center;

Con el código semántico buscamos la etiqueta más apropiada para su contenido. Por esa razón, la etiqueta más apropiada para escribir un párrafo es:

<p>

20px es un valor:

absoluto

HTML es un lenguaje:

Interpretado

¿Cuál es el comando para convertir nuestro proyecto de SASS a CSS?

sass mi-ruta/styles.scss mi-ruta/styles.css

Es la herramienta de CSS que nos permite ajustar nuestros diseños a diferentes tamaños de pantalla, por ejemplo, a dispositivos móviles:

(DESCARTAR ESTA OPCION :) Meta Viewport

Atomic Design es:

Átomos, Moléculas, Organismos, Plantillas y Páginas.

Podemos heredar estilos en SASS usando:

@extend

Un preprocesador de CSS nos ayuda a:

Evitar la repetición de código.

Es la manera mediante la cual los navegadores deciden qué valores de una propiedad de CSS son más relevantes para un elemento:

Especificidad

¿Cuáles son los tipos de errores de escritura en el código que hacen que el programa no funcione?

Errores sintácticos.

Comando para correr nuestro Storybook:

npm run storybook

Selecciona todos los elementos
donde el padre es un elemento

div > p

Para asegurarnos de que nuestro código HTML está bien escrito podemos usar:

Un sistema de validación de etiquetas.

¿Cuál de las siguientes NO es una unidad relativa?

px

La propiedad de CSS que define la distancia desde el borde de un elemento hasta su contenido es:

padding

button:hover { background-color: red; } indica:

Que el botón cambia a color rojo cuando el cursor pasa sobre él.

La abreviación de grid-column-start: 2; y grid-column-end: 5; es:

grid-column: 2 / 5;

.card__icon--black es un ejemplo de la sintaxis de:

(DESCARTAR ESTA OPCION :)SMACSS

La etiqueta y la etiqueta hacen que el texto contenido en ellas sea itálico, sin embargo, influye en:

El aspecto visual y en el énfasis que se le quiere dar al texto.

¿Cuál de los siguientes NO es un lector de pantalla?

ANDI

Con flexbox, (con el valor por defecto de flex-direction), para centrar un elemento verticalmente utilizo:

align-items: center;

Cuál de los siguientes NO es un selector de CSS:

:class

Una variable en SASS tiene la siguiente sintaxis:

$primary-color: #141414;

¿La accesibilidad es sólo una responsabilidad de los desarrolladores?

Falso.

Un pseudo-elemento se puede utilizar para:

Dar estilo a partes específicas de un elemento.

Usando la metodología BEM, un ejemplo de Elemento sería:

button

Con el árbol de objetos DOM de HTML, JavaScript puede cambiar todos los elementos HTML de la página.

Verdadero

¿Qué herramienta nos permite a los desarrolladores crear componentes de forma independiente y mostrarlos de manera interactiva en un entorno de desarrollo aislado?

Storybook

1. HTML es un lenguaje de marcado de hipertexto. Este enunciado es:

Verdadero

2. CSS son hojas de estilo en cascada. Este enunciado es:

Verdadero

3. ¿Para qué nos sirven los motores de renderizado?

Para pasar los archivos a píxeles en pantalla

4.Un ejemplo de elemento vacío en HTML es:

<img>

5. El HTML semántico NO nos permite:

Determinar qué reglas de CSS deben aplicarse a las etiquetas de HTML

6. Con HTML semántico, usar una etiqueta
en lugar de una específica como para escribir un artículo es:

Incorrecto

7. La definición de "cascada" significa que:

El orden de las reglas en CSS importa.

8. Las reglas de CSS que tienen menor especificidad (sin tener en cuenta el selector universal), son:

<div> (puede ser la opcion correcta) elementos y pseudoelementos

9. #id h1::first-letter es más específico que p .sidemenu div:hover

Verdadero

10. ¿Cuál de los siguientes NO es un tipo de selector combinador?

a[href="…"]

11. El colapso de márgenes sucede cuando:

Hay dos elementos bloque adyacentes.

12. La metodología que nos sugiere tener una sintaxis donde se pueda diferenciar el bloque de los elementos y de los modificadores es:

BEM

13. :hover es:

Una pseudoclase

14. ¿Qué es ::before?

Un pseudoelemento

15. El selector que selecciona todos los elementos donde el padre es un elemento
es:

p > span

16. Si debes de colocar una barra de navegación con HTML semántico, ¿cuál etiqueta usarías?

<nav>

Ingreso de Curso nuevo de front end

.

1. Usamos display: grid; y place-items: center; en el elemento contenedor para:

Centrar los elementos hijos tanto vertical como horizontalmente.

2.justify-content es una propiedad de los elementos:

Contenedores

3.@media (max-width: 640px) nos indica que el código dentro de él será para:

Pantallas desde 0px hasta 640px

4.:root nos permite definir variables y usarlas mediante la función var():

Verdadero

5..email-image img, selecciona:

Todas las imágenes que tengan como clase .email-image REPASAR CLASE

6. .product-info div p:nth-child(1) se lee como:

El primer hijo de tipo p que está dentro del div que tiene como clase .product-info REPASAR CLASE

7.margin: 24px 0 0; es lo mismo que decir:

margin-top: 24px; margin-right: 0; margin-bottom: 0; margin-left: 24px; REPASAR CLASE

8.La propiedad flex-direction es por defecto:

Row

9.Padding es el espacio:

Entre el contenido y el borde.

10. :nth-child() es:

Una pseudoclase

11. font-weight es la propiedad que nos da el:

Grosor del texto

12.La propiedad que usamos para crear únicamente columnas en una grid es:

grid-template-columns

13.text-decoration: none; la usamos para:

Remover la línea de la parte inferior de la etiqueta <a>

14.La etiqueta se debe colocar dentro de la etiqueta:

<head>

Este proyecto sigue la especificación de todos los contribuyentes . ¡Contribuciones de cualquier tipo son bienvenidas!

Files

frontend_developer.md

Latest commit

History

frontend_developer.md

File metadata and controls

Curso de Frontend Developer

Dado el siguiente código:

Con flexbox (con el valor por defecto de flex-direction) para centrar un elemento de manera horizontal debo usar:

Con el código semántico buscamos la etiqueta más apropiada para su contenido. Por esa razón, la etiqueta más apropiada para escribir un párrafo es:

20px es un valor:

HTML es un lenguaje:

¿Cuál es el comando para convertir nuestro proyecto de SASS a CSS?

Es la herramienta de CSS que nos permite ajustar nuestros diseños a diferentes tamaños de pantalla, por ejemplo, a dispositivos móviles:

Atomic Design es:

Podemos heredar estilos en SASS usando:

Un preprocesador de CSS nos ayuda a:

Es la manera mediante la cual los navegadores deciden qué valores de una propiedad de CSS son más relevantes para un elemento:

¿Cuáles son los tipos de errores de escritura en el código que hacen que el programa no funcione?

Comando para correr nuestro Storybook:

Selecciona todos los elementos donde el padre es un elemento

Para asegurarnos de que nuestro código HTML está bien escrito podemos usar:

¿Cuál de las siguientes NO es una unidad relativa?

La propiedad de CSS que define la distancia desde el borde de un elemento hasta su contenido es:

button:hover { background-color: red; } indica:

La abreviación de grid-column-start: 2; y grid-column-end: 5; es:

.card__icon--black es un ejemplo de la sintaxis de:

La etiqueta y la etiqueta hacen que el texto contenido en ellas sea itálico, sin embargo, influye en:

¿Cuál de los siguientes NO es un lector de pantalla?

Con flexbox, (con el valor por defecto de flex-direction), para centrar un elemento verticalmente utilizo:

Cuál de los siguientes NO es un selector de CSS:

Una variable en SASS tiene la siguiente sintaxis:

¿La accesibilidad es sólo una responsabilidad de los desarrolladores?

Un pseudo-elemento se puede utilizar para:

Usando la metodología BEM, un ejemplo de Elemento sería:

Con el árbol de objetos DOM de HTML, JavaScript puede cambiar todos los elementos HTML de la página.

¿Qué herramienta nos permite a los desarrolladores crear componentes de forma independiente y mostrarlos de manera interactiva en un entorno de desarrollo aislado?

1. HTML es un lenguaje de marcado de hipertexto. Este enunciado es:

2. CSS son hojas de estilo en cascada. Este enunciado es:

3. ¿Para qué nos sirven los motores de renderizado?

4.Un ejemplo de elemento vacío en HTML es:

5. El HTML semántico NO nos permite:

6. Con HTML semántico, usar una etiqueta en lugar de una específica como para escribir un artículo es:

7. La definición de "cascada" significa que:

8. Las reglas de CSS que tienen menor especificidad (sin tener en cuenta el selector universal), son:

9. #id h1::first-letter es más específico que p .sidemenu div:hover

10. ¿Cuál de los siguientes NO es un tipo de selector combinador?

11. El colapso de márgenes sucede cuando:

12. La metodología que nos sugiere tener una sintaxis donde se pueda diferenciar el bloque de los elementos y de los modificadores es:

13. :hover es:

14. ¿Qué es ::before?

15. El selector que selecciona todos los elementos donde el padre es un elemento es:

16. Si debes de colocar una barra de navegación con HTML semántico, ¿cuál etiqueta usarías?

Ingreso de Curso nuevo de front end

1. Usamos display: grid; y place-items: center; en el elemento contenedor para:

2.justify-content es una propiedad de los elementos:

3.@media (max-width: 640px) nos indica que el código dentro de él será para:

4.:root nos permite definir variables y usarlas mediante la función var():

5..email-image img, selecciona:

6. .product-info div p:nth-child(1) se lee como:

7.margin: 24px 0 0; es lo mismo que decir:

8.La propiedad flex-direction es por defecto:

9.Padding es el espacio:

10. :nth-child() es:

11. font-weight es la propiedad que nos da el:

12.La propiedad que usamos para crear únicamente columnas en una grid es:

13.text-decoration: none; la usamos para:

14.La etiqueta se debe colocar dentro de la etiqueta:

Selecciona todos los elementos
donde el padre es un elemento

6. Con HTML semántico, usar una etiqueta
en lugar de una específica como para escribir un artículo es:

15. El selector que selecciona todos los elementos donde el padre es un elemento
es: