Proyectos de diseño web responsivo - Construye una página de documentación técnica

Español HTML-CSS
1

Cuéntanos qué está pasando:
No encuentro solucionar tres items que me salen errados para completar el proyecto

Blockquote

Todos tus elementos .main-section deben ser elementos section .

Blockquote

Tu #navbar debe tener exactamente un elemento header dentro de él.

Blockquote

Cada .nav-link debe tener un atributo href que enlace a su correspondiente .main-section (por ejemplo, si haces clic en un elemento .nav-link que contenga el texto “Hello world”, la página navega al elemento section con ese id).

Tu código hasta el momento

<!-- file: index.html -->
<!DOCTYPE HTML>
<html lang="en">
  <html>
    <head>
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="stylesheet" href="styles.css" @media screen and (min-width: 800px)>    
      <enlace rel="preconectar" href="https://fonts.googleapis.com">
<enlace rel="preconectar" href="https://fonts.gstatic.com" crossorigin>
      <enlace href="https: //fonts.googleapis.com/css2? family= Raleway:ital@1 & display=swap" rel="hoja de estilo">  

<body>
  <main id="main-doc">
     <nav id="navbar">
       <section class>
  <main class="main-section" id="Pensum_academico">
<header>Pensum_academico</header><a class="nav-link" href="Pensum_academico">Pensum_academico</a>
    <p><h2>Informacion</h2>
    </p>
    <code></code>
    </section>
 
 <nav id="navbar">
   <section class>
    <main class="main-section" id="Codigo_abierto">
<header>Codigo_abierto</header><p>90 horas de estudio</p><li><a class="nav-link" href="#Codigo_abierto">Codigo_abierto</a></li></br>
  </section>
     
     <nav id="navbar">
      <section class>
       <main class="main-section" id="Desarrollo_de_software">
<header>Desarrollo_de_software</header><p>45 horas de estudio</p><li><a class="nav-link" href="#Desarrollo_de_software">Desarrollo_de_software</a></li>
     <code></code></br>
      </section>
  
   <nav id="navbar">
    <section class>
      <main class="main-section" id="Herramientas_de_programacion">
<header>Herramientas_de_programacion</header><p>A distancia</p><li><a class="nav-link" href="#Herramientas_de_programacion">Herramientas_de_programacion</a></li>
    <code></code></br>
      </section>
  <nav id="navbar">
    <section class>
      <main class="main-section" id="Nivelaciones_de_lenguaje">
<header>Nivelaciones_de_lenguaje</header><p>90 min de pruebas tecnicas</p><li><a class="nav-link" href="#Nivelaciones_de_lenguaje">Nivelaciones_de_lenguaje</a> </li>
    <code></code></br>
   </section>
 
  <nav id="navbar">
   <section class>
    <main class="main-section" id="Desarrollo_del_cliente">
<header>Desarrollo_del_cliente</header><p>Como priorizar mis metas</p></header><li><a class="nav-link" href="#Desarrollo_del_cliente">Desarrollo_del_cliente</a></li><p> 36 horas de clases</p>
  <p>Inscribete</p><code></code></br>
 </section>
  
  <nav id="navbar">
   <section class>
     <main class="main-section" id="FreeCodeCamp"><header>FreeCodeCamp</header><a class="nav-link" href="#FreeCodeCamp">FreeCodeCamp</a><p><h2>Me da resultados optimos</h2></p><code></code></br>
   </main></section>
  


  </body>
</html>

/* file: styles.css */
familia tipográfica: 'Raleway', sans-serif;



flex-box: display;


header {
  position: fixed;
}

body {
  width: 100%;
background-color: orange; 
}

@media screen and (min-width: 800px), projection 

#navbar {
position: fixed;
}

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/106.0.0.0 Safari/537.36

Desafío: Proyectos de diseño web responsivo - Construye una página de documentación técnica

Enlaza al desafío:

2

No le estas dando valor a class

<section class>

Las instrucciones dicen que los elementos .main-section deben ser elementos <section>, aquí estás usando un elemento <main>

<main class="main-section" id="Pensum_academico">

hay elementos que no tienen etiqueta de cierre

3

ok muchas gracias, aun me falta lo del header dentro del #navbar y que el atributo href enlace la clase main-section en el .nav-link

<!DOCTYPE HTML>
<html lang="en">
  <html>
    <head>
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="stylesheet" href="styles.css" @media screen and (min-width: 800px)>    
      <enlace rel="preconectar" href="https://fonts.googleapis.com">
<enlace rel="preconectar" href="https://fonts.gstatic.com" crossorigin>
      <enlace href="https: //fonts.googleapis.com/css2? family= Raleway:ital@1 & display=swap" rel="hoja de estilo">  

<body>
  <main id="main-doc">
     <nav id="navbar">
       <section class="main-section" id="Pensum_academico">
<header>Pensum_academico</header><a class="nav-link" href="Pensum_academico">Pensum_academico</a>
    <p><h2>Informacion</h2>
    </p>
    <code></code>
    </section>
 
 <nav id="navbar">
   <section class="main-section" id="Codigo_abierto">
