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 quizás no desee. Tal vez, ¿eres un principiante y solo quieres concentrarte en el diseño web más que en el desarrollo? Aquí hay algunos recursos para encontrar proyectos HTML y CSS.
Los mejores sitios web para encontrar proyectos HTML y CSS
Comencemos con el sitio web más amigable para principiantes.
1. Mentor de interfaz
Este sitio web proporciona una lista de desafíos para ayudar a desarrollar diferentes estilos de diseño. Si bien algunos de los desafíos necesitan Javascript, puede detectarlos fácilmente, ya que se mencionan justo debajo del nombre del proyecto. Puede filtrar los resultados para mostrar solo proyectos HTML y CSS si eso es lo que busca. Los proyectos se dividen en secciones Newbie, Junior e Intermediate, lo que facilita la elección de un proyecto de acuerdo con su experiencia.
Al abrir el proyecto, puede descargar los archivos iniciales para imágenes y otros detalles de diseño. Puede completar el proyecto y enviarlo al sitio web para acceder a los archivos del proyecto de otras personas. Analizar su trabajo le mostrará otras formas de completarlo. Los proyectos HTML y CSS en este sitio web no le piden que use una forma específica, por lo que puede usar la cuadrícula, el cuadro flexible o incluso cualquier marco CSS si lo prefiere.
Abierto Mentor de interfaz
2. Práctica de interfaz
Si bien 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 acerca de Ableton, la página de recompensas de Starbucks, la página de lanzamiento del álbum Monstercat, etc.
Excepto por los detalles sobre la paleta de colores, para empezar, no obtiene ningún archivo de inicio. Se le pide que busque fotos similares en la web o que las descargue directamente desde la página de demostración. El servicio no proporciona ningún código de solución, pero puede abrir la página web y usar las herramientas de desarrollo del navegador para encontrarlo. El popular sitio de proyectos HTML y CSS solo presenta 10 proyectos únicos.
Abierto Práctica de interfaz
3. Interfaz de usuario diaria
Daily UI viene con un concepto completamente diferente. Abra el sitio y regístrese para recibir el boletín. Recibirás un boletín todos los días con los detalles del proyecto que debes completar ese mismo día. Recibirás hasta 100 proyectos pero solo entre semana. Daily UI Challenge se completará cuando termines y envíes los 100 proyectos.
Estos no son proyectos masivos. La mayoría le pide que cree una sección en una página web, como crear una tabla de precios, una página de pago, una tarjeta de recetas, un boleto de avión, etc.
Abierto IU diaria
4. Código bien
Aquí encontrará solo alrededor de 25 proyectos CSS y HTML, pero son un poco diferentes en comparación con otros en la lista. Por ejemplo, la creación de un diseño para la sección de comentarios, la página de registro, los paneles, las redes sociales, etc. son algunos de los proyectos enumerados por Codewell. Estos proyectos generalmente necesitan Javascript, pero Codewell solo lo desafía a crear un diseño. Esto significa que las páginas de inicio de sesión y los paneles que cree no tienen que funcionar.
La aplicación también tiene una suscripción premium de $8/mes. La suscripción premium desbloqueará desafíos y también mostrará los archivos de diseño de Figma.
Abierto Código bien
5. Regate
Dribble es un mercado donde puedes trabajar como diseñador independiente. Aquí es donde puedes empezar a pensar en dar un paso adelante y ganar dinero. Dribble tampoco es solo para diseñadores web. Puede encontrar todo tipo de diseñadores, como diseñadores gráficos, editores de video, diseñadores de moda, fotógrafos, ilustraciones y más. Pero el diseño web es una parte importante de la plataforma donde encontrará muchos trabajos. Aunque algunos diseños avanzados requieren Javascript, puede realizar pequeños trabajos que solo requieren HTML y CSS para crear.
También es una especie de plataforma de redes sociales para desarrolladores web. Muchas personas simplemente suben sus diseños a sus perfiles. Puede crear su propio diseño y subirlo también o simplemente recrear los diseños que ya están publicados para practicar.
Abierto Regatear
6. Comportamiento
Behance es como Dribble para todo tipo de diseñadores. Al igual que Dribble, también puedes encontrar trabajos en la sección de trabajos y también proyectos en la sección Descubrir. Lo que hace único a Behance es su opción de filtrado. Puede restringir su búsqueda para mostrar solo diseños web, proyectos con solo HTML y CSS, elegir un color para obtener proyectos diseñados en un color específico, ubicación para obtener proyectos enviados desde una ubicación específica, etc.
Algunos proyectos también vienen con archivos fuente incluidos, de modo que puede consultar el código de ese proyecto para su análisis.
Abierto comportamiento
7. Batalla CSS
CSS Battle es el sitio web perfecto si estás tratando de ser un profesional en el diseño de CSS. El servicio proporciona un objetivo y necesita usar sus habilidades de HTML y CSS para entregar una salida que se vea exactamente como la fuente. A diferencia de otros sitios HTML y CSS, no está diseñando tablas o diseños aquí, obtiene un estilo de icono o un diseño de arte abstracto como objetivo. Las reglas son simples, no debe usar javascript, mostrar no incluir ninguna imagen y debe lograr el diseño objetivo con la menor cantidad de código posible.
El que logre el objetivo con el menor código será más alto en la tabla de clasificación. No tiene que usar ningún editor de código, la aplicación proporciona un editor en línea que le muestra el resultado en tiempo real. Una vez que crea que su resultado se ve exactamente como el objetivo, presione el botón Enviar para verificar el puntaje.
Abierto Batalla CSS
8. Pinterest
Pinterest es una excelente manera de encontrar y recopilar imágenes de diseños web. Es posible que aquí no obtenga el código fuente ni ningún archivo descargable, pero sí tiene una gran cantidad de diseños para elegir. Simplemente busque diseño web y debería encontrar muchos resultados que puede convertir en proyectos. El motor de recomendaciones de Pinterest adaptará los resultados de búsqueda en el futuro para satisfacer mejor sus intereses.
Además de diseños, también es una gran plataforma para encontrar consejos sobre desarrollo web, infografías, sugerencias, etc.
Abierto Diseños Web en Pinterest
9. Youtube
Si bien la mayoría de los servicios simplemente enumeran los proyectos como un desafío con el código fuente, YouTube, por otro lado, tiene muchos tutoriales para usar HTML y CSS. Simplemente busque proyectos HTML y CSS en la búsqueda de YouTube para comenzar.
La mayoría de los proyectos también proporcionan el enlace al código fuente y le proporcionan archivos de inicio para las imágenes. Como se trata de tutoriales, son una gran opción para el principiante que quiere codificar mientras aprende. Además, los consejos y tácticas proporcionados en el medio serán útiles a largo plazo.
Abierto Proyectos HTML y CSS en YouTube
Zona de juegos HTML y CSS
Como programador en ciernes, debes considerar a Google como tu mejor amigo. Entonces, una búsqueda rápida en Google de proyectos HTML y CSS le traerá muchos proyectos de diferentes sitios web. No hace falta mencionar que también puede recrear sitios web populares como YouTube, Apple, Tesla, Amazon, Netflix, Starbucks, etc. o cualquier sitio web que crea que tiene un gran diseño. De todos modos, en estos días tienes opciones para crear sitios web sin usar ningún código.