Bootcamp de Frontend Developer - NorthCamp School

- Aportar conocimientos acerca de la gestión de enlaces, rutas, y formularios, las reglas CSS, el modelo de cajas, las propiedades y valores lógicos, las estructuras de control, y las funciones definidas por el usuario.
- Impartir un completo programa de estudios, en el cual se enseña sobre la importancia de la etiqueta script, los estilos de escritura, los comentarios en el código, y los operadores de asignación y comparación.
- Conocer a detalle los tipos de conversión, el acceso a caracteres, la representación y modificación de fechas, la creación de arrays, y los objetos anidados.

Bootcamp de Frontend Developer

MÓDULO 1: HTML
- ¿Qué es HTML?
- DOM ¿Qué es?
- Etiquetas
- Atributos
- Semántica
- Semántica del contenido
- Enlaces y Rutas
- Formularios
MÓDULO 2: CSS
- ¿Qué es CSS?
- 3 formas de agregar CSS
- Reglas CSS
- Selectores
- User Agent Styles ¿Qué es?
- Cascada, Especificidad y Herencia
- Tipos de Display
- Valores y Unidades
- Pseudo Clases y estilo de texto
- Variables en CSS
- Carga de fuentes personalizas
- Carga de fuentes de Goolges Fonts
- Backgrounds
- Pseudo Elementos
MODELO DE CAJA
- Margin
- Padding
- Border
- Posiciones
- Box-sizing
- Propiedades y valores lógicos
- Depurar CSS
- Flex-box
- Grid CSS
- Buenas prácticas
MÓDULO 3: RESPONSIVE WEB DESIGN
- ¿Qué es responsive web design?
MEDIA QUERIES:
- ¿Que és?
- Estructura
- Formas de incluir media-queries
- Medidas standars (breakpoints)
MÓDULO 4: SASS
- Instalación
ELEMENTOS BÁSICOS:
- Variables
- Anidamiento
- Distribución de carpetas
ESTRUCTURAS DE CONTROL:
- @if / @else
- @whlie
- @for
- @each
FUNCIONES:
- Funciones nativas
- Funciones definidas por el usuario
DIRECTIVAS SASS:
- @mixins
- @extend
MÓDULO 5: JAVASCRIPT
CONOCIENDO JAVASCRIPT:
- Un poco de historia
- ECMAScript (ES)
- ¿Qué versión de ECMAScript uso?
CHROME Y CONSOLA: TUS ALIADOS PARA DEBUGGEAR
- Console de JavaScript
- ¿Estilos en la consola?
- ¿Podemos obviar console.log()?
- Chrome Dev Tools: características importantes
- Elements (elementos)
AGREGANDO JAVASCRIPT EN HTML:
- JavaScript en línea
- JavaScript en archivo externo
- Importancia de colocar etiqueta script
- Analizando etiqueta script
- ¿Cómo se descargan nuestros scripts?
- Carga de módulos JavaScript
VARIABLES:
- ¿Qué es una variable?
- VAR
- LET
- CONST
BUENAS PRÁCTICAS NOMBRANDO IDENTIFICADORES
- Consejos en el nombrando de identificadores
- Convención estilos de escritura
TIPOS DE DATOS
- Tipo dinámico
- Datos tipo primitivo (String, Number, BigInt, Boolean , undefined, null, Symbol)
- Datos tipo objeto (Objetos, Arrays, Funciones)
COMENTARIOS EN EL CÓDIGO
- Consejos para comentar código
- Comentarios en línea
- Comentarios multilínea o en bloque
OPERADORES
- Operadores aritméticos
- Operadores de asignación
- Operadores comparacion
- Operadores lógicos
- Operadores type
- Operadores unarios
- Operadores binarios
- Operadores de bits
COERCIÓN: LA COSA SE PONE INTERESANTE
- Coerción implícita o explícita
- Tipos de conversión
- Coerción en cadenas
- Coerción booleana
- Coerción numérica
- NaN y Batman
- Coerción en objetos
- Sitios de interés sobre coerción
- Modo estricto
¿QUÉ ES EL SCOPE?
SCOPE GLOBAL
- Scope local
- Scope de función
- Scope de bloque
¿QUÉ DIABLOS ES EL HOISTING?:
- Fase de creación
- Pila de ejecución
- Pila de ejecución de forma visual
ESTRUCTURAS DE CONTROL
- Estructuras condicionales (if, if/else, if/else if, Operador condicional ternario, switch, object literals)
- Estructuras de repetición (for, while, do...while, for...in, for..of, forEach)
- Estructuras de control de errores (throw, try...catch...finally)
STRINGS
- Acceder a carácteres
- Comparar strings
- Longitud de un string
- Métodos de String
REGEXP
- Creando una expresión regular
- Flags
- Clases básicas
- Conjunto de carácteres o alternativas
- Rangos
- Anchors
- Cuantificadores
- Métodos con RegExp
- Métodos con String
- Sitios de interés
FECHAS
- Date
- Tiempo UNIX
- Obtener información fechas
- Modificar fechas
- Representación fechas
- UTC y zonas horarias
NÚMEROS
- toString()
- toExponential()
- toFixed()
- toPrecision()
- valueOf
- Transformando variables a números
- Number()
- parseInt()
- parseFloat()
- Propiedades de números
- Números aleatorios
ARRAYS
- Inicializar un array
- Acceder a los elementos
- Añadir o eliminar elementos
- Creación de arrays
- Búsqueda y comprobación
- Modificación de arrays
- Ordenaciones
- Métodos array functions (forEach(), every, some, map, filter, filterIndex, find, reduce, reduceRight)
OBJETOS
- Inicialización y asignación
- Objetos anidados
- Objetos con funciones
- Métodos de objetos
FUNCIONES
- Declarar y ejecutar
- Parámetros
- Parámetros por defecto
- Devolución de valores
- Funciones anónimas
- Funciones autoejecutables o IIFE
- ¿Qué es un callback?
- Callback hell
- Arrow functions
- Arrow functions y this
CLASES
- ¿Qué es una clase?
- Declarando una clase
- Cuerpo de la clase y métodos
- Constructor
- Métodos
- Métodos estáticos
- Ampliar clase
THIS ES LA DIFERENCIA
- ¿Qué es this?
- Sin estructura
- Accediendo desde un objeto
- This en arrow function
- Reglas del this
JSON
- ¿Qué es un JSON?
- Estructura de un JSON
- Acceso a los valores de un JSON
- Reglas de uso
- Conversiones
DOM
- ¿Qué es DOM?
- Object document
- Modificando con JavaScript
- Crear elementos en el DOM
- Atributos elementos HTML
- Métodos para atributos
- Insertar elementos en el DOM
- Reemplazar contenido en el DOM
- Insertar elementos
- Eliminar elementos
- Seleccionar elementos del DOM
- Métodos modernos
- Manipular clases CSS
- Añadir o eliminar clases CSS
- Conmutar o alternar clases CSS
- Otros métodos de clases
- Navegar por elementos del DOM
- Navegar a través de nodos
EVENTOS
- ¿Qué es un evento?
- ¿Cómo se transmite un evento?
- Listado de eventos
- Cómo realizar acciones con eventos
- Eventos mediante atributos HTML
- Eventos mediante propiedades
- Eventos mediante listeners
- Borrar listeners
- Object event
- Opciones de addEventListener
ASINCRONÍA
- ¿Qué es la asincronía?
- ¿Cómo la gestionamos?
- Promesas
- Consumir una promesa
- Async/await
- Crear una promesa
- Promesas en grupo
- setTimeout
- Recursos sobre asincronía
CONSUMIENDO API REST
- ¿Qué es una API REST?
- Métodos de petición HTTP
- Peticiones HTTP con fetch
- Respuesta de la petición HTTP
- Procesamiento de la respuesta
- Fetch con async/await
- Códigos de respuesta HTTP
- CORS
TÉCNICAS IMPORTANTES DE JAVASCRIPT
- Destructuring
- Spread Operator
- Optional Chaining
PETICIONES.
- Fetch.
- Consumir APIs.
- CORS
- Programación funcional vs programación orientada a objetos.
- Patrones de diseño: ¿qué son y cuales hay?
APIS DEL NAVEGADOR.
- Guardar datos en el navegador.
- WebSockets.
- Web Workers.
- Canvas.
- Synth Voice.
- Notificaciones.
MÓDULO 6: REACT
- Diferencias entre framework y librería.
- ¿Qué es un componente?
- React: la librería más usada, un poco de historía y características
- React: ¿por qué React es declarativo?
- Dependencias con npm o yarn: el peligro de las dependencias.
- Instalando y configurando React.
- Nuestra primera App con React: estructura.
- Scaffolding: dónde guardar los archivos de tú proyecto.
- Nuestro primer hola mundo.
¿QUÉ ES JSX?
- ¿Qué es compilar y transpilar?
- Cómo se transpila JSX con Babel JS.
- Ahora que sabes que es JSX, vamos a profundizar.
- Estructura de un archivo de un componente de React.
- La decadencia de las Clases: componentes funcionales.
- Las propiedades de un componente.
- Pasando datos de un componente parent a un child.
- Pasando datos de un componente child a un parent.
- Estilos: diferencias con HTML.
- Eventos: vamos a bubblear.
- El ciclo de vida: ahora nos pasamos a useEffect.
- La magia de los estados: no hay que abusar de ellos.
- Condicionales en el renderizado.
- Listas y keys: siempre debemos de dejarles miguitas de pan.
- Formularios: lo que parece fácil se puede complicar.
- Olvídate de la herencia.
- Virtual DOM, ¿es lo mismo que Shadow DOM, qué es.
- React Router: vamos a navegar dentro de las SPA brunetes.
- Accesibilidad: la importancia de pensar en todas las personas.
- Como dividir el código de nuestros componentes.
- Fragmentos: no añadamos más nodos extra.
- Refs: cuanto más alto mejor.
- Componentes de orden superior.
PROFUNDIZANDO EN LOS HOOKS.
- Reglas de uso de hooks.
- Construye tu propio hook.
- Cómo compilar un proyecto de React.
- Subiendo nuestra app a Netlify.
MÓDULO 7: PROYECTOS