Solucionar problemas de visualización del sitio web

Introducción

En este proyecto, aprenderás a solucionar los problemas de visualización de un sitio web y a asegurarte de que esté adecuadamente diseñado y estructurado. El objetivo es tomar un sitio web sin terminar y hacer que se vea como el producto final deseado.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo identificar y solucionar problemas en el archivo HTML
• Cómo actualizar el archivo CSS para aplicar los estilos correctos
• Cómo asegurarse de que el sitio web se muestre con el ancho y la disposición deseados

🏆 Logros

Después de completar este proyecto, serás capaz de:

• Analizar y solucionar problemas en el código HTML y CSS
• Aplicar técnicas para estructurar y diseñar adecuadamente las páginas web
• Demostrar la importancia de prestar atención a los detalles en el desarrollo web

Establece la estructura del proyecto

En este paso, configurarás el proyecto y abrirás los archivos en el editor.

1. Abre el editor y deberías ver los siguientes archivos: index.html, style.css, y los archivos de imagen html5logo.png, css3-logo.png, nav-btn.png y evolution.png.
2. Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.
3. Abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Corrige la visualización del sitio web

En este paso, examinarás la estructura HTML de la página y a partir de ahí encontrarás el problema para corregir el desorden en la visualización de la página.

1. Abre el archivo index.html en el editor de código.
2. Examina el archivo index.html y observa que la etiqueta <link> para el archivo CSS tiene el nombre de archivo incorrecto. Actualiza el atributo href para que apunte al archivo correcto, style.css.

<link rel="stylesheet" href="style.css" />

3. El archivo HTML contiene las siguientes secciones principales:

   • <header>: Incluye el título del sitio web y el menú de navegación.
   • <div class="content">: Contiene el contenido principal de la página, incluyendo una sección de una columna, una sección de tres columnas y una sección de dos columnas.
   • <footer>: Incluye el pie de página del sitio web con enlaces.

4. Guarda los cambios en el archivo index.html.

5. Actualiza la página en tu navegador después de corregir el error y verás el siguiente efecto:

¡Felicitaciones! Has corrido con éxito la visualización del sitio web actualizando los archivos HTML y CSS.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.