Curso Profesional de Programación Web

Material extenso e intuitivo, con explicaciones claras, ejemplos y buscador integrado.

Módulo 1: HTML5 Semántico

Etiquetas semánticas mejoran la estructura, accesibilidad y SEO. A continuación, la totalidad de etiquetas principales:

Tabla de instrucciones HTML5

EtiquetaUsoEjemplo
<!DOCTYPE html>Declarar documento HTML5
<!DOCTYPE html>
<html lang="es">Etiqueta raíz con idioma
<html lang="es">
<head>Metadatos y enlaces
<head>...</head>
<meta charset="UTF-8">Codificación UTF-8
<meta charset="UTF-8">
<title>Título en pestañas
<title>Mi Página</title>
<header>Encabezado de página o sección
<header>...</header>
<nav>Bloque de navegación
<nav>...</nav>
<main>Contenido principal
<main>...</main>
<section>Sección temática
<section>...</section>
<article>Contenido independiente
<article>...</article>
<aside>Contenido complementario
<aside>...</aside>
<footer>Pie de sección o documento
<footer>...</footer>
<a href="...">Enlace a recurso
<a href="#mod2">CSS</a>
<img src="..." alt="...">Imagen con descripción
<img src="logo.png" alt="Logo">
<ul>, <ol>, <li>Listas desordenada/ordenada
<ul><li>Item</li></ul>
<table>, <tr>, <td>, <th>Tablas de datos
<table>...</table>
<form>, <input>, <button>Formularios e interacción
<form><input type="text"><button>Enviar</button></form>

Módulo 2: CSS3 Avanzado

Propiedades de estilo y layout para controlar cada aspecto visual.

Tabla de instrucciones CSS3

PropiedadUsoEjemplo
colorColor del texto
color: #333;
background-colorFondo de elemento
background-color: #fff;
font-sizeTamaño de fuente
font-size: 1rem;
margin / paddingEspaciado exterior/interior
margin: 1rem; padding: .5rem;
box-sizingModelo de caja
box-sizing: border-box;
display: blockElemento de bloque
display: block;
display: inlineElemento en línea
display: inline;
display: inline-blockBloque en línea
display: inline-block;
display: flexFlex container
display: flex;
justify-contentAlineación en eje principal
justify-content: center;
align-itemsAlineación en eje cross
align-items: center;
display: gridGrid container
display: grid;
grid-template-columnsDefine columnas de grid
grid-template-columns: repeat(3,1fr);
gapEspacio entre celdas
gap: 1rem;
positionDefine tipo de posicionamiento
position: absolute;
top/right/bottom/leftOffset de posicionamiento
top: 10px;
z-indexControl de superposición
z-index: 10;
@mediaReglas responsivas
@media (max-width:768px){}

Módulo 3: JavaScript ES6+

Lenguaje de programación para la web: sintaxis moderna, manejo del DOM, eventos y asincronía.

Tabla de instrucciones JavaScript

InstrucciónUsoEjemplo
letDeclara variable mutable
let x = 10;
constDeclara variable constante
const PI = 3.14;
varVariable con scope funcional (evitar)
var a = 1;
function / =>Funciones tradicionales y flecha
function f() {}; const f2 = () => {};
document.getElementById()Seleccionar elemento por ID
const btn = document.getElementById('btn');
document.querySelector()Selector CSS
const item = document.querySelector('.item');
addEventListener()Escuchar eventos
btn.addEventListener('click', fn);
querySelectorAll()Seleccionar múltiples
document.querySelectorAll('li');
innerHTMLModificar contenido HTML
el.innerHTML = '<p>Hola</p>';
textContentModificar texto
el.textContent = 'Hola';
fetch()Realiza peticiones HTTP
fetch('/api/data');
PromiseManejo de asincronía
new Promise((res, rej) => {});
async / awaitSintaxis para promesas
async function f(){ await fetch(); }
console.log()Imprime en consola
console.log('Hello');
JSON.stringify / JSON.parseConvertir JSON a string y viceversa
JSON.parse(jsonStr);

Módulo 4: APIs & REST

Conceptos de arquitecturas RESTful y consumo de APIs con JSON.

Tabla de instrucciones HTTP & REST

MétodoUsoEjemplo
GETLeer recursos
GET /users
POSTCrear recurso
POST /users {"name":"Ana"}
PUTActualizar recurso completo
PUT /users/1 {"name":"Ana"}
PATCHActualizar recurso parcialmente
PATCH /users/1 {"name":"Ana"}
DELETEEliminar recurso
DELETE /users/1
fetch()Petición HTTP desde JS
fetch('/api', { method: 'POST' });
axios()Cliente HTTP alternativo
axios.get('/api');
JSON.stringifySerializar JSON
JSON.stringify(obj);
JSON.parseParsear JSON
JSON.parse(str);

Módulo 5: Git & npm

Control de versiones profesional y gestión de paquetes con npm.

Tabla de instrucciones Git & npm

ComandoUsoEjemplo
git initInicializar repositorio
git init
git cloneClonar repo remoto
git clone https://repo.git
git addAgregar cambios al área
git add .
git commitGuardar snapshot
git commit -m "mensaje"
git pushEnviar cambios remotos
git push origin main
git pullActualizar local desde remoto
git pull
git branchListar o crear ramas
git branch feature
git checkoutCambiar de rama
git checkout feature
npm initCrear package.json
npm init -y
npm installInstalar dependencia
npm install express
npm runEjecutar script definido
npm run start
package.jsonMetadatos y scripts del proyecto
{
  "scripts": {
    "start": "node app.js"
  }
}