Curso para dar los primeros pasos en JavaScript, HTML, CSS, PHP, Python, Bootstrap 4, NodeJS, MySQL y todo orientado a aprender a programar en tecnologías web de manera básica.

29-06-2020 - Andrés Cruz

• Categoría
• /
• JavaScript
• /
• Curso Introducción a las principales tecnologías de desarrollo web

Por aquí tienes el listado completo de clases que vamos a cubrir en el libro y curso:

Introducción

• 1 Introducción

Programación y los lenguajes de programación', 'programacion-y-los-lenguajes-de-programacion

• 1 Introducción a la programación

  Vamos a dar algunos conceptos claves sobre la programación, sobre que es una tarea y su comparación con una receta.

• 2 Lenguajes de programación

  Vamos a hablar un poco sobre que es un lenguaje de programación.

• 3 Introducción a los algoritmos

  Vamos a hablar sobre que es un algoritmo para resolver una tarea.

• 4 ¿Qué es JavaScript?

  Vamos a hablar sobre qué es JavaScript y por qué es el elegido para conocer los principales conceptos de programación

• 5 Razones para para dar los primeros pasos JavaScript

  Vamos a dar las razones sobre por qué vamos a emplear JavaScript para dar los primeros pasos en la programación.

Elementos principales de un lenguaje de programación

• 1 Elementos principales de un lenguaje de programación

  Vamos a dar y explicar algunos elementos que tiene que tener cualquier lenguaje de programación.

• 2 Primeros pasos con los ejercicios

  En este vídeo hablamos sobre cuáles son los elementos necesarios que necesitarás para seguir esta sección que sería un navegador web de tu preferencia.

• 3 Tipos de datos

  Vamos a conocer cuales son los tipos de datos que están presentes en cualquier lenguaje de programación.

• 4 Variables

  Vamos a conocer el uso de las variables, para almacenar y consultar datos.

• 5 Operadores

  Vamos a conocer los operadores para realizar operaciones matemáticas y comparaciones.

• 6 Estructuras de control

  Vamos a dar una introducción a las estructuras de control para romper con el siglo secuencias de los programas.

• 7 Estructuras de control: if

  Vamos a conocer la estructura de control por excelencia que viene siendo el condicional.

• 8 Estructuras de control: if-else

  Vamos a ver una variación del condicional que sería el uso del if y el else.

• 9 Estructuras de control: if anidados

  Vamos a conocer los condicionales anidados para consultar por múltiples escenarios.

• 10 Operadores lógicos y las condiciones

  Vamos a conocer el uso de los operadores lógicos en conjunto con los condicionales.

• 11 Operador de negación (!)

  Vamos a conocer el operador para negar condiciones booleanas.

• 12 Condiciones complejas

  Vamos a aprender cómo podemos realizar condicionales más completos.

• 13 Estructuras de control: switch

  Vamos a conocer la estructura de control de switch para realizar comparaciones en múltiples escenarios.

• 14 Estructuras de control: for

  Vamos a conocer nuestro primer ciclo, que sería el de for.

• 15 Estructuras de control: while

  Vamos a conocer el uso de los while para realizar un ciclo.

• 16 Estructuras de control: do while

  Vamos a ver una variante del while.

• 17 Funciones

  Vamos a ver el uso de las funciones, como mecanismo para construir bloques de código reutilizables y extensibles.

• 18 Funciones: Pase de parámetros

  Vamos a conocer el uso del pase de parámetros de las funciones.

• 19 Funciones: Retornar valores

  Vamos a aprender cómo nosotros podemos retornar valores desde una función.

• 20 Objetos

  Vamos a conocer el uso de los objetos, para construir o simular objetos del mundo real.

• 21 Arrays

  Vamos a conocer el uso de los arrays para guardar colecciones de datos.

• 22 Funciones y propiedades de ayuda

  Vamos a explorar algunas de las diferentes funciones y propiedades que podemos emplear para realizar operaciones sobre nuestras variables según el tipo de dato de la misma.

