Página de documentación técnica - Construye una Página de Documentación Técnica

Español HTML-CSS
1

Cuéntanos qué está pasando:

. Cada .main-section debe tener un id que coincida con el texto de su primer hijo, reemplazando los espacios en el texto del hijo con guiones bajos (_) para los id.

he estado teniendo problemas con este errror y nisiquiera chat gpt me puede ayudar. realice mi propio codigo y no lo pase. le pedi miles de veces a chatgpt que realziara de diferentes formas y maneras y aun no logro pasarlo. que es?

Tu código hasta el momento

<!-- file: index.html -->


/* file: styles.css */

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/130.0.0.0 Safari/537.36 OPR/115.0.0.0

Información del Desafío:

Página de documentación técnica - Construye una Página de Documentación Técnica

Introducción al Desarrollo Web

Menú de Navegación

¿Qué es el Desarrollo Web? HTML: Bases del Desarrollo Web CSS: Estilos y Diseño Visual JavaScript: Interactividad en la Web Prácticas Recomendadas

¿Qué es el Desarrollo Web?

El desarrollo web es el proceso de crear, diseñar y mantener sitios web. Este proceso involucra una serie de actividades como la planificación, la codificación y la optimización de un sitio para que sea funcional y atractivo.

Existen diferentes tipos de desarrollo web, que incluyen desarrollo front-end, back-end y full-stack. Cada uno tiene un enfoque diferente, pero todos juegan un papel crucial en la creación de aplicaciones web completas.

  • Desarrollo Front-End: se enfoca en la parte visible de la web.
  • Desarrollo Back-End: se encarga del lado del servidor.
  • Desarrollo Full-Stack: abarca tanto front-end como back-end.

Para ser un desarrollador web completo, es importante entender los tres aspectos del desarrollo y cómo interactúan entre sí.

<html> <body> <header> 
<section class="main-section" id="html_bases">
    <header>
        <h2>HTML: Bases del Desarrollo Web</h2>
    </header>
    <p>HTML es el lenguaje estándar para estructurar el contenido web. Utiliza etiquetas que describen cómo se debe organizar y mostrar el contenido en un navegador.</p>
    <ul>
        <li>El <code>&lt;html&gt;</code> es la raíz del documento HTML.</li>
        <li>El <code>&lt;head&gt;</code> contiene metadatos como el título del sitio.</li>
        <li>El <code>&lt;body&gt;</code> contiene el contenido visible para los usuarios.</li>
    </ul>
    <p>Las etiquetas en HTML ayudan a dar estructura al contenido y a hacerlo accesible y comprensible.</p>
    <code>&lt;h1&gt;Texto de Título&lt;/h1&gt;</code>
    <code>&lt;p&gt;Texto de párrafo&lt;/p&gt;</code>
</section>

<section class="main-section" id="css_estilos">
    <header>
        <h2>CSS: Estilos y Diseño Visual</h2>
    </header>
    <p>CSS se utiliza para aplicar estilos a los elementos HTML, mejorando la apariencia de una página web. Con CSS puedes cambiar colores, fuentes, márgenes, y mucho más.</p>
    <ul>
        <li>Usar <code>background-color</code> para cambiar el color de fondo.</li>
        <li>Usar <code>font-size</code> para cambiar el tamaño de las fuentes.</li>
        <li>Usar <code>padding</code> y <code>margin</code> para espaciar los elementos.</li>
    </ul>
    <p>El uso de CSS es crucial para que las páginas web sean atractivas y fáciles de usar.</p>
    <code>body { background-color: #f4f4f4; }</code>
</section>

<section class="main-section" id="javascript_interactividad">
    <header>
        <h2>JavaScript: Interactividad en la Web</h2>
    </header>
    <p>JavaScript es un lenguaje de programación utilizado para hacer las páginas web interactivas. Permite responder a las acciones del usuario, como clics, desplazamientos y entradas de texto.</p>
    <ul>
        <li>Permite crear formularios interactivos.</li>
        <li>Permite crear animaciones y transiciones.</li>
        <li>Permite manipular el DOM (Document Object Model) para cambiar la estructura de la página.</li>
    </ul>
    <p>Con JavaScript puedes mejorar la experiencia del usuario y hacer la web más dinámica y atractiva.</p>
    <code>document.getElementById("demo").innerHTML = "¡Hola Mundo!";</code>
</section>

<section class="main-section" id="practicas_recomendadas">
    <header>
        <h2>Prácticas Recomendadas</h2>
    </header>
    <p>Las buenas prácticas son esenciales para crear aplicaciones web de calidad. Estas incluyen mantener un código limpio, usar convenciones de nombres claras, y seguir patrones de diseño recomendados.</p>
    <ul>
        <li>Escribe código semántico y accesible.</li>
        <li>Comenta el código cuando sea necesario.</li>
        <li>Realiza pruebas de usabilidad para garantizar una buena experiencia al usuario.</li>
    </ul>
    <p>El cumplimiento de buenas prácticas también mejora la mantenibilidad y escalabilidad de tus proyectos.</p>
    <code>/* Comentario en el código */</code>
</section>
2

Bienvenido al foro @alejandrojsq

Los valores de los atributos href e id deben coincidir con todo el texto y tener la misma mayúscula.

Feliz codificación

1 Like