11 de abril de 2021

Como aprender frontend development en el 2021

Este artículo es una guía de opinión del autor y no debe tomarse como un método científico ni como verdad absoluta.

Cuando yo comencé a aprender a programar no había, ni de cerca, la cantidad de recursos gratuitos que tenemos hoy en día.

Creditos de la imagen: Christopher Gower

Tener tantos recursos es bueno porque puedes escoger, pero malo porque los que están empezando no saben por donde arrancar y sufren mucho de parálisis del análisis.

En este post planeo explicarte cuál sería el camino que yo tomaría el día de hoy para aprender frontend development desde cero.

¿Que es frontend?

Las dos partes principales de todo sitio o aplicación web son: backend que es quien maneja las bases de datos, los usuarios, etc. y el frontend que es la parte gráfica que muestra el navegador al cliente final.

El trabajo del frontend developer es recibir diseños y traducirlos en interfaces que funcionan en el navegador y en muchos tamaños de pantallas.

HTML, CSS, JavaScript y diseño

El navegador entiende tres lenguajes: HTML, CSS y JavaScript estos lenguajes son la fundación de cualquier sitio Web. Para ser un frontend developer esta es la tríada que debes comenzar a aprender.

¿Dijiste diseño? Como frontend developer tu trabajo es tomar los diseños e implementarlos para que funcionen en el navegador para hacer esto NO tienes que ser un diseñador, pero necesitas un buen ojo para los detalles y entender cuando algo funciona y se ve bien en el navegador.

Pero, ¿React, Angular, Tailwind?

Seguramente mientras buscabas información te tropezaste con muchas otras cosas, como React, SASS, Angular, Vue, Nextjs y un largo etcetera.

Todos estos frameworks y librerías son importantes y vas a tener que aprenderlos, pero tienes dos caminos:

1. Puedes aprender directamente los frameworks sin aprender los lenguajes base y está bien
2. Puedes aprender las bases que te permiten luego, aprender cualquier framework o librería vieja o nueva rápidamente.

Yo aprendí primero jQuery que JavaScript y logre construir cosas y conseguir trabajo con eso, pero con el tiempo me di cuenta de que se me dificultaba muchísimo tratar de aprender librerías y frameworks.

El mundo del frontend se mueve rapidísimo y me costaba aprender cosas nuevas, me regrese a las bases y me asegure de aprender (y sigo aprendiendo) bien HTML, CSS y JavaScript, esto me permitió aprender más eficientemente cualquier framework o herramienta nueva que saliera.

¿Dónde comenzar?

FreeCodeCamp.org tiene los mejores cursos gratuitos de todo el Internet y ahora están en español.

Yo empezaría por el curso de Responsive Web Design, ya que explica todo lo que necesito saber sobre HTML y CSS para desarrollar cualquier tipo de interfaz web.

HTML

Las etiquetas HTML son como piezas de lego que vas juntando para escribir un documento, porque al final del día, las páginas web son documentos.

Este curso te enseña HTML construyendo un sitio de fotos para gatos. Vas a entender las bases de HTML, como se escriben las etiquetas, como se crean links, listas y etiquetas semánticas como main, header, footer, article, etc.

Etiquetas importantes

No te preocupes por aprenderte todas las etiquetas de memoria, no vale la pena porque los editores de código están ahí para ayudarte, aprende las más usadas, sus atributos y especialmente cuando y como usarlas:

1. header, footer, main, navigation
2. div, p, a
3. img, video, audio
4. ol, ul, li
5. table, tr, td, th
6. form, input, select, button

CSS

Los navegadores muestran las etiquetas HTML con cierto diseño estándar, en todos los navegadores un botón se ve casi igual, pero en la vida real tú no quieres una página web que se vea igual a las demás tú quieres tu propio diseño y aquí es donde entra CSS.

CSS es un lenguaje que nos permite aplicar el diseño que queramos a nuestros documentos, desde cambiar el color de una fuente hasta aplicar filtros a una foto y definir la estructura (el layout) de nuestras interfaces.

En este curso te enseñan desde lo más básico hasta lo más avanzado para que puedas desarrollar interfaces que se vean y funcionen bien en cualquier tamaño de pantalla.

Conceptos importantes

CSS no es un lenguaje de programación y tiene unas particularidades que lo hacen bien especial. Asegúrate de entender bien los siguientes conceptos:

1. Especificidad, cascada y selectores
2. El modelo de caja (box-model): aprende la diferencia entre inline, block e inline-block
3. Unidades de medidas, especialmente rem, em, px, vh y vw
4. Flexbox y grid

Propiedades importantes

CSS tiene muchísimas propiedades para aplicar a los elementos, una vez más, al igual que con HTML no intentes aprendértelas de memoria. Las más usadas son:

1. display
2. font, font-family, font-size, font-weight
3. color
4. padding y margin (aprende bien la diferencia)
5. width y height
6. position, entiende la relación entre absolute y relative

