Sistema Front-end

icon-FrontEnd-02

Sistema Front-end

Explora tu ruta de aprendizaje.

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 Javascript.

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.
10
Horas
HTML
Semántico
En este enlace de w3schools.com nos explican los elementos semánticos de HTML 5
6
Horas
CSS
Main rules
Sigue el enlace para explorar 9 propiedades importantes CSS que debes conocer.
9
Horas
CSS
Flexbox
Aprende a usar las cajas flexibles de CSS o Flexbox y prueba tus conocimientos aquí
6
Horas
CSS
Media Queries
Aprende en w3schools.com qué son y cuáles son los tipos de Media Queries.
6
Horas
JavaScript
Variables, condicionales y funciones
Aprende desde codecademy.com las bases sobre strings, booleanos, números, variables y mucho más.
9
Horas
Icon_card_seo_checklist
SEO
Checklist
Aumenta el posicionamiento en buscadores, teniendo en cuenta estas prácticas de optimización.
0,5
Horas
Icon_card_google_slides
Mobile first
Google slides
Si tu sitio es bueno en dispositivos móviles, se traslada mejor a todos los dispositivos. 
0,5
Horas
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.
2
Horas
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. 
3
minutos
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.
16
Horas
ball_blue
Sass
Curso online
En el video aprenderás conceptos de este poderoso pseudo-lenguaje para programar los estilos CSS de tu sitio.
2
Horas
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í.

25
Horas
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í.

25
Horas
Icon_card_diseno_atomico
Diseño atómico
Google slides
Aprende no solo a construir interfaces, sino sistemas de diseño completos.
0,5
Horas
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.
3
Horas
Icon_card_gatsby
Gatsby
SSR y GraphQL
Aplica Server Side Rendering y GraphQL en tus aplicaciones web con esta poderosa herramienta basada en React.
2
Horas
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.
2
Horas
Icon_card_javascript
JavaScript
Manejo de errores, patrones y características avanzadas.
Perfecciona tu conocimiento y profundiza en conceptos más avanzados.
3
Horas
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.

3
Horas
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.
3
Horas
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í.
3
Horas
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í.
2
Horas
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í.
2
Horas
Icon_card_jenkins
Integración continua
con Jenkins
Explora y evoluciona tu conocimiento de cómo automatizar los despliegues continuos a producción.
2
Horas
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. 
2
Horas
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.
3
minutos
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.
2
Horas
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í.
2
Horas
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.
2
Horas
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í
2
Horas
Icon_card_gitgalaxy
Microfrontends
Presentación Pragma
Descubre los conceptos de la filosofía de división de responsabilidades aplicada a front-end.
10
minutos
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.