banner_FrontEnd_universo

icon-FrontEnd-02

Sistema Front-end

Explora tu ruta de aprendizaje.
curva_bottom

Ruta de aprendizaje

Recórrela, explora los contenidos y escala en tu conocimiento hasta ser un master .

Estación 1

Fundamentos

HTML semántico, CSS orientado a mobile first y bases de Javacript.

Estación 2

Herramientas

Sass, Git, consumo de servicios back-end, frameworks de desarrollo y atomic design.

Estación 3

Automatización y
experiencia de usuario

Pruebas unitarias, integración continua y Progressive Web Apps.

Estación 4

Otros mundos

Canvas, animación 2D y 3D, web sockets, AR, VR, entre otros. 

curva_bottom

¿Qué habilidades tiene un front-end?

Estos son los principios y herramientas que le ayudan a un front-end a transformar el diseño gráfico en súperpoderosas interfaces web.

Pokédex
Ejercicio práctico
Tu misión es implementar una interfaz web responsive base de un Pokédex.
HTML
Semántico
En este enlace de w3schools.com nos explican los elementos semánticos de HTML 5
CSS
Main rules
Sigue el enlace para explorar 9 propiedades importantes CSS que debes conocer.
CSS
Flexbox
Aprende a usar las cajas flexibles de CSS o Flexbox y prueba tus conocimientos aquí
CSS
Media Queries
Aprende en w3schools.com qué son y cuáles son los tipos de Media Queries.
JavaScript
Variables, condicionales y funciones
Aprende desde codecademy.com las bases sobre strings, booleanos, números, variables y mucho más.
TypeScript
Variables, condicionales y funciones
Aprende desde codecademy.com las bases sobre strings, booleanos, números, variables y mucho más.
Icon_card_seo_checklist
SEO
Checklist
Aumenta el posicionamiento en buscadores, teniendo en cuenta estas prácticas de optimización.
Icon_card_google_slides
Mobile first
Google slides
Si tu sitio es bueno en dispositivos móviles, se traslada mejor a todos los dispositivos. 
ball_JS
Estándares Front-end
Documento
Explora y asimila los estándares que hemos aprendido a usar en los proyectos de front-end en Pragma.
Icon_card_react_native_curso
Pasos para una maquetación eficiente
Lección Pragma
Ten en cuenta estos 10 pasos para que puedas construir interfaces poderosas con HTML y CSS. 
ball_ejercicio
My music app
Ejercicio práctico
Tu misión es desarrollar una aplicación web responsive con tecnologías front-end vigentes y consumiendo la API de Spotify.
ball_blue
Sass
Curso online
En el video aprenderás conceptos de este poderoso pseudo-lenguaje para programar los estilos CSS de tu sitio.
ball_blue
BEM
Nombramiento de clases CSS
Aprende las mejores practicas para nombrar las clases del CSS.
Icon_card_curso_ract
React
Curso online

Aprende los conceptos de una de las mejores bibliotecas de JavaScript para construir interfaces de usuario. Si eres Pragmático, obtén las credenciales aquí.

icon_card_4
Vue
Curso online
Aprende a desarrollar aplicaciones web modernas de forma práctica y desde cero con Vue.js. Si eres Pragmático, obtén las credenciales aquí.
Icon_card_curso_angular
Angular
Curso online

Aprende a desarrollar aplicaciones web modernas de forma práctica y desde cero con Angular. Si eres Pragmático, obtén las credenciales aquí.

Icon_card_diseno_atomico
Diseño atómico
Google slides
Aprende no solo a construir interfaces, sino sistemas de diseño completos.
Icon_card_gitgalaxy
GIT galaxy
Google slides
Aprende sobre Git para la gestión de ramas y flujos de trabajo en el versionamiento de código.
Icon_card_gatsby
Gatsby
SSR, GraphQL y React
Aplica Server Side Rendering y GraphQL en tus aplicaciones web con esta poderosa herramienta basada en React.
Icon_card_PWA
Next.js
SSR y React
Framework construido sobre React que nos ayuda a construir aplicaciones de una forma más rápida y fácil.
Icon_card_contentful_cms
Contentful
CMS
Conoce el administrador de contenidos que, de la mano con Gatsby, ha dado grandes resultados en proyectos de Pragma.
Icon_card_javascript
JavaScript
Patrones asíncronos, manejo de errores, patrones de diseño
Perfecciona tu conocimiento y profundiza en conceptos más avanzados.
Icon_card_pruebas_angular
Pruebas unitarias
en Angular

