Leonardo Pérez M

Front End Developer

@YuxiGlobal
 

Passionate about
  • CSS

  • Technology

  • 🍕🍻🥩🧑👩
@leono286

Front End!!

  • Qué hace un programador Front End?
     
  • Qué necesito saber?
     
  • Cómo puedo aprender?
     
  • Qué debo hacer para conseguir trabajo como FE-Dev?
     
  • Beneficios de trabajar como FE-Dev
     
  • Algunos tips desde mi experiencia.

Una tecla cambió mi vida

HTML / CSS

HTML / CSS

Qué hace un

Front End dev ?

Qué hace?

from freepik

Crea - Modifica el código del lado del cliente 

Parte visible de la Web/App

Interacción del usuario

Con quién trabaja?

from freepik

Equipo Back End Dev

Con quién trabaja?

Equipo de diseño

from freepik
from all-free-download

Dónde se ve el resultado?

Navegadores Web

Dónde se ve el resultado?

Webviews - Cross Platform Hybrid Apps

Qué conocimientos debo tener para ser un

Front End dev ?

Front End Path

https://roadmap.sh/frontend

Kamran Ahmed

kamranahmedse

Aprende lo básico

Sólo necesitas tres cosas

Domina lo básico

from freepik
from freepik

Domina lo básico

Promesas

Async / Await

REST API

JSON / XML

from freepik
from freepik

Responsive desing   -   Mobile first design

CSS

from broadbandsearch.net

"It's important to note that this data represents only mobile phones, and not other mobile traffic, like tablet traffic..."

Librerías JS

Funciones predefinidas de JS para tareas comunes o  repetitivas

UI Toolkits

Componentes de UI reutilizables con comportamiento predefinido

Buena experiencia de usuario (UX)

Rápida alternativa responsive

Control de versiones

SVN
Git

Frameworks JS

Multiples librerías incluídas por defecto.

Estructura de código uniforme - Scafolding

Componentes - Reuso de código

Rutas

Estados

CLI

JS Runtime Environment

Frameworks JS

Escoger y aprender un framework de JS no implica amarlo incondicionalmente y odiar a los demás.

🥑

GoT

😡🤬

Lo demás...

Accesibilidad

SEO

Pruebas unitarias

Validación de código

PWA

App híbridas

Preprocesadores CSS

(Sass, Less, Stylus)

Task runners

(Gulp)

Module Bundlers

(Webpack, parcel)

...

(         )

Un gran plus (+)

Conocimientos acerca de diseño web, en especial:

  • Diagramación y navegación
  • Buenas prácticas de UX

Front

End

Cómo puedo aprender?

No creas en mitos

  • Es muy difícil
  • Me tomará mucho tiempo
  • Es para ingenieros o matemáticos
  • No soy profesional -- no me van a contratar

Tutoriales en línea

A tu propio ritmo lento?

 

Como a todos nos gusta, GRATIS 😱

Sin estructura definida

 

Estás por tu cuenta

 

No certificable

Cursos en línea

Contenido estructurado

 

No estás por tu cuenta

 

A tu propio ritmo lento?

 

Certificable

 

Gratis (básico-no certificable)

De pago - costo moderado

 

Contenido ya está creado y grabado para un público en general

 

Difícil conectar con otros estudiantes o personas del medio (Contactos)

Bootcamps

Contenido estructurado

 

Mentor/es

 

Aprendizaje acelerado

 

Certificable

 

Aprendes con otros devs

De pago - costo alto

 

Intensivo

 

Ritmo de grupo

 

 

Comunidades

Contenido específico

 

No es un curso

 

Debes profundizar por tu cuenta

Contenido específico

 

Muchas temáticas y tecnologías

 

Conectas con otros devs

 

Aprendes de la experiencia de otros

Conferencias

Igual a los meetups

 

Usualmente cuestan mucho dinero

Similar a los meetups

 

Una gran experiencia

2 secretos para garantizar el éxito

Tirar código!!!

#ComoSiNoHubieraMañana

Leer!!!

Artículos ejempo

CSS-Tricks

Sugerencias de Google

Ya soy un maestro front end

Cómo consigo trabajo como FE-dev?
Proceso de selección
  • HV - CV
  • Página web - Portafolio
  • Prueba de conocimientos
​Entrevistas
CV - Resume - HV
Corto - max 2 pág
Perfil corto y descriptivo
Portafolio
Ayudas visuales para niveles

Hay muchas plantillas gratis 😀

from freepik

Página web - Portafolio

Github es el mejor aliado

Google como fuente de inspiración

Sencillo

Plantilla

Complejo

Básico*

Prueba de conocimientos

  • General / Específica
  • Sincrónica / Asincrónica

Prueba de conocimientos

  • Confianza
  • No me las tengo que saber todas
  • Preguntar, preguntar, preguntar
Términos técnicos

Respuesta correcta

Cultura de la empresa

Entrevista(s)

  • HV - CV
  • Página web - Portafolio
  • Prueba de conocimientos
  • Cliente
​Entrevistas

Freelance

Directamente con compañía

Nearshore
  • HV - CV
  • Página web - Portafolio
  • Prueba de conocimientos
​Entrevistas

Freelance

Directamente con cliente

  • HV - CV
  • Página web - Portafolio
  • Prueba de conocimientos
​Entrevistas
Redes y portales de empleo

Sé ágil

Metodologías ágiles / Scrum

Inglés

Crecer y aprender haciendo lo que te apasiona día a día. 

Flexibilidad

Área de trabajo

Diversidad de proyectos

Transmisión de conocimiento

Apoyo y dirección

Beneficios de trabajar como FE-Dev

Freelance

Compañía

jobs@yuxiglobal.com

www.yuxiglobal.com

Más sabe el diablo...
Inventa proyectos para practicar
#ComoSiNoHubieraMañana
Mejora habilidades
Nutre el portafolio
Aumenta experiencia
Reutiliza código
Plantillas
UI Toolkits
Se vale buscar inspiración e ideas
Escoge ideas que te gusten
Frankenstein
Busca
Se vale buscar inspiración e ideas
Personaliza tu espacio de trabajo
Hardware y software
Aprovecha tus aliados
Buenas prácticas
Stack Overflow
Documentación oficial
Mira lo que otros hacen y cómo lo hacen
?
?
?
Gracias!!!

Front End Dev

By Leo Perez

Made with Slides.com

Front End Dev

What does a FE dev and how to become one?.

  • 2

More from Leo Perez