• 23 Comentarios

  Vamos a conocer el uso de los comentarios para documentar. nuestro código.

• 24 Concatenar texto

  Vamos a aprender a concatenar texto.

• 25 Iterar un array mediante un for

  Vamos a aprender a iterar un array mediante un for.

• 26 Agregar y quitar elementos de un array

  Vamos a aprender a emplear un par de métodos para agregar y quitar o remover elementos de un array.

Elementos imprescindibles para desarrollar en la web: JavaScript HTML y CSS

• 1 Navegador web

  Vamos a hablar sobre la necesidad de un navegador como pieza centrar la para probar nuestro códigos.

• 2 Editores de código

  Vamos a seleccionar un IE o editor para programar nuestro código.

MiniProyecto #1: Crear una calculadora en JavaScript

• 1 Crear funciones para las operaciones matemáticas

  Vamos a crear las funciones necesarias para realizar las operaciones matemáticas de una calculadora.

• 2 Crear variable global total

  Vamos a crear una variable total para guardar el resultado de la operación realizada.

Introducción a HTML

• 1 ¿Qué es HTML?

  Vamos a presentar HTML como el lenguaje seleccionado para crear nuestra interfaz gráfica para nuestra página web.

• 2 Estructura de una página HTML: html, body. head

  Vamos a presentar la estructura que debe de tener una página web.

• 3 Párrafos de texto: p

  Vamos a presentar la etiqueta para construir párrafos.

• 4 Títulos o encabezados: h1..h6

  Ahora vamos a ver cómo podemos crear títulos de diversos tamaños.

• 5 Listas: ul, ol

  Vamos a aprender a cómo podemos crear una lista.

• 6 Tablas: table

  Vamos a aprender a cómo podemos crear una tabla básica.

• 7 Enlaces: a

  Vamos a ver cómo podemos crear enlaces.

• 8 Imágenes: img

  Vamos a ver cómo podemos definir imágenes en nuestra web.

• 9 Formularios: Estructura básica

  Vamos a crear la estructura de un formularios básicos y sus atributos y el uso de los formularios como elemento principal para que nuestro usuario ingrese datos.

• 10 Formularios: Campos y envío de formulario

  Vamos a conocer cómo podemos construir los campos de formulario.

• 11 Formularios: Otros campos de interés

  Vamos a conocer algunos campos de interés para los formularios.

• 12 Formularios: Labels y atributo for

  Vamos a conocer los loables para definir el propósito de un campo de formulario.

• 13 Formularios: Terminar formulario de contacto e input:submit

  Vamos a aprender a enviar un formulario.

• 14 Div

  Vamos a conocer una etiqueta contenedora en HTML.

• 15 Span

  Vamos a conocer una etiqueta contenedora para englobar contenido en una sola línea.

• 16 Etiquetas nav, section, article, aside, footer

  Vamos a conocer las etiquetas principales para construir elementos de interfaz gráfica de una web en HTML5.

• 17 Etiquetas meta (meta tags)

  Vamos a conocer las etiquetas meta en HTML, para agregar metainformación a la web.

• 18 Comentarios

  Vamos a conocer el uso de los comentarios en HTML.

• 19 Organización básica de una página web

  Vamos a conocer la organización base de una web.

MiniProyecto #2: Crear la UI y lógica de la calculadora con HTML y JavaScript

• 1 Introducción

• 2 Crear la estructura de nuestra página

  Vamos a crear la estructura de la página de nuestra calculadora que incluye los elementos de interfaz gráfica.

• 3 Introducción a los selectores para obtener referencia a los elementos de HTML

  Vamos a presentar el uso de los selectores como funcionalidad elemental para poder obtener referencias a elementos de HTML.

• 4 Selectores más complejos

  Vamos a ver como podemos construir selectores más completos.

• 5 Obtener los atributos del elemento seleccionado

  Vamos a ver cómo podemos seleccionar un elemento en particular de nuestra página HTML.

• 6 Tarea: obtener referencia al elemento con nombre de operaciones

  Vas a obtener la referencia a un elemento de listado.

