Un proyecto de codificación por día durante 20 días.

Cómo me enseñé el desarrollo web en 20 días

Fue el primer día de vacaciones de invierno para los estudiantes de Stanford. De vuelta en casa, abrí una docena de pestañas de inspiración de codificación, ingresé a un editor de código y creé mi primer proyecto de codificación. 20 días después, creé mi último proyecto antes de empacar y volar para regresar a la rutina de la universidad.

Me desafié a mí mismo a codificar un proyecto todos los días para poder adquirir las habilidades para hacer un sitio web tan increíble como los sitios web que me inspiran. Hacer realidad mis numerosas ideas y poder compartirlas con el mundo siempre ha sido mi fuerza impulsora, primero en arte, ahora en código.

Durante esos 20 días, aprendí varios lenguajes de desarrollo web y creé muchos proyectos, incluida una aplicación de mensajería, una aplicación de notas y un chatbot.

Puedes encontrar mis proyectos de 20 días en CodePen.

Aquí están mis herramientas, proceso creativo y algo de reflexión al final.

Herramientas

Utilicé todas las siguientes herramientas, pero todo más allá de HTML, CSS, Javascript y un editor de código es opcional.

  • CodePen. Un editor de código en línea para HTML, CSS y Javascript donde los usuarios pueden mostrar su trabajo, ideal para que se vea su código de desarrollo web.
  • Photoshop Un editor de gráficos de clase mundial para crear gráficos de trama. Creé gráficos para ciertos proyectos con esto y una tableta Huion.
  • HTML Lenguaje de marcado de hipertexto; crea el contenido de una página web.
  • Doguillo. Un motor de plantillas para una sintaxis más "limpia, sensible a espacios en blanco para HTML" - ideal para acelerar el desarrollo.
  • Oreja. Una biblioteca de componentes para obtener componentes receptivos rápidamente. Genial para la velocidad; No es tan bueno para diseños únicos, ya que cada componente tendrá un aspecto predeterminado.
  • CSS Hojas de estilo en cascada; dicta el diseño de una página web.
  • Hablar con descaro a. Lenguaje de hojas de estilo que proporciona variables, funciones, mixins y más para simplificar la creación de CSS.
  • Javascript Se utiliza para definir eventos impredecibles o controlados por el usuario de una página web.
  • Reaccionar. Una biblioteca Javascript que ayuda a mantener el estado y crear el contenido de una página web al separar cada parte en un componente reutilizable.
  • jQuery. Una biblioteca de Javascript para ayudar a simplificar la manipulación y el desplazamiento HTML DOM. Tenga en cuenta, sin embargo, que su facilidad tiene el costo de su tamaño relativamente grande, alrededor de 30 KB.
  • three.js. Una biblioteca Javascript para crear y mostrar modelos 3D.
  • Firebase Una plataforma móvil y web que proporciona fácil acceso a la base de datos, mensajería, autenticación y otros servicios.
Recopilando inspiración de Awwwards, CodePen y Dribbble

Proceso creativo

Para crear un proyecto con éxito, tuve que hacer dos cosas:

  1. Tengo una idea,
  2. Sepa que sería factible.

Así, mi proceso creativo tomó forma en tres pasos:

1. Ten una idea (30 min)

Mi objetivo para cada proyecto era hacer algo genial mientras aprendía algo nuevo. Con eso en mente, busqué inspiración en mis sitios favoritos de diseño y desarrollo web:

Mis sitios de diseño favoritos:

  • Dribbble
  • Behance
  • IU diaria.

Mis sitios web favoritos de desarrollo:

  • CodePen.
  • Awwwards.
  • Bacalao
  • CodyHouse.)

Y propuso una lista de ideas como las siguientes:

Una lluvia de ideas

... luego elegí mi favorito de la lista como la Idea oficial del día ™.

2. Encuentra ejemplos (30 min)

Por cada idea que tenía, sabía que parte de ella debía tener una implementación existente en la web. Busqué en Internet implementaciones elegantes. Algunos sitios que generalmente conducen a soluciones públicas incluyen:

  • GitHub
  • CodePen
  • JSFiddle
  • Desbordamiento de pila
  • Llano viejo google
  • ... e ir a Chrome Developer Tools en cualquier sitio web que parezca similar a lo que estaba tratando de lograr.

Estudié lo que se había hecho, cómo se había hecho, luego combiné lo que había aprendido para hacer la solución más limpia que pude.

No es necesario reinventar la rueda cuando puedes mejorar el pasado.

3. Crear! (El resto del día)

Armado con una idea y ejemplos, hice mi idea realidad. Todos los días habría obstáculos, y el progreso parecería increíblemente lento. Pero con la investigación en línea, aprendí de mis errores y me puse más informado y más rápido cada día.

Días 1–9: ejemplos de recreación

Durante los días 1 a 9, tomé un diseño o sitio web que me gustó especialmente e intenté recrearlo.

Días 10-20: Desarrolle ideas originales

Una vez que me sentí más cómodo con el desarrollo web, basé mis proyectos de codificación en ideas originales que siempre quise hacer, como arte interactivo, fuentes originales y una linda aplicación de notas.

Reflexión

1. Conocimiento aprendido de por vida.

Mirando hacia atrás, he recorrido un largo camino desde donde estaba antes. Durante los 20 días, aprendí Bootstrap, jQuery, React, Pug, Sass y otras herramientas, así como un montón de conceptos HTML / CSS / Javascript limpios, como modos de mezcla, enmascaramiento y recorte, animaciones, pseudo elementos, consultas de medios, cierres y contexto, promesas y mucho más. Esto me ayudará a abordar proyectos futuros, especialmente si el desarrollo web y las aplicaciones web progresivas se vuelven más populares.

2. Nunca hay suficiente tiempo.

Aunque aprendí mucho, no aprendí tanto como me gustaría. Me entristece no haber tenido tiempo de aprender otras herramientas que tenía en mente, como Vue.js, Redux, GreenSock y otras. Sin embargo, esas son todas las cosas a las que puedo regresar y trabajar en el futuro.

Era mejor tomarse el tiempo para comprender mis herramientas en lugar de apresurarme de una herramienta a otra sin comprender.

3. Crecí confiado en mí mismo.

Lo más importante, crecí para creer en mis habilidades creativas y de codificación.

En lugar de comenzar un proyecto masivo (de nuevo) y nunca terminarlo (de nuevo), completaba un proyecto de principio a fin todos los días o dos, forzado a tener un alcance pequeño por el límite de tiempo.

Con cada proyecto completado, crecí más confiado en mis habilidades, ambición y capacidad para lograr objetivos.

A diferencia del receso de invierno pasado, donde comencé un proyecto (aún sin terminar) luego me desanimé por el trabajo inconmensurable que requería, este receso me alienta. Hoy, estoy contento con Stanford, agradecido por lo que he aprendido, un poco más confiado y ansioso por crear más.

¡Muchas gracias a Tiantian Xu que me inspiró con sus 100 días de diseño de movimiento!

Si te gustó leer esto, asegúrate de dar un (¡o varios!) Significaría mucho para mí.

También puedes seguirme en Twitter, Tumblr, Instagram y GitHub para proyectos más geniales :)