Unidad 1: Introducción al Desarrollo Web
Introducción al Desarrollo Web con HTML y CSS
¡Estás a punto de convertirte en un verdadero desarrollador web! En esta sesión, vamos a preparar nuestras herramientas de trabajo y a aprender a usarlas como un profesional. Aprenderemos a instalar Visual Studio Code, a configurar un proyecto web y a usar las herramientas especiales del navegador que nos ayudan a ver y entender el código de las páginas web.
1. Instalación de Visual Studio Code y explicación de su uso
¿Qué es Visual Studio Code?
Visual Studio Code, o VS Code, es un editor de texto diseñado especialmente para programadores. Nos permite escribir el código de nuestra página web (en HTML y CSS) y ver cómo se vería en un navegador. VS Code tiene muchas herramientas geniales que nos facilitan el trabajo, como resaltar las palabras clave, autocompletar el código y hasta corregir errores.
Pasos para instalar Visual Studio Code:
- Ir al sitio web de Visual Studio Code: Abre el navegador y escribe https://code.visualstudio.com/.
- Descargar Visual Studio Code: Haz clic en el botón de descarga. Selecciona la versión que corresponde a tu sistema operativo (Windows, Mac, o Linux).
- Instalar el programa: Una vez descargado el archivo, ábrelo y sigue las instrucciones para instalar Visual Studio Code en tu computadora.
Primeros pasos en Visual Studio Code:
- Abrir VS Code: Busca el icono en tu computadora y ábrelo.
- Explorar la interfaz: Al abrir VS Code, verás una barra lateral a la izquierda donde podrás ver tus archivos, una barra superior con herramientas y un área grande al centro para escribir tu código.
2. Configuración inicial y estructura de un proyecto web
¿Qué es un proyecto web?
Un proyecto web es como una “carpeta” donde guardamos todos los archivos que componen nuestro sitio web. Estos archivos incluyen documentos HTML para la estructura de la página, archivos CSS para el diseño y, en el futuro, archivos JavaScript para agregar funciones especiales.
Crear una carpeta para tu proyecto web:
- Crear una carpeta en tu computadora: Ve a la ubicación donde deseas guardar tus archivos, haz clic derecho y selecciona “Nueva carpeta”. Nombra esta carpeta como quieras; por ejemplo, “MiPrimerSitioWeb”.
- Abrir la carpeta en VS Code: En Visual Studio Code, selecciona “Abrir carpeta” y elige la carpeta que acabas de crear. Ahora verás que la carpeta aparece en la barra lateral izquierda de VS Code, lista para que empieces a agregar archivos.
Crear los primeros archivos de tu proyecto:
- Archivo HTML: En la carpeta de tu proyecto, crea un nuevo archivo y nómbralo
index.html. Este archivo será la página principal de tu sitio web. - Archivo CSS: Ahora, crea otro archivo llamado
style.css. Este archivo será donde guardemos todos los estilos (como colores y tamaños) de nuestro sitio web.
3. Introducción a las herramientas del navegador para desarrolladores
¿Qué son las herramientas de desarrollador del navegador?
Los navegadores como Chrome o Firefox tienen un conjunto de herramientas especiales que permiten ver el código HTML y CSS de cualquier página web y modificarlo para hacer pruebas. Esto es genial para que puedas aprender, probar y mejorar tu sitio web.
Cómo abrir las herramientas de desarrollador:
- Abrir una página web en el navegador: Ve a cualquier sitio web que te guste.
- Abrir las herramientas de desarrollador: Haz clic derecho en cualquier parte de la página y selecciona “Inspeccionar” o “Ver código fuente”. Se abrirá una nueva ventana en el navegador, mostrando el código HTML y CSS de esa página.
Explorando las herramientas de desarrollador:
- HTML: En la sección “Elements” verás el código HTML de la página. Puedes hacer clic en los elementos para ver cómo están estructurados.
- CSS: A la derecha de la sección de HTML, verás los estilos CSS aplicados. Estos estilos definen colores, tamaños, y muchas otras características visuales.
- Consola: Aquí es donde se muestran mensajes y errores de la página. Más adelante, usaremos esta sección para probar códigos especiales.
Ejercicio Guiado: Preparación y Exploración de Herramientas
Para terminar esta sesión, vamos a realizar un ejercicio donde configuraremos tu primer proyecto en VS Code y exploraremos las herramientas de desarrollador:
Crea y abre tu proyecto: Sigue los pasos anteriores para crear una carpeta y abrirla en VS Code. Dentro de esa carpeta, crea los archivos index.html y style.css.
Abre el archivo HTML y escribe el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primera Página Web</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>¡Bienvenidos a Mi Primera Página Web!</h1>
<p>Esta es una prueba de nuestro primer proyecto web.</p>
</body>
</html>Guarda el archivo y ábrelo en el navegador: Ve a la carpeta de tu proyecto, abre index.html en el navegador y observa cómo se ve.
Explora con las herramientas de desarrollador: Usa el menú de “Inspeccionar” para ver cómo se muestra el código HTML en las herramientas del navegador.
¡Buen trabajo!
Ya has configurado tu entorno de desarrollo y aprendido a usar herramientas de inspección en el navegador. Con esto, estás listo para comenzar a construir y diseñar tu primera página web. En la siguiente sesión, empezaremos a escribir código HTML para dar estructura a nuestro sitio. ¡Prepárate!