Aprende tipografía construyendo una etiqueta de nutrición - Paso 43

Cuéntanos qué está pasando:
Consulte con Chat Gpt y puede que el problema esta en la pagina, Porque mi codigo esta escrito correctamente. Incluso probe poniendo doble span span 8g /span /span

Tu código hasta el momento

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
  <link href="./styles.css" rel="stylesheet">
</head>

<body>
  <div class="label">
    <header>
      <h1 class="bold">Nutrition Facts</h1>
      <div class="divider"></div>
      <p>8 servings per container</p>
      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
    </header>
    <div class="divider large"></div>
    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
      <span>230</span>
    </div>
    <div class="divider medium"></div>

<!-- User Editable Region -->

    <div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="divider"></div>
     <p>
  <span class="bold">Total Fat</span>
  <span>8g</span>
  <span class="bold">10%</span>
</p>

<!-- User Editable Region -->

  </div>
</body>
</html>
/* file: styles.css */
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.label {
  border: 2px solid black;
  width: 270px;
  margin: 20px auto;
  padding: 0 7px;
}

header h1 {
  text-align: center;
  margin: -4px 0;
  letter-spacing: 0.15px
}

p {
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.divider {
  border-bottom: 1px solid #888989;
  margin: 2px 0;
}

.bold {
  font-weight: 800;
}

.large {
  height: 10px;
}

.large, .medium {
  background-color: black;
  border: 0;
}

.medium {
  height: 5px;
}

.small-text {
  font-size: 0.85rem;
}

.calories-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.calories-info h2 {
  margin: 0;
}

.left-container p {
  margin: -5px -2px;
  font-size: 2em;
  font-weight: 700;
}

.calories-info span {
  margin: -7px -2px;
  font-size: 2.4em;
  font-weight: 700;
}

.right {
  justify-content: flex-end;
}

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

Challenge: Aprende tipografía construyendo una etiqueta de nutrición - Paso 43

Enlaza al desafío:

1 Like
<p>
  <span class="bold">Total Fat</span>
  <span>8g</span>
  <span class="bold">10%</span>
</p>

Las instrucciones dicen:

  • anida el texto Total Fat en un elemento span con la clase bold. OK
  • Anida el texto 10% en otro elemento span con la clase bold. OK

Lo anterior lo hiciste bien.

En el ultimo paso creo te confundiste en las instrucciones.
Lo que hiciste fue esto: anidar el texto 8g dentro de otro span

Lo que tenias que hacer esto:

  • anidar el texto Total Fat (junto con sus etiquetas span) y el texto 8g en un elemento span

Te muestro las imagenes:
Asi se tiene que ver:
image

Y tu codigo se ve así:
image

Respecto a que chatGPT dice que el código es correcto.
Te voy a dar un ejemplo:

<p>un parrafo</p> <p>otro parrafo</p>
<p>un parrafo</p>
<p>otro parrafo</p>

Los códigos anteriores hacen exactamente lo mismo, y en la página web mostrarán el texto de la misma forma.
Pero si freeCodeCamp está pidiendo que haya un salto de línea entre los dos párrafos (un enter) aunque los dos códigos hagan lo mismo, el primer código marcara error y talvez si le preguntes a chatGPT te diga que el primer ejemplo es correcto

El mensaje que me da es que: el elemento (span) debe envolver el texto Total Fat. El cual esta envuelto. Y con respecto al 8g no lo comprendo aun. Intente poner el primer (span) del 8g antes del (span) de Total Fat y cerrarlo despues del 8g , para que la posicion sea como la que me mostraste pero tampoco funciona. esta vez sin saltos de lineas, el cual fue mi ultima opcion para ver si eso funcionaba.

1 Like

La página ya se ve así?
image

tu código

<p>
  <span class="bold">Total Fat</span>
  <span>8g</span>
  <span class="bold">10%</span>
</p>

Voy a quitar lo que está mal:
(sigue lo copiando en diferentes renglones, tal y como está)

<p>
  <span class="bold">Total Fat</span>
  8g
  <span class="bold">10%</span>
</p>

El paso que te falta es este

  • anidar el texto Total Fat (junto con sus etiquetas span) y el texto 8g en un elemento span.

solo anida entre etiquetas span, el texto “Total Fat” con sus span bold y el texto 8g
image

te recomiendo resetear tu código.
y recuerda el codigo va despues del div con el class “divider”

Al principio tod@s nos confundimos con las instrucciones. es normal ya que estamos aprendiendo algo nuevo

Ahora siii, Gracias por tu tiempo y tu paciencia. Pense que no lo iba a resolver mas jajaj

1 Like

Lo bueno que ya paso la prueba.

Es normal que al cuándo aprendemos algo nuevo nos confundamos y no sepamos ni siquiera donde estamos más.
Es prácticamente un nuevo idioma y las instrucciones pueden parecer confusas, pero solo es cuestión de práctica

1 Like