Buscar proyectos de desarrollo web es fácil si sabes lo que estás buscando. Pero a menudo estos proyectos también incluyen Javascript, que puede que no quieras. ¿Quizás eres un principiante y quieres concentrarte en el diseño web más que en el desarrollo? Aquí tienes algunos recursos para encontrar proyectos de HTML y CSS.
Índice de contenidos
Los mejores sitios web para encontrar proyectos HTML y CSS
Empecemos por el sitio web más adecuado para los principiantes.
1. Mentor Frontend
Este sitio web proporciona una lista de retos para ayudar a desarrollar diferentes estilos de diseño. Aunque algunos de los retos necesitan Javascript, puedes detectarlos fácilmente porque se menciona justo debajo del nombre del proyecto. Puedes filtrar los resultados para que sólo se muestren los proyectos HTML y CSS si es lo que buscas. Los proyectos están divididos en secciones de Novato, Junior e Intermedio, lo que facilita la elección de un proyecto según tu experiencia.
Al abrir el proyecto, puedes descargar los archivos de inicio para las imágenes y otros detalles de diseño. Puedes completar el proyecto y enviarlo al sitio web para acceder a los archivos del proyecto de otras personas. Analizando su trabajo podrás ver otras formas de completarlo y finalizarlo. Los proyectos HTML y CSS de este sitio web no te piden que utilices una forma específica, por lo que eres libre de utilizar la cuadrícula, flex-box o incluso cualquier marco CSS si lo prefieres.
Abrir Mentor de Frontend
2. Práctica de Frontend
Aunque Frontend Mentor proporciona proyectos para niveles intermedios, ofrece proyectos más avanzados. El servicio básicamente mostrará una página web de demostración de sitios reales y quiere que la recrees. Por ejemplo, la página sobre Ableton, la página de recompensas de Starbucks, la página de lanzamiento de un álbum de Monstercat, etc.
Excepto los detalles sobre la paleta de colores, no obtienes ningún archivo de inicio para empezar. Se te pide que busques fotos similares en la web o que las descargues directamente de la página de demostración. El servicio no proporciona ningún código de solución, pero puedes abrir la página web y utilizar las herramientas de desarrollo del navegador para encontrarlo. El popular sitio de proyectos HTML y CSS sólo cuenta con 10 proyectos únicos.
Abre Práctica de Frontend
3. La interfaz de usuario diaria
Daily UI viene con un concepto completamente diferente. Abre el sitio y suscríbete al boletín. Recibirás un boletín cada día con los detalles del proyecto que tienes que completar ese mismo día. Recibirás hasta 100 proyectos, pero sólo en días laborables. El Desafío Diario de IU se completará cuando termines y envíes los 100 proyectos.
No se trata de proyectos masivos. La mayoría te piden que crees una sección en una página web, como la creación de una tabla de precios, una página de pago, una tarjeta de recetas, un billete de avión, etc.
Abrir IU diaria
4. Codewell
Aquí sólo encontrarás unos 25 proyectos CSS y HTML, pero son un poco diferentes en comparación con otros de la lista. Por ejemplo, la creación de un diseño para la sección de comentarios, la página de registro, los paneles de control, el feed de las redes sociales, etc. son algunos de los proyectos de la lista de Codewell. Estos proyectos generalmente necesitan Javascript, pero Codewell sólo te reta a crear un diseño. Esto significa que las páginas de registro y los cuadros de mando que crees no tienen que funcionar.
La aplicación también tiene una suscripción premium de 8$/mes. La suscripción Premium desbloqueará los retos y también mostrará los archivos de diseño de Figma.
Abre Codewell
5. Regatea
Dribble es un mercado donde puedes trabajar como diseñador freelance. Aquí es donde puedes empezar a pensar en dar un paso adelante y ganar dinero. Dribble tampoco es sólo para diseñadores web. Puedes encontrar todo tipo de diseñadores, como diseñadores gráficos, editores de vídeo, diseñadores de moda, fotógrafos, ilustradores y mucho más. Pero el diseño web es una parte importante de la plataforma donde encontrarás muchos trabajos. Aunque algunos diseños avanzados requieren Javascript, puedes aceptar pequeños trabajos que sólo requieren HTML y CSS para su creación.
También es una especie de plataforma de redes sociales para desarrolladores web. Mucha gente sube sus diseños a sus perfiles. Puedes crear tu propio diseño y subirlo también o simplemente recrear los diseños que ya están publicados para practicar.
Abre Regatea
6. Behance
Behance es como Dribble para todo tipo de diseñadores. Al igual que Dribble, también puedes encontrar trabajos en la sección de empleos y también proyectos en la sección Descubrir. Lo que hace único a Behance es su opción de filtrado. Puedes limitar tu búsqueda para que sólo se muestren diseños web, proyectos con sólo HTML y CSS, elegir un color para obtener proyectos diseñados en un color específico, ubicación para obtener proyectos enviados desde un lugar específico, etc.
Algunos proyectos también vienen con archivos fuente incluidos, para que puedas comprobar el código de ese proyecto para analizarlo.
Abre Behance
7. Batalla CSS
CSS Battle es el sitio web perfecto si quieres ser un profesional del diseño CSS. El servicio proporciona un objetivo y tú tienes que utilizar tus conocimientos de HTML y CSS para obtener un resultado exactamente igual al de la fuente. A diferencia de otros sitios de HTML y CSS, aquí no estás diseñando tablas o diseños, sino que obtienes un estilo de icono o un diseño de arte abstracto como objetivo. Las reglas son sencillas, no debes usar javascript, no debes incluir ninguna imagen, y debes conseguir el diseño objetivo con el menor código posible.
El que consiga el objetivo con menos código estará más arriba en la tabla de clasificación. No tienes que utilizar ningún editor de código, la aplicación proporciona un editor online que te muestra el resultado en tiempo real. Cuando creas que tu resultado es exactamente igual al objetivo, pulsa el botón de enviar para comprobar la puntuación.
Abre Batalla CSS
8. Pinterest
Pinterest es una forma estupenda de encontrar y recopilar imágenes de diseños web. Puede que aquí no obtengas el código fuente ni ningún archivo descargable, pero sí un gran número de diseños entre los que elegir. Sólo tienes que buscar diseño web y deberías encontrar un montón de resultados que puedes convertir en proyectos. El motor de recomendaciones de Pinterest adaptará los resultados de la búsqueda en el futuro para atender mejor a tus intereses.
Además de diseños, también es una gran plataforma para encontrar consejos sobre desarrollo web, infografías, sugerencias, etc.
Abrir Diseños web en Pinterest
9. YouTube
Mientras que la mayoría de los servicios se limitan a listar proyectos como un reto con el código fuente, YouTube, en cambio, tiene un montón de tutoriales para usar HTML y CSS. Sólo tienes que buscar proyectos HTML y CSS en el buscador de YouTube para empezar.
La mayoría de los proyectos también proporcionan el enlace al código fuente y te proporcionan archivos de inicio para las imágenes. Al tratarse de tutoriales, son una gran opción para el principiante que quiere codificar mientras aprende. Además, los consejos y tácticas que se proporcionan en el medio serán útiles a largo plazo.
Abre Proyectos HTML y CSS en YouTube
Ideas de proyectos de HTML y CSS
Como programador en ciernes, deberías considerar a Google como tu mejor amigo. Así que una rápida búsqueda en Google de proyectos HTML y CSS te traerá un montón de proyectos de diferentes sitios web. No hace falta mencionar que también puedes recrear sitios web populares como YouTube, Apple, Tesla, Amazon, Netflix, Starbucks, etc. o cualquier sitio web que consideres que tiene un gran diseño. En cualquier caso, hoy en día tienes opciones para crear sitios web sin usar ningún código.