Academia Pragma | Ruta Front End

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

1. Fundamentos
2. Herramientas
3. Automatización + UX
4. Otros mundos

Pokédex

Ejercicio práctico

Tu misión es implementar una interfaz web responsive base de un Pokédex.

Hacer ejercicio

HTML

Semántico

En este enlace de w3schools.com nos explican los elementos semánticos de HTML 5

Navegar

CSS

Main rules

Sigue el enlace para explorar 9 propiedades importantes CSS que debes conocer.

Navegar

CSS

Flexbox

Aprende a usar las cajas flexibles de CSS o Flexbox y prueba tus conocimientos aquí

Navegar

CSS

Media Queries

Aprende en w3schools.com qué son y cuáles son los tipos de Media Queries.

Navegar

JavaScript

Variables, condicionales y funciones

Aprende desde codecademy.com las bases sobre strings, booleanos, números, variables y mucho más.

Navegar

TypeScript

Variables, condicionales y funciones

Aprende desde codecademy.com las bases sobre strings, booleanos, números, variables y mucho más.

Navegar

SEO

Checklist

Aumenta el posicionamiento en buscadores, teniendo en cuenta estas prácticas de optimización.

Navegar

Mobile first

Google slides

Si tu sitio es bueno en dispositivos móviles, se traslada mejor a todos los dispositivos.

Navegar

Estándares Front-end

Documento

Explora y asimila los estándares que hemos aprendido a usar en los proyectos de front-end en Pragma.

Navegar

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.

Navegar

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.

Hacer ejercicio

Sass

Curso online

En el video aprenderás conceptos de este poderoso pseudo-lenguaje para programar los estilos CSS de tu sitio.

Iniciar curso

BEM

Nombramiento de clases CSS

Aprende las mejores practicas para nombrar las clases del CSS.

Navegar

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

Iniciar curso

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

Iniciar curso

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

Iniciar curso

Diseño atómico

Google slides

Aprende no solo a construir interfaces, sino sistemas de diseño completos.

Navegar

GIT galaxy

Google slides

Aprende sobre Git para la gestión de ramas y flujos de trabajo en el versionamiento de código.

Navegar

Gatsby

SSR, GraphQL y React

Aplica Server Side Rendering y GraphQL en tus aplicaciones web con esta poderosa herramienta basada en React.

Documentación

Iniciar curso

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.

Documentación

Iniciar curso

Contentful

CMS

Conoce el administrador de contenidos que, de la mano con Gatsby, ha dado grandes resultados en proyectos de Pragma.

Navegar

JavaScript

Patrones asíncronos, manejo de errores, patrones de diseño

Perfecciona tu conocimiento y profundiza en conceptos más avanzados.

Navegar

Pruebas unitarias

en Angular

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

Navegar

Pruebas unitarias

en React

Aprende a mejorar tu código de la mano de las pruebas unitarias utilizando Jest y React-testing-library.

Navegar

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

Navegar