Desarrollo Frontend Boot Camp Intensivo

• HTML

Módulo

• Sesión
• ¿Qué es HTML?
• Qué es CSS y su importancia
• Introducción a la maquetación HTML/CSS
• Identificadores HTML y selectores CSS
• Definición
• Utilización
• Jerarquía
• Uso de Estilos
• Ejercicio de Identificadores
• Tag
• Etiqueta
• Identificador
• Selector Múltiple
• Compuesto
• Propiedades de Caja (Box)
• Alto
• Ancho
• Relleno
• Márgenes
• Bordes
• Propiedades de Posición
• Position
• Absolute
• Relative
• Fixed
• Static
• Compuesta
• Botones
• CSS 2
• CSS 3
• Animaciones
• Transiciones
• Keyframes
• Flex
• Propiedades de Flex
• CSS Grid
• Propiedades de CSS Grid
• Maquetación responsive
• Sass
• Variables
• Anidamiento
• Mixins
• Mixins y frameworks
• BEM
• Bloques
• Elementos
• Modificadores

• Git

Introducción:

• Entornos de trabajo (Local, Desarrollo, Producción). 
• Introducción al terminal en linux
• Comandos básicos del terminal en linux
• Introducción a Git

Introducción e instalación de Git

• Configuración local y remota de Git
• Diferencias entre Git (Clone ) y (Fork)
• Clonando un repositorio
• Guardando cambios en el repositorio
• Histórico de confirmaciones (Log)
• Deshaciendo cambios

Procedimiento básico para ramificar y fusionar:

• Ramas en Git
• Diferencias entre  (Merge) y (Rebase)
• Resolviendo conflictos de fusión
• Ignorando archivos
• Resolviendo conflictos y realizando tareas (Issues) y (ToDo)
• Etiquetando Versiones (Tag)
• Git Flow
• Repositorios en GitHub
• Repositorios en Bitbucket
• Repositorios en Gitlab
• Herramienta de git en el editor
• Herramienta gráfica para escritorio de Git

• Javascript

Módulo

• Sesión
• Introducción a Javascript:
• Historia. Guerra de navegadores
• Estandarización
• Qué son aplicaciones web
• JS y sus aplicaciones actuales
• Lenguaje interpretado y diferencias entre HTML y CSS
• Usos de JS en la web
• Herramientas:
• Hello world por console.log y por document.write
• Hello world desde VSCode, cómo conectar app.js con index.html
• Debug con la consola del devtool
• Tipos de datos:
• comentarios
• String
• Numbers y operadores básicos
• Booleans
• Arrays
• Objects
• Variables:
• Caracteres y palabras reservadas que no pueden usarse como variables
• CamelCase vs PascalCase vs snake_case(UPPER_SNAKE_CASE) vs kebab-case
• var, let y const
• Operadores básicos:
• Operadores de asignación
• Operadores aritméticos
• Operadores de comparación
• Diferencia entre == y ===
• Operadores lógicos
• Estructuras de control / Control de flujo:
• Bloques
• if / else if / else
• Falsy values
• Switch
• Ternario
• Loops e iteración:
• for loop
• while
• do while
• break & continue
• Funciones:
• Declaración y ejecución
• Usar nombres significativos para las variables y funciones
• Parámetros y argumentos
• Scope
• Closure
• Objeto arguments
• Qué significa this en las funciones
• .bind() .apply() y .call()
• Manipulación del DOM
• Qué es el DOM
• Selección
• Creación
• Anexar
• Eliminar
• Alterar
• Métodos de classList
• .textContent & .innerHTML(peligros de éste)
• Eventos
• Asincronía:
• Cómo funciona
• Promises
• Encadenar promises
• Promises en paralelo
• async/await
• Peticiones a API's
• Cómo funciona la web / Modelo cliente-servidor
• fetch nativo
• Clases en JS
• Qué son realmente? Cómo funcionan?
• Métodos y propiedades
• Prototypes y la verdad oculta sobre las clases en JS
• ES6 y JS moderno:
• Default and rest parameters
• Arrow functions
• Spread operator
• Object destructuring
• Template literals
• Computed property names
• Métodos de utilidad de arrays
• Métodos que no mutan arrays
• Métodos de utilidad de objects

• React y Redux

Módulo

• Sesión
• Intro:
• Qué es React y qué problemas resuelve
• Cuáles eran las alternativas antes de React
• Single Page Application
• Virtual DOM
• Componentes: la unidad de React
• Qué son babel y webpack
• Instalación de Create React App
• Estructura de las carpetas en CRA
• Qué es JSX
• JS lado a lado con marcado de etiquetas?
• Componentes:
• Importar y exportar módulos
• React y ReactDOM
• Hello World: primer componente
• Componentes funcionales
• JS más complejo dentro de JSX
• Introducción a los hooks y estado interno:
• useState
• Flujo unidireccional de datos
• Composición:
• Separación de intereses
• props
• children props
• Reusabilidad de componentes
• Formularios y eventos:
• Eventos y handlers
• Eventos sintéticos
• Componentes controlados
• React Router:
• Por qué usar rutas?
• Navegación básica
• Rutas dinámicas
• Re-dirección
• Introducción a estilos y CSS:
• CSS import
• CSS modules
• Inline styles
• Referencia: styled-components
• Peticiones a API's:
• Ciclos de vida
• useEffect
• Las reglas de los hooks
• Extraer data con axios
• Custom hooks
• Funcionalidades avanzadas:
• Refs y el DOM
• Contextos
• HOC's
• Render props
• Referencia - Generación anterior y componentes de clase:
• Constructor de clase
• this.state
• setState y método render
• Object initializer
• Events handlers y .bind()
• Ciclos de vida de componentes de clase
• Servicios externos:
• Hosting
• Almacenar y recuperar data desde una API
• Redux:
• "Fuente única de la verdad"
• store/reducer/actions
• react-redux
• Creación del store
• Conexión con react-redux Provider
• Reducer
• Relación entre store y reducer
• Selectors
• useSelector
• Actions
• Action creators
• Dispatch actions
• useDispatch
• Memoizando selectors con reselect
• Dispatch de forma asíncrona con thunks