• 7 Incluyendo un archivo de script en una página HTML

  Vamos a incluir un archivo de JavaScript en nuestra página HTML.

• 8 Obteniendo referencia a los valores que colocó nuestro usuario

  Vamos a obtener los valores de los inputs.

• 9 Introducción a los eventos en JavaScript

  Vamos a ver que eventos podemos emplear en JS así como que son los eventos.

• 10 Demo: evento clic mediante selectores

  Vamos a conocer el evento por excelencia, el evento clic.

• 11 Convertir (castear) un texto a un entero

  Vamos a ver cómo podemos pasar un texto a un número.

• 12 Representar la variable total de JS en el HTML

  Vamos a mostrar el valor de la variable total en nuestra web.

Introducción a CSS

• 1 ¿Cómo integramos los lenguajes HTML, CSS, y JavaScript?

• 2 Primeros pasos con CSS

• 3 Primeros pasos con CSS: Color y color de fondo

  Vamos a cambiar el color de texto y de onda de una web HTML.

• 4 Primeros pasos con CSS: Tamaños

  Vamos a conocer como podemos cambiar los tamaños de ancho y alto de un elemento en HTML.

• 5 Definir CSS en un documento aparte

  Vamos a crear un documento o archivo aparte para el CSS.

• 6 El uso de los selectores para cambiar el estilo

  Vamos a introducir nuevamente el uso de los selectores, pero esta vez para CSS, para cambiar un estilo.

• 7 Primeros pasos con CSS: Tipografía

  Vamos a trabajar un poco con la tipografía.

• 8 Primeros pasos con CSS: Alineado del texto

  Vamos a alinear textos de una web.

• 9 Primeros pasos con CSS: Bordeados

  Vamos a presentar el uso de los bordeados en CSS.

• 10 Primeros pasos con CSS: Espaciados (márgenes y padding)

  Vamos a aprender a emplear el margen y margen interno o padding en cualquier elemento o etiqueta HTML.

• 11 Primeros pasos con CSS: Flotado

  Vamos a conocer como podemos flotar contenido HTML.

• 12 Primeros pasos con CSS: Display

  Vamos a conocer el uso del Display para modificar la representación del bloque de un elemento en HTML.

• 13 Hacer ejercicio convertir una web HTML5

  Vamos a dar un poco de estilo a una web en HTML.

• 14 Declaración !important

  Vamos a aprender a declarar una regla como importante.

MiniProyecto #3: Potenciar la calculadora HTML y CSS

• 1 Definir archivo de CSS

  Vamos a crear un archivo para manejar el estilo del proyecto.

• 2 Crear un header

  Vamos a crear un header y darle estilo.

• 3 Crear un section

  Vamos a crear el bloque central o contenedor principal de nuestra app.

• 4 Definir es estilo para los campos de formulario

  Vamos a dar estilo a los elementos de formulario.

• 5 Definir es estilo para el botón

  Vamos a dar estilo a un botón.

Extra: jQuery

• 1 Sobre jQuery y la función $()

  Vamos a hablar sobre jQuery como framework, sus características y como acceder a su core.

• 2 Selectores en jQuery

  Vamos a presentar el uso de los selectores en jQuery.

• 3 Eventos en jQuery: Manipular el DOM

  Vamos a conocer los eventos en jQuery y como podemos modificar el DOM o documento HTML.

• 4 Eventos en jQuery: Modificar el CSS

  Vamos a modificar el estilo mediante CSS.

• 5 Acceder a los atributos

  Vamos a ver como podemos trabajar con los atributos mediante jQuery.

Bootstrap 4: La herramienta definitiva (toolkit) para HTML, CSS y JavaScript

• 1 Introducción a Bootstrap

  Vamos a presentar Bootstrap 4 como la herramienta para crear interfaces con HTML, CSS y JS.

• 2 Configurar Bootstrap en un proyecto

  Vamos a descargar y configurar Bootstrap en nuestro proyecto.

• 3 Alert

  Vamos a conocer el componente de alerta.

