Materiales proyecto Cotizador

Formulario.js

<option value="">-- Seleccione --</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>

index.css

html {
  box-sizing: border-box;
}
body {
  background: #e96443;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #904e95, #e96443);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #904e95, #e96443); 
  font-family: Arial, Helvetica, sans-serif;
}
ul {
  list-style: none;
  padding: none;
  margin: none;
}
span.resultado {
  position: relative;
  width: 100%;
}
.resultado-enter {
  transition: .5s;
}
.resultado-enter.resultado-enter-active{
  transform: translateY(0%);
}
.resultado-exit{
  transform: translateY(0);
  transition: .5s;
  position : absolute;
  left: 0;
  bottom : 0;
  right: 0;
}
.resultado-exit-active{
  opacity: 0;
  transform: translateY(-10%);
}

index.html

    <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.0/normalize.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Slabo+27px" />

Solo quiero reportar que en la tag html hay un problema con el box-sizing, ya que este propiedad debe de ser utilizado de esta forma:
*, *::before, *::after { box-sizing: border-box }
¿Por que digo debe?, pues en este caso para que se respete el propiedad en todos los elementos del documento HTML pues en video 92. Validando el Formulario de la sección 7 de proyectos hay un mensaje de error y este se desborda por uno de los laterales, más especifico el lado derecho, para solucionar esto y posibles inconsistencias en tamaños es recomendado que se aplique a todos los elementos.
Aunque no se por que no la aplica si en términos de la documentación dice que se lo aplicara a todo el contenido del padre, así que esta raro pero creo que para evitar este error creo que es más beneficioso su uso como lo especifico arriba.

Gracias Juan por todos tus aportes y conocimientos, realmente me gustaría conocerte algún día amigo de GDL, me gusta aprender de ti.

Al fijarme mejor en la documentación dice que al contenido del elemento, esto quiere decir que a los descendientes mas internos no aplica esto. Me parece que se refiere a que solo a los hijos directos del contenedor aplicara esta propiedad, por esta razón a elementos más internos de la etiqueta html no tendrá efecto alguno.

cuando pego tu

Solo quiero reportar que en la tag html hay un problema con el box-sizing, ya que este propiedad debe de ser utilizado de esta forma:
*, *::before, *::after { box-sizing: border-box }
¿Por que digo debe?, pues en este caso para que se respete el propiedad en todos los elementos del documento HTML pues en video 92. Validando el Formulario de la sección 7 de proyectos hay un mensaje de error y este se desborda por uno de los laterales, más especifico el lado derecho, para solucionar esto y posibles inconsistencias en tamaños es recomendado que se aplique a todos los elementos.
Aunque no se por que no la aplica si en términos de la documentación dice que se lo aplicara a todo el contenido del padre, así que esta raro pero creo que para evitar este error creo que es más beneficioso su uso como lo especifico arriba.

Gracias Juan por todos tus aportes y conocimientos, realmente me gustaría conocerte algún día amigo de GDL, me gusta aprender de ti.

Me da un error del Eslint en la primer coma, "expected }", como debería quedar exactamente el tag? html{*, *::before, *::after { box-sizing: border-box }? tal vez lo estoy poniendo mal

cuando pego tu

Solo quiero reportar que en la tag html hay un problema con el box-sizing, ya que este propiedad debe de ser utilizado de esta forma:
*, *::before, *::after { box-sizing: border-box }
¿Por que digo debe?, pues en este caso para que se respete el propiedad en todos los elementos del documento HTML pues en video 92. Validando el Formulario de la sección 7 de proyectos hay un mensaje de error y este se desborda por uno de los laterales, más especifico el lado derecho, para solucionar esto y posibles inconsistencias en tamaños es recomendado que se aplique a todos los elementos.
Aunque no se por que no la aplica si en términos de la documentación dice que se lo aplicara a todo el contenido del padre, así que esta raro pero creo que para evitar este error creo que es más beneficioso su uso como lo especifico arriba.
Gracias Juan por todos tus aportes y conocimientos, realmente me gustaría conocerte algún día amigo de GDL, me gusta aprender de ti.

Me da un error del Eslint en la primer coma, "expected }", como debería quedar exactamente el tag? html{*, *::before, *::after { box-sizing: border-box }? tal vez lo estoy poniendo mal

Hola, el problema es que estas usando un selector de html y dentro de ese selector estas usando el selector de *. Lo que yo puse debe ser el remplazo del selector html. Y por lo que se aprecia en el error te dice que falta un simbolo de } llave para cerrar el selector.

Debe quedar así:

*,
*::before,
*::after {
    box-sizing: border-box;
}

Lamento si en una sola linea no se aprecia bien, es mi forma de acomodar las cosas si el selector/es tiene solo una propiedad CSS.
Te comento que son tres selectores. Uno es el selector universal, el cual selecciona todas las etiquetas html, y los otros dos son el mismo selector universal pero con la diferencia de que seleccionan de todos los pseudo-elementos de todas las etiquetas.

cuando pego tu

Solo quiero reportar que en la tag html hay un problema con el box-sizing, ya que este propiedad debe de ser utilizado de esta forma:
*, *::before, *::after { box-sizing: border-box }
¿Por que digo debe?, pues en este caso para que se respete el propiedad en todos los elementos del documento HTML pues en video 92. Validando el Formulario de la sección 7 de proyectos hay un mensaje de error y este se desborda por uno de los laterales, más especifico el lado derecho, para solucionar esto y posibles inconsistencias en tamaños es recomendado que se aplique a todos los elementos.
Aunque no se por que no la aplica si en términos de la documentación dice que se lo aplicara a todo el contenido del padre, así que esta raro pero creo que para evitar este error creo que es más beneficioso su uso como lo especifico arriba.
Gracias Juan por todos tus aportes y conocimientos, realmente me gustaría conocerte algún día amigo de GDL, me gusta aprender de ti.

Me da un error del Eslint en la primer coma, "expected }", como debería quedar exactamente el tag? html{*, *::before, *::after { box-sizing: border-box }? tal vez lo estoy poniendo mal

Hola, el problema es que estas usando un selector de html y dentro de ese selector estas usando el selector de *****. Lo que yo puse debe ser el remplazo del selector html. Y por lo que se aprecia en el error te dice que falta un simbolo de } llave para cerrar el selector.

Debe quedar así:

*,
*::before,
*::after {
    box-sizing: border-box;
}

Lamento si en una sola linea no se aprecia bien, es mi forma de acomodar las cosas si el selector/es tiene solo una propiedad CSS.
Te comento que son tres selectores. Uno es el selector universal, el cual selecciona todas las etiquetas html, y los otros dos son el mismo selector universal pero con la diferencia de que seleccionan de todas las etiquetas solo los pseudo-elementos before y after.

No podría haber quedado más claro. Muchas gracias por tomarte el tiempo de responder geni@!