Ahora a practicar

Una vez termines estos dos módulos, práctica, empieza a desarrollar interfaces con diferentes diseños y que funcionen en varios tamaños de pantallas.

Conseguir diseños

Puedes entrar a dribbble.com buscar en Web Design y seleccionar las que más te gusten unas 2, 3 o las que quieras y las desarrollas (no olvides dar crédito por los diseños).

Usa editores online

Usa codepen.io que es un editor online para crear interfaces web:

• Es gratis
• No solo practicas sino que de una vez te estás construyendo tu portafolio público
• Si necesitas ayuda puedes pasar el link a alguien más para que vea tu código
• Tiene librerías preinstaladas para CSS y JavaScript

Practica tanto como puedas o quieras, en este mundo y sobre todo cuando estás empezando la práctica es lo que mejor funciona para aprender.

Si te sientes aventurero, comienza a desarrollar tu propio portafolio, porque va a ser muy útil tenerlo para cuando comiences a buscar trabajo.

JavaScript, el último elemento

Para aprender JavaScript empezaría con el curso gratuito de programación de Platzi. Este curso es genial porque se aprende haciendo proyectos y esa es la mejor manera de aprender desarrollo Web.

En cada proyecto aprendes algo diferente de todo lo que se puede hacer con JavaScript:

1. Manipular una página web (el DOM)
2. Manejar eventos, por ejemplo cuando un usuario hace click en un botón o cuando presiona una tecla
3. Funciones, que te permiten separar tu código para hacerlo más manejable
4. A escribir JavaScript en el servidor y no solo en el navegador
5. Incluso te enseñan como programar un robot

El siguiente curso de JavaScript que haría es el de FreeCodeCamp, se llama "JavaScript Algorithms and Data Structures" es supercompleto y cubre a detalle casi todo lo que necesitas saber.

Partes importantes de JavaScript

1. Variables, la diferencia entre let, const y var
2. Tipos de datos: string, number, boolean, object y array
3. Funciones, entender la diferencia entre cuando se llama una función y cuándo se pasa una función como argumento.
4. Hoisting, entender esto para aprender sobre los errores de “esta variable no existe” o “esta variable no contiene lo que esperabas”
5. Eventos, como asignarle eventos a elementos HTML

A practicar JavaScript

Una vez termine este curso, empieza la práctica y mucho, dominar JavaScript no es fácil, incluso los mejores programadores de JavaScript que conozco dicen que no sienten que dominan el 100% del lenguaje y eso está bien. Lo importante es resolver problemas con el lenguaje no aprenderlo de memoria.

Créditos de la imagén: Jenny Hill

• codementor.io/javascript-projects: muchos proyectos para prácticas, puedes comenzar con los fáciles e ir avanzando.
• 40 proyectos de JavaScript para principiantes este post en freecodecamp es muy completo.

Diseño

No hay que ser un diseñador, pero como frontend developer necesitas aprender y entender las reglas básicas de diseño, tipografía, color, espacios, grid etc.

El curso gratuito de Web Design for Developers cubre todos estos conceptos de manera rápida y concisa y es una buena manera de aprender las bases del diseño Web.

Adicionalmente te recomiendo leer un par de artículos muy interesantes que explican el diseño como ciencia, porque el diseño es más ciencia que arte:

1. Why Does a Design Look Good?
2. Good design is science, not art

¿Qué más tengo que aprender?

Pues mucho más, ser programador no es un destino es un viaje (ay ya me puse filosófico) pero es así, nunca vas a parar de aprender en este mundo así que nada más mantén la mente abierta y sigue aprendiendo.

CRUD

La mayoría de las páginas y aplicaciones web hace 4 cosas: crear, leer, editar y borrar información de una base de datos, ese proceso se conoce como CRUD (Create, Read, Update, Delete).

Un ejemplo, si estás desarrollando un eCommerce, cuando agregas un producto al carrito lo "creaste", si le cambias la cantidad, lo editaste, si lo eliminas del carrito lo eliminaste y así funcionan la mayoría de las aplicaciones web, entonces es importante entender este concepto.

Requests y APIs

Aprende como hacer peticiones a servidores, porque es la manera como las aplicaciones Web se comunican con las bases de datos, para crear contenido o registrar usuarios etc. El navegador tiene una API (que es una interfaz para comunicarte con el backend) que se llama "fetch". Aprende como funciona y entiende la diferencia entre:

1. Request
2. Response
3. Que son los headers
4. Que es el body

La documentación de Mozilla tiene un articulo sobre fetch API.

Conclusión

Convertirte en un frontend developer no es un camino fácil pero hay muchísimos recursos gratuitos para lograrlo. Procura aprender las bases de HTML, CSS, JavaScript y diseño y luego practica mucho haciendo proyectos.