Tecnología·4h

Fundamentos de Desarrollo Web

Para quienes empiezan en desarrollo web, estructura páginas con HTML semántico, accesible y mantenible, desde el documento base hasta formularios e imágenes.

Módulo gratuito

Completa el módulo 1 sin crear una cuenta

El contenido completo está disponible en esta página.

Empezar el módulo 1 gratis

Completo y sin registro · Fundamentos de Desarrollo Web

HTMLCSSJavaScriptGitDeployment

Módulo 1 · completo y gratis

Fundamentos de Desarrollo Web

Se abre aquí, sin registro ni cambio de página.

Sobre este curso

Dirigido a personas que dan sus primeros pasos en desarrollo web. Aprenderás a construir la estructura básica de HTML, elegir elementos semánticos, asociar etiquetas y campos y describir imágenes con texto alternativo. En el trabajo, el código es más comprensible y ofrece una base para accesibilidad y posicionamiento. HTML es un lenguaje de marcado que estructura el contenido de una página mediante etiquetas semánticas como `<header>`, `<main>` o `<article>`, organizadas en un árbol de elementos anidados llamado DOM. Todo documento válido requiere `<!DOCTYPE html>`, `<html lang>`, `<meta charset>` y `<title>` en el `<head>`, además de un `<body>` con el contenido visible. Usar la etiqueta correcta en cada caso, asociar `<label>` con `<input>` y añadir el atributo `alt` a las imágenes mejora la accesibilidad, el SEO y la mantenibilidad del código. CSS controla la presentación visual del HTML mediante selectores de etiqueta, clase e ID, y se aplica preferentemente desde un archivo externo enlazado con `<link>` para separar contenido y estilos. El modelo de caja —content, padding, border y margin— es la base de toda maquetación, y aplicar `box-sizing: border-box` globalmente evita que el padding desborde el ancho definido. En este módulo darás el salto de páginas estáticas a experiencias interactivas. Aprenderás las bases de JavaScript —variables, funciones, eventos y manipulación del DOM— aplicadas a situaciones reales como menús desplegables, validación de formularios y contenido dinámico. Al final, tu página no solo se verá bien: responderá al usuario. Git organiza el trabajo en tres zonas —directorio de trabajo, staging y repositorio— y el ciclo básico consiste en editar archivos, añadirlos con `git add` y confirmarlos con `git commit` usando mensajes en imperativo que describan el efecto del cambio. Las ramas permiten experimentar sin alterar `main`: se crean con `git switch -c`, se fusionan con `git merge` y se eliminan cuando ya no son necesarias. GitHub aloja el repositorio en la nube y sincroniza los cambios mediante `git push` y `git pull`, mientras que un archivo `.gitignore` evita que contraseñas, tokens y carpetas como `node_modules/` lleguen al repositorio remoto. Publicar un sitio estático requiere hosting, dominio y HTTPS; servicios como GitHub Pages, Netlify o Vercel ofrecen las tres piezas de forma gratuita y se conectan directamente al repositorio para desplegar cada vez que se hace `git push`. Las DevTools del navegador, accesibles con F12, permiten inspeccionar el HTML y CSS en tiempo real en la pestaña Elements, detectar errores de JavaScript en Console, identificar recursos que no cargan en Network y auditar rendimiento y accesibilidad con Lighthouse.

Lo que aprenderás

Al terminar este módulo, sabrás redactar la estructura mínima de un documento HTML válido incluyendo `<!DOCTYPE html>`, `<html lang>`, `<meta charset>` y `<title>`, sin omitir ninguno de esos cuatro elementos obligatorios.
Al terminar este módulo, sabrás seleccionar etiquetas semánticas como `<header>`, `<main>`, `<article>` o `<nav>` para describir el significado del contenido y mejorar su accesibilidad e indexación por buscadores.
Al terminar este módulo, sabrás asociar cada `<label>` con su `<input>` mediante los atributos `for` e `id`, y redactar textos `alt` descriptivos en imágenes para garantizar la accesibilidad a lectores de pantalla.
Al terminar este módulo, sabrás enlazar una hoja de estilos externa con `<link>` y aplicar `box-sizing: border-box` globalmente para que `width` incluya padding y borde sin desbordamientos inesperados.
Al terminar este módulo, sabrás distribuir elementos en una barra de navegación usando `display: flex`, `justify-content` y `align-items`, controlando alineación en una sola dimensión sin recurrir a posicionamiento absoluto.
Al terminar este módulo, sabrás escribir media queries con enfoque mobile-first usando `@media (min-width: ...)` para transformar un layout de una columna en móvil en una cuadrícula de varias columnas en escritorio.
Escribir código JavaScript básico usando variables, funciones y condicionales

Puestos que abre este curso

Títulos típicos que piden esta habilidad.

Otros cursos que te pueden interesar

Account Management Fundamentals

Para gestores de cuentas que reciben una cartera: convierte el traspaso en un mapa de clientes, prioridades y próximos pasos con responsables y seguimiento claro.

Account Planning

Para profesionales de ventas con cuentas estratégicas: prioriza clientes, mapea a las personas decisoras y convierte la información en un plan accionable.

Fundamentos de Contabilidad

Para quienes empiezan en contabilidad: entiende la partida doble, clasifica cada cuenta y registra operaciones habituales comprobando que Debe y Haber cuadran.