Bienvenido a la Comunidad de Treehouse

¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.

¿Buscas aprender algo nuevo?

Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de

Inicia tu prueba gratuita

CSS Conceptos Básicos de CSS Entendiendo Valores y Unidades Unidades Em y Rem

Confundido encontrando el valor rem para el tamaño raíz

Estoy atrapado en este desafío de unidades em rem. Lo intenté mucho pero no puedo obtener el código correcto.

style.css
/* Completa el desafío escribiendo CSS a continuación */

html {
  font-size: 16px;
}

header {
  font-size: 1.5em;
}

.encabezado {
  font-size: 5em;
}
index.html
<!DOCTYPE html>
<html lang=es>
<head>
  <meta charset=UTF-8>
  <meta name=viewport contenido=width=device-width, initial-scale=1.0>
  <title>Developer Diane: Currículum</title>
  <link rel=stylesheet href=page.css>
  <link rel=stylesheet href=style.css>
</head>
<body>
  <main>
    <header>
      <div id=header-box>
        <h1 class=encabezado>Developer Diane: Currículum</h1>
        <dirección>
          <p>sitio web: developerdiane.com</p>
          <p>correo electrónico: diane@developerdiane.com</p>
        </dirección>
        <img src=developer-diane.jpg alt=Developer Diane codificando en su portátil.>
      </div>
    </header>          
    <section id=educación>
      <h2>Educación</h2>          
      <ul>
        <li>
          <h3><a href=https://teamtreehouse.com>Treehouse</a></h3>
          <p>Front End <em>Desarrollo Web</em> Techdegree</p>
          <p class=fecha especial>Graduado en enero de 2020</p>
        </li>
      </ul>
    </section>
    <section id=experiencia>
      <h2>Experiencia</h2>
      <ul>
        <li>
          <h3>Super Web Design Shop</h3>
          <p>Desarrollador Junior</p>
          <p class=fecha especial>Febrero 2020-presente</p>
        </li>
        <li>
          <h3>Pretty Good Websites, Inc.</h3>
          <p>Pasante de Desarrollo Web</p>
          <p class=fecha>Julio 2019-enero 2020</p>
        </li>
      </ul>
    </section>
    <section>
      <h2>Habilidades</h2>
      <ul id=lista-habilidades>
        <li class=habilidad-principal>HTML</li>
        <li>CSS</li>
        <li class=habilidad-principal id=orgulloso>JavaScript</li>
        <li>Git</li>
        <li>Bootstrap</li>
        <li class=habilidad-principal>Desarrollo Web Móvil</li>
        <li>Accesibilidad</li>
      </ul>
    </section>
    <section>
      <h2>Premios y Logros</h2>
      <ol>
        <li>Dev Ninja Award, noviembre de 2020</li>
        <li>Developer of the Month, octubre de 2019</li>
        <li>Logró una calificación de 6 kyu en <a href=https://www.codewars.com/>Codewars</a></li>
        <li>Especialista Certificado en Accesibilidad</li>
      </ol>
    </section>
    <pie de página>©2020 Developer Diane.</pie de página>
  </main>
</body>
</html>

¡Prueba esto!

/* Completa el desafío escribiendo CSS a continuación */

html {
  font-size: 16px;
}

header {
  font-size: 1.5em;
}

.heading {
  font-size: 5rem; /* rem is relative to the root value */
}

h2 {
  font-size: 3em; /* The parent is 16px, so 3em would be 48px */
}

h2 {
  font-size: 1.25em; /* The parent is 16px, so 1.25em would be 20px */
}

Referencias para aprender más:

https://css-tricks.com/confused-rem-em/

https://blog.logrocket.com/using-em-vs-rem-css/

https://cssunitconverter.com/px-to-rem

https://www.freecodecamp.org/news/absolute-and-relative-css-units/

1 Respuesta

¡Ese css funcionó perfectamente! Hombre, este em rem es confuso pero ahora que sé el código correcto es reconfortante.