Plantillas para clientes

Proyectos completos listos para personalizar y entregar. Cada plantilla frontend es un solo archivo HTML autocontenido (HTML + CSS + JavaScript), responsive, con contenido de ejemplo realista en español y variables CSS para cambiar colores en segundos. Puedes verla en vivo, copiar el código o abrirla en el Playground para editarla.

Además hay dos proyectos full-stack documentados paso a paso, con todo el código: un blog con panel de administración en PHP y un sistema de reservas con Node.js. Son la base perfecta para tus primeros proyectos de pago o para tu portafolio.

Qué vas a poder hacer

• Entregar una landing profesional a un negocio local en uno o dos días.
• Adaptar diseños a cualquier giro cambiando variables, textos e imágenes.
• Construir y desplegar sistemas reales con login, base de datos y panel de administración.
• Entender cómo están hechas por dentro para crear tus propias plantillas.

Requisitos previos

• Para las plantillas frontend: HTML, CSS y nociones de JavaScript.
• Para el blog: PHP y MySQL.
• Para las reservas: Node.js y SQL.

Plantillas frontend

💈 Negocio localBarbería con servicios y precios, horario "abierto ahora", reseñas, mapa y WhatsApp flotante.🍲 RestauranteMenú filtrable por categoría con buscador, especialidades y reservación por WhatsApp.👩‍💻 Portafolio personalEstilo developer con tema claro/oscuro, efecto de escritura, proyectos filtrables y contadores.🚀 Agencia / serviciosLanding de ventas: servicios, proceso, casos, precios mensual/anual, FAQ y captura de prospectos.🦷 Consultorio / clínicaTratamientos, especialistas con cédula, opiniones y agendador con horarios por día.🏋️ GimnasioEstética deportiva, horario de clases por día, membresías, coaches y calculadora de IMC.🛒 Tienda con carritoCatálogo, carrito lateral con localStorage, cupones, envío gratis y pedido por WhatsApp.💍 Boda / eventoCuenta regresiva, itinerario, ubicaciones, galería, mesa de regalos y RSVP.📊 Dashboard adminSidebar colapsable, KPIs, gráficas SVG sin librerías, tabla con orden y paginación, modo oscuro.

Proyectos full-stack

📝 Blog/CMS en PHP + MySQLPanel admin con login, CRUD de posts, subida de imágenes, categorías y URLs amigables. Listo para hosting compartido.📅 Reservas con Node + MySQLAPI Express con disponibilidad real, transacciones contra dobles reservas, JWT y frontend en JS.

Temario

1. Landing de negocio local — la plantilla más vendida para empezar como freelancer.
2. Restaurante con menú — menú generado desde datos, fácil de actualizar.
3. Portafolio personal — tu carta de presentación como desarrollador o creativo.
4. Agencia / servicios — estructura de página de ventas de alta conversión.
5. Consultorio / clínica — confianza, requisitos legales y agenda de citas.
6. Gimnasio — horario de clases dinámico y captación de prospectos.
7. Tienda con carrito en JS — e-commerce sin servidor con persistencia.
8. Página de boda / evento — invitación digital con RSVP.
9. Dashboard de administración — base visual para cualquier panel.
10. Blog/CMS en PHP + MySQL — proyecto full-stack completo paso a paso.
11. Reservas con Node + MySQL — API, base de datos y frontend de un sistema de citas.

Cómo usar una plantilla con un cliente

1. Elige la más cercana al giro y ábrela en el Playground o descarga el archivo con el botón "Copiar → Archivo completo".
2. Cambia la marca: variables de color en :root, logo, tipografía.
3. Sustituye el contenido: textos reales del cliente, fotos propias optimizadas (WebP, menos de 200 KB), teléfono y WhatsApp.
4. Revisa SEO básico: title, meta description, textos alternativos en imágenes y etiquetas Open Graph para compartir en redes.
5. Prueba en celular y pasa Lighthouse (rendimiento, accesibilidad, SEO).
6. Publica: Netlify, Vercel, GitHub Pages o el hosting del cliente; conecta el dominio y activa HTTPS.

Imágenes de ejemplo

Las demos usan fotos aleatorias de picsum.photos y degradados CSS para no depender de archivos. Antes de entregar, reemplázalas siempre por fotos reales del negocio o de bancos con licencia libre como Unsplash o Pexels.

Licencia y personalización

Puedes usar estas plantillas libremente en proyectos comerciales. Aun así, personalízalas de verdad: un cliente paga por un sitio que represente su negocio, no por una plantilla con el logo cambiado.

¿Necesitas sólo una pieza (formulario, login, subida de imágenes)? Revisa los Snippets.