Aprende a mejorar tu código de la mano de las pruebas unitarias utilizando Karma, Jasmine y Protractor.

Icon_card_pruebas_react
Pruebas unitarias
en React
Aprende a mejorar tu código de la mano de las pruebas unitarias utilizando Jest y React-testing-library.
Icon_card_PWA
Progressive Web Apps
(PWA)
Aprende a construir aplicaciones web con experiencia de apps móviles, que pueden ser instalables en celulares y dispositivos de escritorio. Más información aquí.
Icon_card_angular_animation
Animaciones
con Angular animations module
Mejora aún más la experiencia de usuario con animaciones y microinteracciones en Angular. Explora la documentación aquí.
Icon_card_react_spring_library
Animaciones
con React Spring library
React no se queda atrás con las animaciones y microinteracciones. Explora la documentación aquí.
Icon_card_jenkins
Integración continua
con Jenkins
Explora y evoluciona tu conocimiento de cómo automatizar los despliegues continuos a producción.
Icon_card_PWA
Animaciones con React Framer Motion
Documentación oficial
Diseña animaciones fluidas en React para la web en escritorio y móviles. 
Icon_card_react_spring_library
Submódulos de GIT
Video
Sube de nivel en GIT y versiona diferentes proyectos relacionados  con el concepto de submódulos.
Icon_card_javascript_interactivo
Canvas
JavaScript interactivo
Aprende, a través de esta serie de videos, lo que puedes lograr cuando tu interfaz se vuelve interactiva.
Icon_card_3d_webgl_threejs
3D
WebGL y Three.js
Evoluciona tus conocimientos en interfaces 3D dentro del navegador. Conoce la documentación oficial aquí.
Icon_card_react_native_curso
React Native
Curso online
Si ya conoces React, sube de nivel para programar aplicaciones nativas para Android, iOS y UWP.
Icon_card_phaser3_curso
Juegos web
con Phaser 3
Aprende a programar juegos en la última generación del framework para web. Mira la documentación aquí
Icon_card_gitgalaxy
Microfrontends
Presentación Pragma
Descubre los conceptos de la filosofía de división de responsabilidades aplicada a front-end.
Icon_card_gitgalaxy
Microfrontends 2.0
Presentación Pragma
Ventajas y desventajas de usar microfronts.
Icon_card_javascript
Patrones de diseño
JavaScript
Profundiza en los patrones detrás de las definiciones de la arquitectura front-end.
Icon_card_javascript
Patrones de diseño
TypeScript
Profundiza en los patrones detrás de las definiciones de la arquitectura front-end.
curva_top

Explora más contenido
dentro de Academia Pragma

Más Pragmáticos como tú, también tienen mucho que enseñar y han compartido su conocimiento en nuestra Academia. Hemos seleccionado algunas entradas que seguro, te ayudarán en tu viaje de conocimiento.

Los cuentos de los frameworks

En este PragmaTalk, Jose Alcaráz nos explica qué son los Frameworks, sus ventajas y desventajas, y cuál es su impacto en los proyectos que desarrollamos todos los días en Pragma.

Ver más →
React Native y Flux para el desarrollo de aplicaciones nativas

En este PragmaTalk, Juan Pablo Troconis nos habla sobre React Native y Flux para el desarrollo de aplicaciones nativas en Android e IOS.

Ver más →

El mundo de las apps

En esta entrada de Blog, Jose Alcaráz nos explica qué es una App y nos cuenta las diferencias entre 5 tipos de aplicaciones.

Leer más →
curva_bottom

Buenas prácticas del front-end

En estas flashcards encontrarás tips de buenas prácticas en el sistema
front-end.