<header>Codigo_abierto</header><p>90 horas de estudio</p><li><a class="nav-link" href="#Codigo_abierto">Codigo_abierto</a></li></br>
  </section>
     
     <nav id="navbar">
      <section class="main-section" id="Desarrollo_de_software">
<header>Desarrollo_de_software</header><p>45 horas de estudio</p><li><a class="nav-link" href="#Desarrollo_de_software">Desarrollo_de_software</a></li>
     <code></code></br>
      </section>
  
   <nav id="navbar">
    <section class="main-section" id="Herramientas_de_programacion">
<header>Herramientas_de_programacion</header><p>A distancia</p><li><a class="nav-link" href="#Herramientas_de_programacion">Herramientas_de_programacion</a></li>
    <code></code></br>
      </section>
  <nav id="navbar">
    <section class="main-section" id="Nivelaciones_de_lenguaje">
<header>Nivelaciones_de_lenguaje</header><p>90 min de pruebas tecnicas</p><li><a class="nav-link" href="#Nivelaciones_de_lenguaje">Nivelaciones_de_lenguaje</a> </li>
    <code></code></br>
   </section>
 
  <nav id="navbar">
   <section class="main-section" id="Desarrollo_del_cliente">
<header>Desarrollo_del_cliente</header><p>Como priorizar mis metas</p></header><li><a class="nav-link" href="#Desarrollo_del_cliente">Desarrollo_del_cliente</a></li><p> 36 horas de clases</p>
  <p>Inscribete</p><code></code></br>
 </section></nav>
  
  <nav id="navbar">
   <section class="main-section" id="FreeCodeCamp"><header>FreeCodeCamp</header><a class="nav-link" href="#FreeCodeCamp">FreeCodeCamp</a><p><h2>Me da resultados optimos</h2></p><code></code></br>
   </section>
  


  </body>
</html>

familia tipográfica: 'Raleway', sans-serif;



flex-box: display;


header {
  position: fixed;
}

body {
  width: 100%;
background-color: orange; 
}

@media screen and (min-width: 800px), projection 

#navbar {
position: fixed;
}
4

Bien he tratado de hacerlo mejor pero el error se mantiene igual, pudiera darle mas estilo para verse mejor pero no logro entender lo del elemento header dentro del #navbar

<!DOCTYPE HTML>
<html lang="en">
    <head>
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="stylesheet" href="styles.css" @media screen and (min-width: 800px)>    
      <link rel="preconectar" href="https://fonts.googleapis.com">
<link rel="preconectar" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2? family= Raleway:ital@1 & display=swap" rel="hoja de estilo">  
</head>
<body>
  <main id="main-doc">
     <nav id="navbar"><section class="main-section" id="Pensum_academico"><header>
<a class="nav-link" href="#Pensum_academico">Pensum_academico</a></header>
    <code>haz click</code><p><h2>Informacion</h2>
    </p>
    </section></nav>
 
 <nav id="navbar">
   <section class="main-section" id="Codigo_abierto">
<header><li><a class="nav-link" href="#Codigo_abierto">Codigo_abierto</a></li></header><code>haz click</code><p>90 horas de estudio</p></br>
  </section></nav>
     
     <nav id="navbar">
      <section class="main-section" id="Desarrollo_de_software">
<header><li><a class="nav-link" href="#Desarrollo_de_software">Desarrollo_de_software</a></li></header>
     <code>haz click</code><p>45 horas de estudio</p></br>
      </section></nav>
  
   <nav id="navbar">
    <section class="main-section" id="Herramientas_de_programacion">
<header><li><a class="nav-link" href="#Herramientas_de_programacion">Herramientas_de_programacion</a></li></header>
    <code>haz click</code><p>A distancia</p></br>
      </section></nav>

  <nav id="navbar">
    <section class="main-section" id="Nivelaciones_de_lenguaje">
<header><li><a class="nav-link" href="#Nivelaciones_de_lenguaje">Nivelaciones_de_lenguaje</a></li></header>
    <code>haz click</code><p>90 min de pruebas tecnicas</p></br>
   </section></nav>
 
  <nav id="navbar">
   <section class="main-section" id="Desarrollo_del_cliente">
<header><li><a class="nav-link" href="#Desarrollo_del_cliente">Desarrollo_del_cliente</a></li></header>
<code>haz click</code><p> 36 horas de clases</p><p>Como priorizar mis metas</p></br>
 </section></nav>
  
  <nav id="navbar">
   <section class="main-section" id="FreeCodeCamp"><header><a class="nav-link" href="#FreeCodeCamp">FreeCodeCamp</a></header><p><h2>Me da resultados optimos</h2></p><code>haz click</code><p>Inscribete</p></br>
   </section></nav>
  


  </body>
</html>
familia tipográfica: 'Raleway', sans-serif;

flex-box: display;


header {
  position: fixed;
}

body {
  width: 100%;
background-color: orange; 
}

@media screen and (min-width: 800px), projection 

#navbar {
position: fixed;
}