• 4 Button

  Vamos a conocer como podemos definir los botones con el estilo de Bootstrap.

• 5 Navs

  Vamos a conocer el componente de navegación.

• 6 Carta

  Vamos a conocer el componente de carta para mostrar todo tipo de información.

• 7 Formulario

  Vamos a presentar el uso del formulario en Bootstrap.

• 8 Input group

  Vamos a ver un componente bastante curioso que seria para agrupar un imputado con un contenedor.

• 9 Modal

  Vamos a presentar el componente de modal o dialog, para mostrar o solicitar información al usuario.

• 10 Configurar el JavaScript de Bootstrap y jQuery

  Vamos a instalar la dependencia de jQuery junto a Bootstrap.

• 11 Definir un Modal

  Vamos a crear un modal.

• 12 Container

  Vamos a conocer el contaminar como elemento central para colocar nuestros elementos de HTML.

• 13 Grid

  Vamos a conocer la grilla para mostrar componentes en columnas.

• 14 Tooltip

  Vamos a ver cómo podemos mostrar globos informativos sobre elementos.

• 15 Utilidades

  Vamos a ver un conjunto de clases de diversos propósitos en Bootstrap.

• 16 Otros toolkits como Bootstrap

  Vamos a hablar un poco sobre cómo otras alternativas a Bootstrap.

MiniProyecto #4: Crear una agenda de notas con Bootstrap 4

• 1 Introducción

• 2 Preparar el entorno

  Vamos a preparar el entorno para crear nuestro proyecto de notas.

• 3 Crear la interfaz

  Vamos a crear la interfaz gráfica de nuestra app e notas empleando Bootstrap.

• 4 Definir evento para guardar la nota

  Vamos a definir un evento para guardar el contenido de la nota.

• 5 Obtener y validar el contenido en el textarea

  Vamos a validar que existan valores o contenido para guardar la nota.

• 6 Componente de Alert en JavaScript

  Vamos a mostrar un alert si la nota no es válida.

• 7 Registrar las notas en un array

  Vamos a registrar un conjunto de notas en un array, las notas de nuestro usuario.

• 8 Pintar HTML desde JavaScript

  Vamos a pintar HTML mediante JavaScript.

• 9 Demo: Concatenar multiple HTML fácilmente

  Vamos a conocer el uso de las comillas simples invertidas para concatenar elementos mediante JavaScript.

• 10 Demo: Variación en la interacción

  Vamos a iterar las notas mediante otro mecanismo.

• 11 Demo: Convertir de JavaScript a jQuery

  Vamos a convertir nuestro JaVaScript a jQuery.

• 12 Demo: Agregar notas mediante un modal

  Vamos a crear notas mediante un componente de modal.

• 13 Sobrescribir CSS de Bootstrap

  Vamos a sobrescribir el CSS de Bootstrap para definir CSS personalizado por nosotros.

Introducción al SQL con MySQL

• 1 Base de datos

  Una base de datos es un conjunto de datos pertenecientes a un mismo contexto y almacenados para su posterior uso o consumo; nosotros almacenamos estos datos mediante tablas, tablas que se relacionan entre sí, en donde cada tabla tiene su correspondiente estructura para almacenar estos datos que se conocen como registros.

• 2 ¿Qué es SQL, y su uso en los motores de base de datos?

  Vamos a hablar sobre para qué empleamos SQL y su relación con los motores de base de datos como MySQL.

• 3 Instalación de MySQL en MacOS

  Vamos a ver como instalar MySQL en MacOS.

• 4 Instalación de LAMPP en Windows

  Vamos a ver la instalación de MySQL con otras tecnologías en Windows.

• 5 Manejadores de base de datos

  Vamos a conocer algunos manejador es de base de datos con los cuales trabajar.

• 6 Demostración de configuración de un cliente o manejador de base de datos

  Vamos a ver cómo configurar un cliente de base de datos con MySQL.

• 7 Crear una base de datos

  Vamos a ver como crear una base de datos.

• 8 Crear una base de datos mediante SQL

  Vamos a crear una base de datos mediante SQL.

