20 proyectos web para principiantes (con código inicial)

Proyectos web para principiantes

20 proyectos web para principiantes, con código inicial | We.Inc

20 proyectos de desarrollo web para principiantes en HTML, CSS, JavaScript y React, cada uno con lo que enseña y un fragmento inicial que puedes pegar y ampliar.

Empieza con proyectos que enseñen una idea nueva cada uno: una página personal para HTML y CSS, un contador y una lista de tareas para eventos y estado en JavaScript, y luego una app del tiempo o un cuestionario para fetch y JSON. Pasa a React cuando JavaScript puro te resulte fácil. Cada proyecto de abajo incluye un fragmento inicial que puedes pegar y ampliar.

Un orden sensato

Las listas de proyectos para principiantes suelen quedarse en un título. Cada proyecto de aquí indica qué habilidad practica, cuánto tiempo lleva aproximadamente y te da unas líneas de código funcional para empezar, así pasas tu primera hora construyendo en lugar de mirar un archivo vacío. Filtra por nivel o por el lenguaje que quieras practicar.

Preguntas frecuentes

¿Cuál debería ser mi primer proyecto web?

Una página de perfil sobre ti en HTML y CSS puros. No necesita más preparación que un editor de texto y un navegador, y cubre encabezados, párrafos, enlaces, imágenes y estilos básicos.

¿Una app de tareas es demasiado básica para un portafolio?

Por sí sola, sí, porque casi todos los que aprenden hacen una. Hazla tuya: añade fechas límite, filtros, arrastrar para reordenar o guardado en localStorage, y escribe una nota breve sobre lo que mejorarías.

¿Cuándo debería aprender React?

Cuando puedas construir el contador, la lista de tareas y una app basada en fetch en JavaScript puro sin tutorial. React tiene mucho más sentido cuando has sufrido actualizando el DOM a mano.

¿Necesito un backend para estos proyectos?

No. Los veinte funcionan en el navegador. Los proyectos de datos llaman a APIs públicas gratuitas o a un archivo JSON local, y los que guardan datos usan localStorage, que conserva datos de texto en el navegador sin caducidad.

¿Cuántos proyectos necesito antes de buscar trabajo?

No hay un número fijo. Tres o cuatro proyectos terminados y pulidos que muestren habilidades distintas suelen decir más que veinte a medias.

Elige proyectos por la habilidad, no por el tema

Haz que cada uno sea presentable

Un archivo inicial en blanco

Guárdalo como index.html, ábrelo en tu navegador y pega cualquier proyecto HTML dentro del body.

Incluye la etiqueta viewport para que los móviles lo muestren al tamaño correcto, y una etiqueta script para los proyectos de JavaScript.

Página de perfil personal

Principiante

HTML/CSS

1 a 2 horas

Estructura de página, encabezados, imágenes, enlaces

Añade un tema oscuro con prefers-color-scheme.

Página de receta

Principiante

HTML/CSS

1 hora

Listas ordenadas y desordenadas, secciones semánticas

Añade una hoja de estilos de impresión que oculte la foto.

Landing page de producto

Principiante

HTML/CSS

3 horas

Flexbox, espaciado, botones, texto responsive

Haz que la fila de características se apile por debajo de 600px.

Cuadrícula de fotos responsive

Principiante

HTML/CSS

1 hora

CSS grid, auto-fit, object-fit

Abre una vista ampliada al hacer clic en una foto.

Formulario de registro accesible

Principiante

HTML/CSS

2 horas

Etiquetas, tipos de input, validación integrada

Muestra un mensaje de error propio bajo cada campo.

Contador de clics

Principiante

JavaScript

30 minutos

Seleccionar elementos, eventos de clic, actualizar texto

Añade un botón de reinicio y detente en cero.

Lista de tareas

Principiante

JavaScript

2 horas

Envío de formularios, arrays, renderizar una lista

Guarda las tareas para que sobrevivan a una recarga.

Calculadora de propinas

Principiante

JavaScript

1 hora

Eventos de input, números, formato de dinero

Divide la cuenta entre varias personas.

Interruptor de modo claro y oscuro

Principiante

JavaScript

45 minutos

Alternar clases, guardar una preferencia

Usa la configuración del sistema en la primera visita.

Temporizador de cuenta atrás

Intermedio

JavaScript

1 hora

setInterval, fechas, detener temporizadores

Deja que el usuario elija la fecha objetivo.

Cuestionario de opción múltiple

Intermedio

JavaScript

3 horas

Datos en arrays de objetos, puntuación, estado

Baraja las preguntas y muestra una barra de progreso.

Notas guardadas en el navegador

Intermedio

JavaScript

2 horas

localStorage, JSON.stringify y JSON.parse

Añade una búsqueda y un botón de borrar en cada nota.

App del tiempo

Intermedio

APIs

3 horas

fetch, async/await, estados de error

Muestra un mensaje de carga y un error amable.

Tarjeta de perfil de GitHub

Intermedio

APIs

2 horas

Leer campos JSON, crear tarjetas a partir de datos

Muestra los cinco repositorios más recientes del usuario.

Filtro de búsqueda en vivo

Intermedio

JavaScript

1 hora

Filtrar arrays, eventos de input, estados vacíos

Resalta las letras que coinciden.

Contador en React

Siguiente paso

React

30 minutos

Componentes, useState, manejadores de eventos

Añade un campo para el tamaño del incremento.

App de tareas en React

Siguiente paso

React

3 horas

Listas con keys, inputs controlados, actualizaciones inmutables

Añade los filtros Todas, Activas y Hechas.

Directorio de usuarios en React

Siguiente paso

React

2 horas

useEffect, estados de carga y de error

Añade un cuadro de búsqueda que filtre por nombre.

Mini tablero kanban

Siguiente paso

React

4 horas

Elevar el estado, mover elementos entre listas

Añade arrastrar y soltar entre columnas.

Control de gastos

Siguiente paso

React

4 horas

Valores derivados, reduce, formularios con varios campos

Haz un gráfico del gasto por categoría.

Los 20 proyectos

Filtra por nivel o habilidad y abre un proyecto para ver su código inicial.

Filtrar por nivel

Filtrar por habilidad

Se muestran {n} de {total} proyectos

Copiar

{level} · {skill} · {time}. Enseña: {teaches}. Reto extra: {stretch}

Empieza gratis · Sin tarjeta de crédito

Relacionado: Guías

Producto

Para quién es

Funciones

Recursos

Empresa

Mapa del sitio