Muy bien pues vamos calentando motores. Este será el segundo año haciendo el reto de crear 100 sitios web durante el año 2021. Hay tantas cosas que aprendí el año anterior (2020), que no puedo esperar a implementar nuevas cosas este año y ver hasta dónde puedo retarme.
Hace poco tuve oportunidad de ver algunas tendencias para el 2021 respecto a UI (User Interface), las cuáles ya empecé a masticar en mi cabeza de cómo irlas agregando a los sitios de este año.
¿De qué trata?
El reto de los 100 sitios web #100sitioswebchallenge trata de practicar los conocimientos básicos de Desarrollo Web Frontend, comprendiendo las 3 estructuras principales para la creación de un sitio web que son el uso de HTML, CSS y Javascript.
Concretamente el reto consiste en hacer reforzar el aprendizaje de desarrollo web front-end al crear 100 sitios web en el transcurso de los doce meses del año 2021, con diferentes diseños y niveles de complejidad usando la estructura anteriormente mencionada.
¿Cuáles son las reglas?
Las reglas se hicieron para romperse así que no es exactamente así sólo una sugerencia por si te interesa unirte a este reto.
1. Crear un bosquejo del sitio
Conocida también como Mockup, esta parte ayudará a reforzar el proceso de planeación de un sitio, así como el dominio de herramientas de diseño donde podemos ver el esqueleto de la idea para posteriormente irle agregando estilos.
Ejemplo: Figma
2. Desarrollo del sitio
Empezando por lo más básico de lo básico de sitio web que hacer tus primeros sitios sólo con HTML y CSS. Tú decide cuántos, pero el objetivo es poco a poco ir agregando preprocesadores de estilos, librerías de estilos hasta script.
Ejemplo:
- Primero sitios sólo con HTML y CSS
- HTML y CSS (Grid y Flex)
- HTML y CSS (SASS)
- HTML y CSS (Bootstrap)
- HTML, CSS y Javascript (Vainilla, lo más básico)
Claro si tu nivel te lo permite adelante y aumenta la complejidad con las que te sientas cómodo, sólo recuerda cumplir la meta de hacer 100 sitios.
3. Sitio responsivo
Somos parte de una comunidad móvil por lo que es esencial trabajar con media queries para que tu sitio sea visualizado por los diferentes aparatos móviles que los usuarios actualmente utilizan.
Ejemplo:
- Responsivo para iPhone (Diferentes versiones)
- Responsivo para Galaxy y otro producto smartphone
- Responsivo para iPad y Tablet
- Pantallas de escritorio grandes, medianas, chicas.
Utiliza la simulación para móviles que el navegador de Chrome ofrece para saber más detalles de las dimensiones.
4. Sube tu código a Github
Aprende a usar Github y cómo el control de versiones funciona, y comparte tu código. Recuerda este es un reto con el propósito de aprender. No te lo tomes muy en serio y sólo hazlo. Al compartir puedes aprender mucho de ti mismo de cómo va evolucionando tu forma de crear un sitio.
Personalmente tener mi código en Github me ha ayudado a reforzar ciertos conceptos y siempre usar los sitios que he realizado como referencia.
Ejemplo: Mis proyectos en Github
5. Documenta y escribe tu experiencia en tu Blog
Puedes aprender mucho al documentar el proceso que seguiste para cada sitio. Así mismo al hacer público tu proceso y experiencia puedes enseñar a otros.
Pero creo que sobre todo puedes ver tu evolución como profesional.
Ejemplo: #100sitioswebchallenge
Resumen
- El reto de los #100sitioswebchallenge consiste en hacer 100 sitios en el transcurso de un año
- Implementando los conocimientos de Desarrollo Web Frontend (HTML, CSS y Javascript)
- Empieza desde lo más sencillo (HTML y CSS) y ve aumentando de nivel
- Bosqueja la idea del sitio
- Desarrolla el sitio (HTML, CSS, Javascript)
- Hazlo responsivo (Listo para verse en móviles)
- Publica tu código (Github)
- Documenta tu proceso y experiencia (Blog)
Recuerda que no tiene que quedar perfecto sólo iniciarlo y terminarlo. Diviértete en el proceso y ver la maravilla de tu idea proyectada en pantalla.
Sígueme en Instagram para ver cómo van quedando los sitios visualmente, y a través de este blog para leer mi experiencia con cada sitio.
¿Qué crees que faltaría agregar a este reto para hacerlo más interesante?