• 9 Crear tabla de notas

  Vamos a crear nuestra primera tabla en MySQL.

• 10 Insertar registros

  Vamos a ver cómo podemos insertar registros mediante SQL.

• 11 Leer registros

  Vamos a ver como podemos leer registros mediante SQL

• 12 Leer registro: buscar por ID o nombre (WHERE)

  Vamos a ver como podemos leer un registro en particular mediante SQL.

• 13 Operadores AND y OR

  Vamos a conocer los operadores de AND y OR para emplearlos junto con el where.

• 14 Actualizar registro(s)

  Vamos a ver cómo podemos actualizar un registro o registros.

• 15 Alterar la estructura de una tabla: Agregar columna

  Vamos a ver cómo podemos alterar una tabla para agregar una nueva columna.

• 16 Actualizar más de un campo

  Vamos a ver cómo podemos actualizar un registro pero más de un solo campo.

• 17 Borrar registro(s)

  Vamos a ver cómo podemos borrar registros con SQL.

• 18 Tablas relacionadas y claves foráneas

  Vamos a ver cómo podemos crear una FK para relacionar tablas.

• 19 Unir dos tablas: Join

  Vamos a ver cómo podemos unir dos tablas en una consulta SQL empleando joins.

• 20 Left Join y Right Join

  Vamos a conocer otros dos tipos de joins.

• 21 Alias para las tablas

  Vamos a ver cómo podemos crear alias a las tablas con SQL.

• 22 Extra: Where Operadores

  Vamos a ver cómo podemos emplear el where en conjunto con los operadores.

• 23 Extra: Where Like

  Vamos a conocer la cláusula LIKE de SQL.

• 24 Extra: Funciones

  Vamos a ver cómo podemos emplear algunas funciones de SQL.

• 25 Extra: Group By

  Vamos a conocer cómo podemos agrupar por columnas.

Introducción a PHP

• 1 ¿Qué es PHP?

  Vamos a hablar un poco sobre el lenguaje de programación del servidor y su relación con Apache.

• 2 Arquitectura Cliente Servidor

  Arquitectura Cliente Servidor

• 3 Sobre los siguientes dos vídeos

  Sobre los siguientes dos vídeos

• 4 Instalación de php en macOS

  Vamos a ver cómo podemos instalar LAMPP en Windows.

• 5 Instalación de LAMPP en Windows

  Vamos a ver cómo podemos instalar LAMPP en Windows.

• 6 Laragon para tener todo el ecosistema web en un solo lugar

  Vamos a ver cómo podemos configurar nuestro Apache para que soporte PHP.

• 7 Preparar entorno

  Vamos a reparar nuestro sitio de trabajo para empezar con PHP.

• 8 Variables

  Vamos a conocer el uso de las variables en PHP.

• 9 Tipos de datos

  Vamos a conocer algunos tipos de datos en PHP.

• 10 Operaciones matemáticas

  Vamos a realizar algunas operaciones matemáticas y de comparación.

• 11 Operaciones sobre string

  Vamos a realizar operaciones sobre String.

• 12 Operadores de comparación y condicionales

  Vamos a realizar operaciones de comparación en el condicional en PHP.

• 13 Operadores de incre/decremento y lógicos

  Vamos a ver cómo podemos incrementar o decrementar en uno números en PHP.

• 14 Ciclos

  Vamos a conocer los ciclos for, while y do while.

• 15 Arrays

  Vamos a conocer el uso de los arrays.

• 16 Funciones

  Vamos a conocer el uso de las funciones en PHP.

• 17 Clases

  Vamos a ver como odiemos emplear las clases en PHP.

• 18 Clases: Ejemplo 2

  Vamos a ver otro ejemplo de clases en PHP.

• 19 Tarea: Crear clase Fruta

  Tarea: Crear clase Fruta

• 20 Solución: Crear clase Fruta

  Solución: Crear clase Fruta

• 21 Clases: Métodos

  Vamos a ver cómo podemos definir métodos en las clases.

