Lecciones del curso

Fundamentos de Desarrollo Web

Bienvenida
Conociendo tu terminal
Comando básicos de la terminal
Modificando el Shell de nuestro equipo
NodeJS y NVM
Creando cuentas online
Introducción a Git
Creando un repositorio en Github
Clonando un repositorio de Github
HTML5 no es solo HTML
Tu primer documento HTML5
8m
Estructura Básica de un documento HTML
4m
Agregando CSS
8m
Experimentando con JS
6m
Usando VsCode
Previsualizando nuestro trabajo en el navegador
Conectando css a nuestro index.html
Agregando interactividad con JS
Programando juntos | Clone de HBO GO Parte 1
Programando juntos | Clone de HBO GO Parte 2
Te presento el css
CDNs, Iconos y rems
Intro a Flexbox
Flexbox avanzado
Agregando un "overlay" con selectores avanzados
Position: [absolute, relative, fixed]
Más practica con Flexbox, cascada CSS
Introducción a las animaciones con CSS3
Cubic-Bezier
El atributo transform
Intro a @Keyframes
Una animación con sentido
Programando juntos | Creando cards de compra Parte1
Programando juntos | Creando cards de compra Parte2
Contenido Extra | Intro a CSS Grid
Contenido Extra | Cambiando a CSS Grid
Introducción a VanillaJS
Repl.it
Dominando JavaScript
Estructuras de datos
Métodos básicos del Array
Métodos básicos del objeto
Seleccionando nodos y obteniendo información
Modificando nodos
Creando elementos en el DOM
Eventos del DOM y Observadores (Listeners)
Trabajando con clases
Nosotros ya NO usamos jQuery
Programando juntos | Creando un memorama parte1
Programando juntos | Creando un memorama parte2
¿Qué es Webpack?
¿Qué es NPM?
Instalando Webpack y Webpack-cli
JavaScript ES6
Usando Babel y creando webpack.config.js
¿Cómo consumir datos desde un servidor?
Usando Fetch
Trabajando con la información recibida en JSON
Agregando estilos CSS
Agregando interacción con JS
Interacciones avanzadas

Introducción al desarrollo Frontend

Ajax

AJAX significa JavaScript asíncrono y XML (Asynchronous JavaScript and XML). Es un conjunto de técnicas de desarrollo web que permiten que las aplicaciones web funcionen de forma asíncrona, procesando cualquier solicitud al servidor en segundo plano. Ten en cuenta que AJAX no es una sola tecnología, ni es un lenguaje de programación. Como se dijo antes, AJAX es un conjunto de técnicas de desarrollo web. El sistema generalmente comprende:

  • HTML/XHTML para el lenguaje principal y CSS para la presentación. El Modelo de objetos del documento (DOM) para datos de visualización dinámicos y su interacción.
  • XML para el intercambio de datos y XSLT para su manipulación. Muchos desarrolladores han comenzado a reemplazarlo por JSON porque es más similar a JavaScript en su forma.
  • El objeto XMLHttpRequest para la comunicación asíncrona.
  • Finalmente, el lenguaje de programación JavaScript para unir todas estas tecnologías.

Fetch

La API Fetch proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, como peticiones y respuestas. También provee un método global fetch() que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.

Este tipo de funcionalidad se conseguía previamente haciendo uso de XMLHttpRequest. Fetch proporciona una mejor alternativa que puede ser empleada fácilmente por otras tecnologías como Service Workers. Fetch también aporta un único lugar lógico en el que definir otros conceptos relacionados con HTTP como CORS y extensiones para HTTP.

<img width="300px" src="https://i.ytimg.com/vi/V_acKBZ1ZPU/maxresdefault.jpg" alt="transitions">

Happy Coding! ❤

Recursos extra

spaceman

¿List@ para ver todo el curso? Prepárate porque apenas estamos comenzando 🚀

¡Desbloquea el curso completo y conviértete en un PRO del desarrollo web! 🫶🏻 .