Leo Perez
Front-end developer passionate about creating breathtaking and pixel perfect user interfaces.
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?
Crea - Modifica el código del lado del cliente
Parte visible de la Web/App
Interacción del usuario
Con quién trabaja?
Equipo Back End Dev
Info a intercambiar
Protocolos de seguridad y sesión a seguir
APIs
Con quién trabaja?
Equipo de diseño
Wireframes
Con quién trabaja?
Equipo de diseño
Mockups
Dónde se ve el resultado?
Navegadores Web
Dónde se ve el resultado?
Webviews - Cross Platform Hybrid Apps
Dónde se ve el resultado?
Cross Platform Native Apps
JS
C#
Qué conocimientos debo tener para ser un
Front End dev ?
Front End Path
Kamran Ahmed
Aprende lo básico
Sólo necesitas tres cosas
Domina lo básico
Domina lo básico
Promesas
Async / Await
REST API
JSON / XML
Responsive desing - Mobile first design
CSS
"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
Librerías JS
Plug and play
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://www.google.com">Go To Google</a>
<script src="../path_or_url/jquery.js"></script>
<script>
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "The link will no longer take you to Google" );
event.preventDefault();
});
});
</script>
</body>
</html>
UI Toolkits
Componentes de UI reutilizables con comportamiento predefinido
Buena experiencia de usuario (UX)
Rápida alternativa responsive
Control de versiones
SVN
Git
Github
Frameworks JS
Multiples librerías incluídas por defecto.
Estructura de código uniforme - Scafolding
Componentes - Reuso de código
Rutas
Estados
CLI
Polyfills
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
- Color y fuentes de letra
- 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
Contenido específico
Debes profundizar por tu cuenta
Usualmente cuestan mucho dinero
Contenido específico
Conectas con otros devs
Aprendes de la experiencia de otros
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
Contacto
Portafolio
Ayudas visuales para niveles
Página web - Portafolio
Github es el mejor aliado
Google como fuente de inspiración
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
Entrevista cliente?
Nearshore
Proyecto
Indefinido
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
Conferencias
Snacks
Más sabe el diablo...
Inventa proyectos para practicar
#ComoSiNoHubieraMañana
Mejora habilidades
Nutre el portafolio
Aumenta experiencia
Reutiliza código
Plantillas
Porciones de código de otros proyectos
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
Wordpress puede ser un buen punto de partida
~35%
Ganas dinero mientras aprendes
?
?
?
Gracias!!!
Front End
By Leo Perez