• 22 Clases: Instancias y privados

  Vamos a ver el uso de las propiedades privadas y cómo podemos crear instancias de una clase.

• 23 Clases: Otros métodos

  Vamos a crear un método de propósito general en nuestra clase.

• 24 Clases: Constructores

  Vamos a ver el uso de constructores en las clases.

• 25 Clases Herencia

  Vamos a conocer el concepto de herencia en PHP.

• 26 Conectarse a la base de datos

  Vamos a ver cómo podemos conectarnos a nuestra base de datos.

• 27 Tarea: Modificar clase Fruta

  Tarea: Modificar clase Fruta

• 28 Solución: Modificar clase Fruta

  Solución: Modificar clase Fruta

• 29 Conectarse a la base de datos

  Vamos a ver cómo podemos conectarnos a nuestra base de datos.

• 30 Obtener registros (parte 1)

  Vamos a ver cómo podemos obtener registros con PHP desde la base de datos.

• 31 Validar consulta

  Vamos a ver cómo podemos realizar cualquier consulta a nuestra base de datos.

• 32 Obtener registros (parte 2)

  Vamos a ver cómo podemos finalmente obtener los registros de nuestra base de datos.

• 33 Crear funciones a partir del código generado

  Vamos a estructurar en funciones el código anterior.

• 34 Obtener un registro

  Vamos a estructurar todo lo visto hasta ahora para trabajar con la base de datos, en funciones.

• 35 Tarea: Resto de las operaciones a base de datos

  Vas a desarrollar el resto de las operaciones sobre la base de datos.

• 36 Insertar un registro

  Vamos a ver cómo podemos insertar un registro.

• 37 Actualizar un registro

  Vamos a ver cómo podemos actualizar un registro.

• 38 Borrar un registro

  Vamos a ver cómo podemos borrar un registro.

• 39 Required php file

  Vamos a ver cómo podemos incluir un archivo dentro de otro.

Python básico

• 1 Sobre la sección

  En esta sección vamos a dar un repaso básico a Python; siéntete libre de saltar esta sección si consideraras que ya cuentes con dichos conocimientos y quieres ir a desarrollar de una tu primera aplicación en Django.

• 2 Variables

  Vamos a conocer como podemos crear variables en Python.

• 3 Tipos de datos

  Vamos a conocer los tipos de datos en Python; string, flotantes, enteros y booleanos.

• 4 Operadores

  Vamos a conocer el uso de los operadores matemáticos en Python.

• 5 Más datos sobre el String

  Vamos a dar algunos datos extras sobre el string para contar longitudes, reemplazar ocurrencias etc.

• 6 String Format (Formato de los String)

  Vamos a conocer otra característica interesante sobre los String que sería el formato para imprimir o concatenar distintos tipos de datos y dando como salida un String.

• 7 Listas

  Vamos a presentar una estructura que nos permitirá guardar colecciones de enteros, string, etc en una variable.

• 8 Condicionales

  Vamos a ver cómo podemos emplear los condicionales en Python.

• 9 For Python

  Vamos a ver el uso de los ciclos for en python para iterar listas.

• 10 Funciones

  Vamos a conocer el uso de las funciones en Python, pase de parámetros y retornos de valores.

• 11 Clases

  Vamos a crear nuestra primer clase, así como atributos métodos y constructores y crear una instancia de la misma.

• 12 Enums

  Vamos a ver el uso de los tipos enumerados en Python para crear constantes.

• 13 Diccionarios

  Vamos a conocer la estructura llamada diccionario para crear estructuras de tipo clave valor.

• 14 Try except: errores y excepciones

  Vamos a conocer cómo podemos manejar los errores en tiempo de ejecución en nuestra app.

MiniProyecto #5: Potenciar la agenda de notas con PHP

• 1 Introducción

• 2 Convertir archivo HTML a PHP

  Vamos a ver cómo podemos emplear PHp para devolver el listado de notas en un formato soportado para JavaScript.

• 3 Obtener notas de la BD con PHP e Imprimir notas en un array de JS con PHP

  Vamos a ver cómo podemos emplear PHp para devolver el listado de notas en un formato soportado para JavaScript.

