Creación de una Página Web Básica con Visual Studio Code

Clase 9 de 17 • Curso de Configuración de Entorno de Desarrollo en Linux

Clase anteriorSiguiente clase

Resumen

¿Cómo crear tu primer proyecto web con Visual Studio Code?

Dar tus primeros pasos en el desarrollo web puede parecer una tarea desafiante, pero con la ayuda de Visual Studio Code, este proceso se vuelve accesible y emocionante. En esta guía te llevaremos a través de los pasos para crear tu primera página web, utilizando herramientas útiles y extensiones que optimizan el proceso de desarrollo.

¿Cómo se organiza un proyecto web?

Organizar el proyecto es el primer paso esencial en el desarrollo web. Para comenzar, necesitas crear una estructura de carpetas que facilite el agrupamiento y manejo de archivos. Sigue estos pasos para estructurar tu proyecto:

  1. Crear un directorio de proyecto: dentro de la carpeta "Documentos", crea una nueva carpeta llamada mi_primer_web para alojar todos los archivos.
  2. Abrir con Visual Studio Code: selecciona la carpeta recién creada y ábrela en Visual Studio Code. Esto lo puedes hacer desde la barra de herramientas seleccionando "open folder" o directamente desde la vista de explorador de VSC.

¿Cuál es la función del archivo index.html?

El archivo index.html es fundamental, ya que el navegador lo utiliza para interpretar y dibujar la página web. Sigue estas instrucciones:

  • Haz clic en "new file" en Visual Studio Code y nombra el archivo como index.html.
  • Escribe html:5 y selecciona la opción que te ofrece Emmet. Esto generará automáticamente la estructura básica de HTML.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primer web</title>
</head>
<body>
    <h1>Hola Mundo</h1>
</body>
</html>

¿Cómo visualizar la página web en el navegador?

Para ver rápidamente los cambios en tu página web en Google Chrome, puedes utilizar la extensión Live Server:

  • Da clic derecho en el archivo index.html y selecciona "Open with Live Server".
  • Cualquier modificación que realices se actualizará automáticamente en el navegador gracias a esta extensión.

¿Qué importancia tiene el archivo CSS en un proyecto web?

El archivo CSS es crucial para estilizar la apariencia de tu página web. Define cómo se verá el contenido HTML al usuario:

  1. Crear un archivo CSS: crea un nuevo archivo y nómbralo index.css.
  2. Vincular el CSS al HTML: incluye un enlace en el head de tu archivo HTML para que el navegador pueda aplicar los estilos.
<link rel="stylesheet" href="index.css">
  1. Modificar los estilos: un ejemplo básico de CSS es cambiar el color de fondo del body.
body {
    background-color: #00A4CCFF;
}

¿Cómo agregar funcionalidad con JavaScript?

JavaScript añade interactividad a tu página web, como alertas, cálculos y más:

  1. Crear un archivo JavaScript: crea y nombra el archivo index.js.
  2. Escribir código JavaScript: un ejemplo sencillo es agregar una alerta.
alert('Hola Platzi');
  1. Vincular el JavaScript al HTML: agrega la etiqueta script al final del body en tu HTML.
<script src="index.js"></script>

Recomendaciones finales

Es normal sentirse abrumado al principio, pero con práctica y los recursos adecuados como los proporcionados por Platzi, podrás profundizar en el aprendizaje de HTML, CSS, y JavaScript de manera efectiva. Anímate a explorar cada elemento, prueba con diferentes estilos, y verás cómo tus habilidades en desarrollo web incrementan. ¡Sigue adelante y no dejes de aprender!