Curso: Desarrollo Web Básico
Duración: 8 semanas
Nivel: Intermedio
Modalidad: En línea, paso a paso
Requisitos previos: Saber usar una computadora y navegar por internet
Semana 1: ¿Qué es una página web?
Objetivo: Entender qué es una página web, cómo funciona y qué herramientas se necesitan para crearla.
Contenido:
Una página web es como una hoja digital que ves en internet.
Por ejemplo, Facebook o Google están hechos de muchas páginas web.
Estas páginas se construyen usando "instrucciones" que el navegador (como Chrome o Firefox) entiende. Estas instrucciones están escritas con un lenguaje especial llamado HTML, que organiza el contenido como textos, imágenes, botones, etc. Para diseñarla y que se vea bonita, usamos otro lenguaje llamado CSS, que sirve para cambiar colores, tamaños, posiciones, etc. Y si queremos que se mueva o tenga funciones (como botones que reaccionan), podemos usar JavaScript, aunque eso lo veremos en niveles más avanzados.
Explicación:
Para empezar, necesitas dos cosas:
1. Un programa para escribir (puede ser el Bloc de notas o un editor como Visual Studio Code).
2. Un navegador para ver lo que hiciste (como Google Chrome).
Cuando haces una página, escribes qué contenido quieres mostrar (por ejemplo: un título, un párrafo) y lo guardas como un archivo llamado pagina.html. Después, haces doble clic en ese archivo y tu navegador te mostrará lo que escribiste, como si fuera una página real.
Ejercicio:
- Crea un archivo nuevo en tu computadora.
- Escribe un título como "Mi primera página".
- Escribe un párrafo donde te presentes.
- Guarda el archivo con el nombre miweb.html.
- Ábrelo con tu navegador (doble clic)
Explicación:
Una lista es como una serie de cosas escritas una debajo de la otra: por ejemplo, tus hobbies. Un enlace es un texto que puedes hacer clic para ir a otra página, como cuando entras a YouTube desde Google. Una imagen se puede agregar copiando la dirección de una foto que encuentres en internet o guardando una imagen en tu computadora.
Ejercicio:
- Escribe una lista con tus tres comidas favoritas.
- Escribe un texto que te lleve a Google, por ejemplo: "Haz clic aquí para ir a Google" https://www.google.com
- Agrega una imagen de internet (puede ser de un gato, por ejemplo).
Explicación:
Aquí es donde entra el diseño. Usamos herramientas para:
- Cambiar el color del fondo de la página (por ejemplo, celeste claro).
- Poner letras más grandes o de otro estilo.
- Colorear un título para que llame la atención.
Esto se hace con algo llamado CSS, que es como una hoja de instrucciones para darle estilo a tu página.
Ejercicio:
- Cambia el fondo de tu página a un color claro.
- Haz que el título se vea grande y de otro color.
- Elige un tipo de letra diferente (como Arial o Verdana).
Explicación:
En vez de tener todo el texto junto, puedes separarlo por partes como si fueran cajas.
Por ejemplo:
- Una parte para hablar de ti.
- Otra para mostrar trabajos o fotos.
- Otra para poner tus redes sociales.
Esto ayuda a que la página se vea más ordenada y fácil de leer.
Explicación:
Cuando haces una página, por defecto todo se pone de arriba hacia abajo. Pero a veces quieres que las cosas estén una al lado de la otra (por ejemplo, tres imágenes en fila). Para eso usamos una técnica llamada "flex". Le decimos al navegador: "Estas cajas van en fila, no en columna". No necesitas recordar la palabra técnica por ahora. Lo importante es que sepas que puedes alinear cosas horizontalmente, como si armaras una galería de fotos.
Instrucciones:
Haz una página con esta estructura:
1. Un título grande: tu nombre o el título de tu web.
2. Un párrafo donde te presentes.
3. Una imagen tuya o una que te guste.
4. Una lista de tus intereses.
5. Un enlace a alguna red social o página que uses.
. Colores y estilos personalizados.
Guarda todo y abre tu página en el navegador para ver el resultado.
Explicación:
Hay formas gratuitas de subir tu sitio web. Una de las más fáciles es con GitHub Pages. En resumen:
1. Creas una cuenta en la página de GitHub.
2. Subes tu archivo de página web.
3. GitHub te da un enlace como este: https://tuusuario.github.io/miweb.
Ese enlace lo puedes compartir con amigos, familiares o usarlo en tu currículum.
TUTORIAL
📌 Recomendación final: Aprender desarrollo web toma tiempo, pero lo importante es practicar cada semana. Empieza con cosas simples y poco a poco te sentirás más cómodo.
¡Increíble! Ya completaste tu segundo curso. Estás construyendo un gran camino de aprendizaje. ¡Sigue así!