• 4 Demo: Imprimir notas en HTML desde PHP

  Vamos a ver una demostración de cómo podemos generar HTML a partir de PHP.

• 5 Configurar un formulario para crear notas

  Vamos a ver cómo podemos crear un formulario para enviar notas sa un archivo en PHP.

• 6 Crear una nota en la base de datos

  Vamos a crear una nota mediante PHP según la petición de nuestro usuario.

• 7 Hacer redirección

  Vamos a hacer una redirección mediante PHP a otra página.

Herramientas y tips fundamentales para PHP

• 1 ¿Qué es Composer y cómo dar los primeros pasos?

  Vamos a conocer como trabajar con composer de PHP y dar los primeros pasos.

• 2 Conocer tu versión de php

  Vamos a conocer como ver la versión de php que estamos empleando.

Opcional: Introducción a Node.js

• 1 Preparar el entorno necesario

  Vamos a presentar e instalar todo el ecosistema que necesitamos para crear una sencilla aplicación en Node.

• 2 Instalar el ambiente necesario Node y Visual Studio Code

  Vamos a presentar el ambiente necesario para seguir el curso, que seria instalar Node y de manera opcional un IDE como VSC.

• 3 Instalando un paquete y empleando el mismo

  Vamos a instalar un paquete mediante NPM en Node.

• 4 Creando nuestro primer ejemplo

  Creando nuestro primer ejemplo

Extra: Introducción a tailwindcss

• 1 Presentación de la documentación oficial

  Vamos a presentar la documentación oficial de tailwind.css.

• 2 Instalar tailwindcss mediante Node

  Vamos a instalar tailwindcss mediante Node en un proyecto desde cero.

• 3 Crear ambiente de trabajo

  Vamos a crear el espacio de trabajo como archivo html y css.

• 4 Creando un botón con esquinas redondeadas

  Vamos a crear nuestro primer componente para dar los primeros pasos con este framework.

• 5 Tamaños de ventana: Responsive Design

  Vamos a presentar los tamaños de ventana que son fundamentales para el responsive.

• 6 Creando un botón con esquinas redondeadas reutilizable

  Vamos a crear un componente reutilizable para el botón empleando la directiva apply.

• 7 Introducción a las transiciones

  Vamos a presentar el uso de las transiciones css en tailwind.

• 8 Tarea: Crear un botón rojo que cambie de tamaño según la distribución de pantalla

  Vas a crear un botón rojo reutilizable adaptativo a la pantalla.

• 9 Crear un tema personalizado (Introducción)

  Vamos a crear un sencillo tema, específicamente sobre el container.

• 10 Crear un componente de alerta

  Vamos a crear un componente de alerta.

• 11 Tarea: Crear componente alerta reutilizable

  Vas a convertir el componente anterior para que sea reutilizable fácilmente.

• 12 Tarea: Crear componente alerta info, warning y success

  Vas a crear otros componentes a partir del componente de alerta.

• 13 Crear componente de carta

  Vamos a crear un componente de carta.

• 14 Tarea: Componente de carta reutilizable

  Ahora vamos a crear el componente de carta anterior para que sea reutilizable.

• 15 Tarea: Componente de imagen

  Vas a crear un componente de imagen.

• 16 Tarea: Componente de imagen + Carta

  Vas a hacer otro ejercicio para crear un componente de carta con una imagen.

• 17 Componente de mensaje o tip

  Vamos a crear un componente de tipo mensaje emergente (la UI).

• 18 Componente "Card Flex"

  Vamos a crear una variación del componente de tipo carta que vimos anteriormente.

Temario

• 1 ¿Qué es un framework?

  ¿Qué es un framework?

• 2 ¿Qué es json?

  ¿Qué es json?

• 3 ¿Qué es una aplicación web?

  ¿Qué es una aplicación web?

• 4 HTML y HTML5

  HTML y HTML5

• 5 Full Stack, Backend y FrontEnd

  Full Stack, Backend y FrontEnd