Cómo aprender HTML, CSS y JavaScript sin morir en el intento

Aprende selectores, colores y layouts copiando el diseño de una página que te guste.

1. 1
   Elige una web simple para clonar — Selecciona una página como la de Google (sin los resultados) o una tarjeta de producto de Amazon. Evita webs complejas al principio.
2. 2
   Crea el HTML base con las secciones — Usa <div>, <header>, <main> y <footer> para dividir la página.
3. 3
   Aplica estilos básicos con CSS — Escribe reglas para color de fondo, tamaño de fuente y márgenes. Por ejemplo: body { background: #f0f0f0; font-family: Arial; }
4. 4
   Aprende Flexbox con un menú de navegación — Crea una barra horizontal con enlaces usando display: flex y justify-content: space-around.
5. 5
   Añade una imagen de fondo y bordes redondeados — Usa background-image y border-radius para darle estilo a una tarjeta.

Aprende variables, funciones y eventos creando un contador interactivo.

1. 1
   Crea un botón en HTML con un id — Escribe <button id='miBoton'>Haz clic</button>.
2. 2
   Añade un párrafo para mostrar el resultado — Escribe <p id='contador'>0</p>.
3. 3
   Escribe una función en JavaScript — En una etiqueta <script> al final del body, define: function contar() { let numero = document.getElementById('contador'); numero.textContent = parseInt(numero.textContent) + 1; }
4. 4
   Conecta el botón con la función — Añade onclick='contar()' al botón. Abre la página y haz clic. El número debe aumentar.
5. 5
   Añade un botón para reiniciar — Crea otro botón con una función que ponga el contador a 0.

Integra HTML, CSS y JavaScript en un proyecto que filtra imágenes por categoría.

1. 1
   Estructura HTML con contenedor y botones — Crea un <div> para las imágenes y botones como 'Todas', 'Gatos', 'Perros'.
2. 2
   Estiliza con CSS: cuadrícula y tarjetas — Usa display: grid con grid-template-columns: repeat(3, 1fr) y aplica sombras y bordes redondeados.
3. 3
   Añade las imágenes con data-atributos — Cada <img> lleva data-categoria='gato' para identificarla.
4. 4
   Escribe la función de filtrado en JavaScript — Usa querySelectorAll para seleccionar todas las imágenes y un bucle forEach que muestre/oculte según la categoría.
5. 5
   Conecta los botones con event listeners — En lugar de onclick en HTML, usa addEventListener en el script para mantener separados HTML y JS.

Conecta tu web con datos reales usando fetch y una API pública.

1. 1
   Obtén una clave gratuita de OpenWeatherMap — Regístrate en openweathermap.org y genera una API key. Es gratuita para uso limitado.
2. 2
   Crea un formulario HTML con un campo de ciudad — Escribe <input type='text' id='ciudad' placeholder='Ej: Madrid'> y un botón 'Buscar'.
3. 3
   Escribe la función fetch en JavaScript — Usa fetch('https://api.openweathermap.org/data/2.5/weather?q=' + ciudad + '&appid=TU_CLAVE').then(response => response.json()) para obtener datos.
4. 4
   Muestra la temperatura y el icono del clima — Extrae del JSON la propiedad main.temp y weather[0].icon. Crea elementos HTML dinámicamente con document.createElement.
5. 5
   Maneja errores con try/catch — Envuelve el fetch en un bloque try/catch para mostrar un mensaje si la ciudad no existe o hay problemas de red.

Sube tu código a GitHub para tener un portafolio en línea y aprender control de versiones.

1. 1
   Crea una cuenta en GitHub — Ve a github.com y regístrate. Elige un nombre de usuario profesional.
2. 2
   Crea un nuevo repositorio — Haz clic en el botón 'New' y nómbralo 'mi-proyecto'. No marques 'Initialize with README'.
3. 3
   Sube tus archivos desde la terminal — Usa git init, git add ., git commit -m 'Primera versión', luego conecta con el repositorio remoto y haz git push.
4. 4
   Activa GitHub Pages — Ve a Settings > Pages y selecciona la rama main como fuente. En minutos tu web estará en https://tusuario.github.io/mi-proyecto.
5. 5
   Comparte el enlace en LinkedIn — Publica el enlace de tu proyecto con una breve descripción de lo que aprendiste. Esto suma puntos en tu perfil profesional.