Escribir CSS es difícil. A pesar de que a menudo se burlan de él y no se ve como un lenguaje de programación, escribir CSS coherente y bonito es realmente difícil. Y en mi viaje como desarrollador web autodidacta, a menudo he notado que las clases y tutoriales en línea a menudo omiten la parte de diseñar su aplicación con CSS y no entran en detalles sobre las mejores prácticas de CSS y más.
Y creo que muchos otros desarrolladores front-end también luchan con este problema si miro la mayoría de las carteras que existen. Aprendemos cómo construir una API relajante antes de aprender a usar correctamente la transición CSS o los atributos de sombra de cuadro para diseñar un botón simple. Es por eso que he decidido compartir contigo mis 10 recursos principales sobre cómo mejorar en CSS , ¡para que tu portafolio impresione a tus clientes!
Nota rápida: estos recursos son desafíos y estilo de proyecto, lo que significa que aprende mediante el uso activo de CSS en lugar de seguir tutoriales o clases en línea. Prefiero este método, ya que te enseña a buscar cosas por tu cuenta en lugar de seguir un camino que se te ha trazado en clase.
1. Mentor de frontend
Frontend Mentor es sin duda uno de los mejores recursos que existen. ¡Al demostrarle ideas de proyectos del mundo real y recursos gratuitos para construirlos, afinar sus habilidades de CSS con este recurso también significará que terminará teniendo más recursos en su cartera!
2. 100 días de CSS (desafío CSS)
100 días de CSS es útil, ya que puede ver lo que otros han creado y, si envía su propio código, ¡también aparecerá en el sitio del desafío! Esto también es bueno si tiene dificultades y solo desea obtener algunas sugerencias de las soluciones de otras personas.
3. Club de desafíos de front-end
El Club de Desafíos de Front-End consta de 8 desafíos de Piccalilli y sus respectivas soluciones. Algunos de los desafíos vienen con activos si son necesarios, ¡para que pueda sumergirse de inmediato!
4. IU diaria
DailyUI es más un recurso para diseñadores que para desarrolladores front-end, pero no obstante, creo que vale la pena mencionarlo. A menudo mis clientes me piden que cree diseños por mi cuenta o que dé recomendaciones, así que creo que cualquier desarrollador de front-end debería al menos conocer algunos de los conceptos de diseño. ¡Notarás el efecto en tu habilidad CSS con seguridad!
5. CSS Battle
CSS Battle se ha vuelto muy popular recientemente con algunos de los desarrolladores web más grandes de Youtubers que luchan entre sí en sus videos. Los desafíos van desde muy principiantes hasta muy avanzados y el factor del juego motiva, pero escribir soluciones rápidas te da más puntos en lugar de soluciones limpias y consistentes … ¡No obstante, diversión y aprendizaje en uno!
6. Codier.io
Codier.io le permite crear soluciones a su desafío directamente en el navegador y compararlas con la comunidad. Sin embargo, la mayoría de los desafíos están dirigidos a principiantes, ¡así que esto podría ser demasiado fácil para algunos de ustedes!
7. Construye algo que encontraste en Dribbble
Si aún no ha oído hablar de Dribbble, es una de las plataformas más grandes para que los diseñadores muestren su trabajo en la web. Desde animaciones hasta marcas de productos, impresión y diseño web y móvil, puede encontrarlo todo. Es un gran recurso para encontrar hermosos diseños web y móviles y recrearlos en código para la práctica.
8. 30 días de CSS Girls
30 Days of CSS Girls es un desafío de 30 días que le enseña muchos de los conceptos básicos de CSS y cómo funcionan. Si es un principiante, puede que sea aquí por donde quiera empezar.
9. Diseño CSS diario
Cuando me encontré con Daily CSS Design, me sorprendió. Es un proyecto de Bjørn Fjellstad , un diseñador y desarrollador, que creó un diseño diferente todos los días durante todo un año. Los diseños en sí mismos son increíbles, pero la presentación en su sitio web también habla por sí sola. Si quieres mejorar tu CSS, ¡quizás quieras inspirarte aquí!
10. Ace Front End
Y por último, Acer Front End. Un recurso de nivel principiante a intermedio que le permitirá tener más confianza (o no) en sus habilidades como desarrollador. Termina los desafíos directamente en el navegador y conviértete en un desarrollador «mejor».
