Desarrollo Web Completo con HTML5, CSS3, JS AJAX PHP y MySQL

Los 3 Proyectos Principales de este curso

El Proyecto Final de Este Curso - Sitio Web Completo con Pagos en PayPal y Admin

UpTask - Administrador de Proyectos hecho en HTML5, CSS3, JS, Ajax, PHP y MySQL

Agenda de Contactos con PHP, MySQL y Ajax, ES6, CSS Grid y Flexbox

Introducción al Desarrollo y Diseño Web Web

Introducción al Curso

Distintas Áreas del Diseño Web

Estructura básica de un sitio web

El rol de HTML

El rol de CSS

El rol de JavaScript

El rol de PHP y MySQL

Plan para el Curso

Editores de Texto

Porque instalar un Editor de Texto

Instalando Sublime Text 3 en Windows 10

Instalando Microsoft Visual Studio Code en Windows

Instalando ATOM en Ubuntu

Instalando y Como Utilizar Adobe Brackets

Introducción a HTML - Textos - Creando un Proyecto de Bienes Raices

Lo que Vamos a Construir en los Próximos Videos

Primeros pasos con HTML, crear archivos y las distintas partes de HTML

Textos en HTML - Encabezados

Textos en HTML - Parrafos

Creando el Texto HTML del proyecto Bienes Raices (Parte 1 de 2)

Creando el Texto HTML del proyecto Bienes Raices (Parte 2 de 2)

Enlaces en HTML

Introducción a HTML - Imágenes - Creando un Proyecto de Bienes Raices

Agregando el Logotipo e Iconos Principales

Agregando las imágenes de los anuncios

Introducción a HTML - Estructurar Contenido - Proyecto de Bienes Raices

Primeros Pasos Estructurando el Contenido

Definiendo el Contenido Principal con HTML

Creando el Footer y otras secciones del proyecto

Introducción a CSS - Primeros Pasos con CSS

CSS, donde colocarlo, primeros pasos y estilos

Seleccionando Etiquetas, Classes y ID's

Introducción a CSS - Creando el Header del Proyecto de Bienes Raices

Definiendo el Header con Imagen de Fondo

Creando un Contenedor Principal

Posicionando el Menú, Colores a los enlaces y alineando el Logotipo

Agregando una fuente de Google Fonts

Normalize para Resetear el CSS por default

Reemplazando medidas en Pixeles con Rems

Posicionando el Nombre del Sitio Web y CSS a los Headings

Introducción a CSS - Creando la Sección Nosotros del Proyecto de Bienes Raices

Mostrando el Contenido en 3 columnas

Creando algunas utilidades para las secciones y textos

Introducción a CSS - Creando los Anuncios del Proyecto de Bienes Raices

Primeros pasos en la sección de Anuncios e imágenes Responsive

CSS al contenido de los Anuncios

Estilos a los Botones, Precios en los Anuncios

Continuando con los Estilos de los Botones y Box Sizing

Finalizando los Botones

Creando la Imagen de Contacto

Ajustando los Iconos de los Anuncios

Introducción a CSS - Finalizando la Página Principal del Proyecto Bienes Raices

Primeros pasos en el CSS del Blog

Finalizando el Blog

Estilos al Testimonial

Finalizando la página Principal

HTML y CSS - Creando el Proyecto de Bienes Raices - Página de Nosotros

Agregando el HTML de la página de Nosotros

CSS A la página de Nosotros

HTML y CSS - Creando el Proyecto de Bienes Raices - Página de Propiedades

Creando el HTML y ajustando el CSS

Creando la Página para Mostrar Una Propiedad

HTML y CSS - Creando el Proyecto de Bienes Raices - Página de Blog

Creando la página de Blog

HTML y CSS - Creando el Proyecto de Bienes Raices - Página de Contacto

Creando la Página de Contacto y Formularios, Textos y Labels

Agregando más Campos - Tipo Email y Submit

Creando un área de texto y agrupando los campos

Creando un campo para seleccionar opciones (Select) y Cantidades

Radio Buttons y checkbox

Inputs de Fecha y Hora y otros tipos de campos

HTML y CSS - Creando el Proyecto de Bienes Raices- CSS al Formulario de Contacto

Primeros Estilos a los Inputs y Selector de Atributo

Finalizando el CSS del formulario

HTML y CSS - Deployment del Proyecto

Deployment a Netlify Gratis

Responsive Web Design y Media Queries

Qué es Responsive web design

Sitio Responsive sin Media Queries

Introducción a Media Queries

Media Queries Desktop First

Media Queries Mobile First

Patrones de Diseño Responsive Web Design con CSS Grid y Flexbox

2 Columnas Iguales - CSS Grid

2 Columnas Iguales - Flexbox

3 Columnas Iguales - CSS Grid

3 Columnas Iguales - Flexbox

Cómo agregar más elementos al diseño

3 Columnas (Una mas grande) - CSS Grid

3 Columnas (Una mas grande) - Flexbox

Column Drop - CSS Grid

Column Drop - Flexbox

Contenido Principal y Sidebar - CSS Grid

Contenido Principal y Sidebar - Flexbox

Layout Shifter - CSS Grid

Layout Shifter - Flexbox

Mostly Fluid

Tiny Tweaks

Creando un Proyecto Mobile First - Página Principal

Primeros Estilos CSS al nuevo Proyecto (Descarga Material aqui)

Creando el Header y Estilos para el Mobile

Finalizando el Header y como crear un Snippet en VS Code

Creando el Contenido Principal y Barra Lateral

Posicionando el Blog y la barra lateral

CSS a las Entradas del Blog

CSS A la barra Lateral

Creando los Botones

Estilos al Footer del Sitio Web

Creando las páginas Internas del BlogDeCafé

Creando la Página de Nosotros

Creando la Página de Próximos Cursos

Creando la Página de Contacto (video 1 de 2)

Creando la Página de Contacto (video 2 de 2)

Deployment del Proyecto a Netlify

Convirtiendo el Proyecto de Bienes Raices a Responsive

Agregando Media Queries al Header e Iconos

Finalizando la Página Principal

Media Queries a la página de Nosotros

Creando un Menú de Hamburguesa con CSS3

Creando un Layout de un Blog con CSS3 y HTML5

Comenzando el Proyecto

Ajustando los Contenedores Principales

Finalizando el Proyecto

Agregando un Menú para Dispositivos Móviles

Creando un Layout para una Tienda Virtual con CSS3 y HTML5

Comenzando el Proyecto

Escribiendo los Primeros Estilos

Estilos a los Productos

Finalizando el Proyecto

Creando un Layout para un sitio web de Freelancer con Flexbox

Primeros pasos con el Proyecto y display:flex;

Creando el Hero y Servicios

Finalizando Servicios y Contacto

CSS Grid: Creando un Layout para una Tienda Virtual

Primeros Pasos con CSS Grid

Creando el Listado de Productos

Finalizando el Proyecto

PROYECTO: Sitio Web para Conferencias

Descargando HTML5 Boilerplate, como base para nuestro proyecto

Creando el Header y Menú de Redes Sociales

Agregando Font Awesome e Iconos a nuestro Proyecto

Escribiendo CSS para nuestro Header

Agregando una fuente con Google Fonts

Creando la Barra de Navegación

Creando estilos para contenedor y Barra

Estilos para el Menú de Navegación

Creando un Menú Mobile First

Creando la descripción del evento

Estilos para la Descripción del Evento

PROYECTO: Agregando la sección de Conferencias, Talleres y Seminarios

Agregando HTML5 Video como fondo para esta sección

Creando un Menú para las Conferencias

Enlistando las conferencias

Estilos para la sección de Conferencias

Estilos para el Menú de conferencias

Finalizando la sección de conferencias

PROYECTO: Creando la sección de Ponentes o Presentadores

Creando la estructura básica para la sección de Ponentes

Cambiando HTML para todos los presentadores

Estilos para los Presentadores

Finalizando el Menú de Presentadores con CSS3

PROYECTO: Creando un contador para la cantidad de eventos, conferencias y más

Creando el contenedor principal

Agregando Estilos e imagen de Fondo

Otros ajustes con CSS3

PROYECTO: Lista de Precios

Creando el HTML para las listas de Precios

Estilos Principales para nuestras listas de precios

Agregando un Efecto CSS3

Creando el contenedor del mapa

PROYECTO: Creando los Testimoniales

Agregando el HTML para los Testimoniales

Estilos a nuestros Testimoniales

Finalizando Sección de Testimoniales

PROYECTO: Sección de Newsletter y Cuenta regresiva

Creando el HTML para el Newsletter

Estilos para la sección de Newsletter

Creando el HTML para la cuenta regresiva

Estilos para la cuenta regresiva

PROYECTO: Creando nuestro footer

HTML Para el Footer

Estilos en el Footer

Básicos de JavaScript

JavaScript, ECMAScript y Versiones

Nuestro Primer programa en JavaScript

La Consola de Chrome

Creando variables

Creando Variables con Let y Const

Strings o Cadenas de Texto

Funciones para Strings o Cadenas de Texto

Números

Convirtiendo de String a Número

Convirtiendo de Número a String

JavaScript y sus Tipos de Datos

Arrays o Arreglos

Creando Objetos

Template Strings en JavaScript

Funciones

Métodos o Funciones dentro de los Objetos

Funciones que retornan valores y Arrow Functions

Object Constructor y la palabra this

Fechas

Condicionales - if, ifelse, else

Operador && y || y el Ternario

Condicionales - Switch

Loops - For, While y Do While

Otros Iteradores en JavaScript

Scope

Object Destructuring

Object Literal Enhacement

.Filter .find y .reduce en JavaScript

Fetch API y mostrar resultados de otro sitio web con JavaScript

JavaScript: DOM en Acción

Preparando todo para este Capitulo

Navegando el DOM con Chrome

Agregando Comandos en la consola

Revisando que el Contenido este listo

Seleccionando contenido con JS getElementById

Seleccionando contenido con JS getElementByClassName

Seleccionando contenido con JS getElementSByTag

Seleccionando contenido con JS querySelector

Seleccionando contenido con JS querySelectorAll

Nodos

Creando Elementos

Clonando Elementos

Controlando Inserciones con insertbefore

Eliminando Elementos

Reemplazando Elementos

PROYECTO: Sección de Registro con HTML y CSS

Creando el archivo de Registro

Creando los campos de Texto

Agregando los campos de Número de Tickets

Agregando los Checkboxes

Agregando HTML para cotizador y resumen de pedido

Estilos para el formulario de Registro

Finalizando estilos para el formulario

PROYECTO: Cotización en línea con JavaScript

Esperando a que el HTML este listo

Creando las variables de nuestros campos

Habilitando el botón de calcular basado en selecciones del usuario

Calculos con JavaScript para cobrar según el boleto adquirido

Asegurándonos que los datos que recibimos son números

Elaborando la sección de resumen

CSS el resumen de compra

Ocultar y Mostrar las conferencias basadas en el día

Validando con JavaScript

Creando una función para Validar

Validando nuestro formulario para recibir emails

PROYECTO: Agregando un Mapa con LeafletJS

Cargando las Librerías y mostrando un mapa

Ajustando las Coordenadas

Finalizando el Mapa

Introducción a jQuery

Qué es jQuery

Primeros Pasos con jQuery

Esperando a que el documento este listo

Seleccionando contenido con jQuery

Clonando contenido con jQuery

Borrando y Mostrando contenido con jQuery

Agregando / Quitando clases con jQuery

Manejando Eventos con jQuery

Navegando a través del DOM con jQuery

Obteniendo el Texto y Actualizándolo con jQuery

Seleccionando y Cambiando Atributos con jQuery

Cambiando el CSS de un elemento con jQuery

Eventos en jQuery

SlideUp y SlideDown

Ajax con jQuery

Recorriendo un arreglo con jQuery

jQuery en Práctica

Creando el HTML Necesario

Agregando una navegación y estilos

Acomodando los tabs en su posición

Escribiendo nuestro primer código de jQuery

Escribiendo una función para reaccionar en base al click del usuario

PROYECTO: jQuery en nuestro sitio web

Trabajando con la sección de Conferencias

Escribiendo el código necesario para nuestros tabs

Finalizando nuestro Ejemplo

PROYECTO: Plugins de jQuery

Agregando un Plugin para animar números

Activando el Plugin

Agregando un Plugin para cuenta regresiva

Activando el Plugin de Cuenta Regresiva

Agregando un plugin para modificar textos

Cambiando los estilos a nuestros textos

Creando una página para Galería de Fotos

Instalando el Plugin de Lightbox para galerias

Activando el Plugin de Lightbox

Detectando el Scroll dentro del sitio

Colocando el Menú en posición fija basado en el scroll

Animando el Menú Móvil al presionar el menú de hamburguesa

Previniendo otros errores de JavaScript

Entornos de Desarrollo para PHP

Instalando MAMP en Windows

PhpMyAdmin y donde colocar los archivos para MAMP en Windows

Instalando MAMP en Mac OS X

Donde colocar los archivos, arrancar servicios y PHPMyAdmin para Mac OS X

Instalando WAMP en Windows 10

Como Utilizar WAMP en Windows 10

Instalando LAMP en Ubuntu

Conociendo LAMP en Ubuntu

Instalando XAMPP en Ubuntu

Conociendo XAMPP en Ubuntu

Introducción a PHP

Hola Mundo en PHP

Variables en PHP

Concatenando valores

PHP en HTML o HTML en PHP?

Comentarios en PHP

Operaciones en PHP

Estructuras de Control en PHP

Switch en PHP

Arreglos Indexados en PHP

Las funciones print_r y var_dump

Agregando nuevos valores a un array

Arrays Asociativos en PHP

Arrays Multidimensionales en PHP

Revisando si un valor existe en un arreglo

Recorriendo un arreglo con foreach

Recorriendo Arreglo Multidimensional

For en PHP

While en PHP

Funciones en PHP

Funciones con argumentos en PHP

Funciones que retornan valores en PHP

Valores por defecto en funciones

Guardando datos en un arreglo mediante una función

Enviando valores de una página a otra con $_GET

Formularios y su validación en PHP

Enviando datos por POST o por GET

Leyendo e imprimiendo los valores de un POST

Leyendo e imprimiendo los valores de un GET

Validando que un campo de texto no llegue vacio

Leyendo valores de un Checkbox

Leyendo valores de múltiples checkboxes

Leyendo valores de un select

Leyendo valores de un radio

Leyendo valores de un textarea

Un poco seguridad a la hora de leer trabajar con formularios

Introducción a MySQL - Creando nuestra primer base de datos

PHPMyAdmin y la consola para escribir código SQL

Creando una Base de Datos

Tipos de Datos en MySQL

Creando una tabla y Campos en MySQL

Cambiando la estructura de nuestras Tablas

Insertando Datos en MySQL

Insertando una serie de valores para tener con que trabajar

Obteniendo datos de nuestra Base de Datos

Actualizando Información de una Base de Datos

Borrando Información de una Base de Datos

Ordenando registros de una Base de Datos

Como contar los registros

Operadores en MySQL

Funciones para Cadenas en MySQL

Funciones para números en MySQL

PROYECTO: Haciendo nuestro sitio web dinámico con PHP y MYSQL

Moviendo nuestro Proyecto

Creando la Base de Datos, tabla y Campos para las categorias de los eventos

Creando las tablas para los Eventos

Insertando Categorias en la tabla de categoria_evento

Relacionando 2 tablas por medio de llaves foraneas e indexes

Insertando nuestros invitados

Relacionando la tabla Invitados y Eventos con llaves foraneas e indexes

Probando que nuestra tablas y relaciones agregando un registro

Insertando una serie de registros para tener datos para poder trabajar

PROYECTO: Conectando nuestra página web a MYSQL (Creando calendario de eventos)

Creando el archivo de Conexión

Consultando la base de datos con los eventos

Mostrando todos los eventos

Uniendo Múltiples Tablas con INNER JOIN

Agrupando los eventos por fecha

Imprimiendo las fechas de los eventos

Imprimiendo el Contenido de los eventos

Estilos CSS a nuestro Calendario

Finalizando nuestro ejemplo con CSS3

PROYECTO: Creando la sección de invitados desde la Base de Datos

Escribiendo la consulta para los invitados

Agregando Colorbox para imprimir la descripción

Estilos CSS a Colorbox

Cargando archivos de forma condicional

Moviendo nuestra sección de invitados a un archivo externo

Mostrando en que página se encuentra el usuario actualmente

PROYECTO: Trabajando con el Calendario de la página Principal

Creando un Menú de Categorias

Creando una consulta para nuestra página principal

Múltiples consultas con PHP - MySQL

PROYECTO: Permitiendo a los usuarios registrar sus conferencias

Creando la tabla para registros de Usuarios

Ajustes a nuestro formulario de Registro en HTML

Agregando un Campo Oculto para nuestro formulario

Manejando las variables del formulario de registro

Creando una función que convierta a JSON los productos y boletos del usuario

Comprobando que solo se guarden registros cuando el usuario adquiera algo

Creando una función para el registro de los eventos

Utilizando Prepared Statements para insertar datos a la Base de Datos

Realizando una inserción a la Base de Datos

Previniendo que no haya registros repetidos

PROYECTO: Agregando MAILCHIMP a nuestro sitio Web

Agregando el código de MailChimp

Revisando que los usuarios se estén inscribiendo correctamente

Agregando el formulario dentro de Colorbox

AJAX- Introducción, que es y ejercicios

Qué es AJAX?

Ejemplos de Sitios Web Con Ajax

Qué es XMLHttpRequest

Estados y Propiedades en XMLHttpRequest

Cargando información de un archivo externo con AJAX

Cargando información desde un archivo PHP

PROYECTO: Agenda de Contactos con PHP, MySQL y Ajax, ES6, CSS Grid y Flexbox

Creando los Archivos base

Creando el Formulario

Estilos CSS al Contenedor y barra Superior

Estilos al Formulario

Creando el Listado de Contactos

Estilos al Listado de Contactos

Creando la página de Editar

Validando el Formulario para Crear Registros con JavaScript

Creando una Notficación cuando el Formulario esta vacio

Realizando una petición con Ajax

Creando la base de datos

Conectando la base de datos con PHP

Insertando Registros en la base de datos

Mostrando la notificación en nuevos registros y agregandolos al HTML

Mostrando todos los registros de la base de datos cuando carga por primera vez

Detectando cuando el usuario presiona el Eliminar un Registro

Eliminando Registros de la Base de Datos y del DOM

Creando un formulario más dinamico y re utilizable

Realizando la acción de Actualizar los Registros

Agregando un Buscador a los registros

Mostrando el Total de Contactos

PROYECTO: Creando UpTask - Administrador de Proyectos en HTML5, Ajax PHP y MySQL

Iniciando el Proyecto UpTask

Creando los archivos PHP

Creando la base de datos de UpTask en MySQL

Conectando a la base de datos con PHP

Creando una función en PHP para detectar la página actual

Leyendo los datos del formulario de crear usuario con JavaScript y Validando

Enviando los datos del Formulario HTML mediante JavaScript a PHP

Hashear los passwords en PHP

Creando una consulta a la base de datos y enviando respuestas personalizadas

Leyendo las respuestas del Modelo y mostrando una alerta

Creando el Código PHP para el Login de los usuarios

Verificando el Password con PHP

Redireccionando al Dashboard cuando el login es correcto

Creando las sesiones para crear un área segura

Como cerrar las sesiones

Creando un archivo de JavaScript para la interacción de nuestra Aplicación Web

Agregando la Funcionalidad para Crear Nuevos Proyectos

Imprimiendo los Proyectos creados en el HTML

Creando las Tablas de Proyectos y Tareas

Enviando los datos del Nuevo Proyecto a PHP mediante JavaScript

Insertando los Proyectos a la base de datos

Mostrando los Proyectos en la barra lateral

Mostrando el Nombre del Proyecto Actual y el Formulario

Validando el Formulario para la creación de nuevas tareas

Enviando los datos de la nueva tarea al archivo PHP

Guardando las tareas en la Base de datos

Mostrando una alerta y la nueva tarea sin recargar la página

Mostrando las tareas

Delegation en JavaScript

Detectar el ID de la tarea que el usuario ha marcado como completada

Enviando los datos para Completar una Tarea

Guardando el Estado de las tareas en la Base de Datos

Eliminando las tareas del HTML

Eliminando Tareas de la Base de Datos

Ajustes Finales al Proyecto

Detectando el Avance del Proyecto

Recibiendo pagos con PayPal

Viendo el Proyecto finalizado y los archivos iniciales

PayPal Primeros Pasos y Creando las cuentas

Conociendo y descargando el PayPal PHP SDK

Capturando los datos del formulario

Llamando las clases y métodos para recibir pagos

Agregando Articulos para Cobrar

Agregando Detalles y Cantidad a nuestro Pago

Agregando Transacciones y URL`s

Realizando un pago

Revisando otras clases disponibles

PROYECTO: Agregando PayPal a Nuestro Proyecto Final

Copiando nuestros archivos

Generando las cuentas y la App en Paypal

Ajustando el HTML de nuestro formulario

Agregando los articulos a la compra

Agregando Etiquetas y Camisas a la compra

Creando un Arreglo de Articulos

Guardando el registro del pago y realizando nuestro pago

Realizando los primeros pagos y Actualizando los Registros

Verificando los Passwords via PayPal REST API

PROYECTO: Creando una zona de Administración con Admin LTE

Descargando Admin LTE

Creando los Templates

Ajustes al diseño de Admin LTE

Creando el Menú Principal

PROYECTO: AdminLTE Creando Administradores

Creando el Formulario para crear administradores

Creando password hasheados con PHP

Conectando a la Base de Datos desde el admin

Insertando administradores en la base de datos

Añadiendo una notificación cuando el registro es correcto

Creando un formulario de Login

Logueando usuarios con PHP

Creando Sesiones con PHP

Creando un área segura para usuarios

Añadiendo DataTables para mostrar los registros

Creando las tablas en la base de datos para Administradores

Ajustes a datatables para mostrar la tabla de registros

Como editar información de un Administrador

Guardando los administradores editados en la base de datos

Añadiendo un campo de última edición en la base de datos

Agregando la opción de repetir password

Creando el evento con jQuery para borrar registros

Eliminando registros de la Base de Datos

Moviendo los archivos de Login a sus archivos

Mostrando el panel de Administradores a ciertos usuarios

PROYECTO: AdminLTE Agregando la sección para añadir Eventos

Mostrando todos los eventos en DataTables

Creando el formulario para crear nuevos eventos

Finalizando el Formulario para añadir eventos

Insertando eventos en la base de datos

Creando el formulario para editar eventos

Guardando los eventos editados en la base de datos

Agregando un registro de edición para los eventos

Eliminando los eventos

PROYECTO: AdminLTE Sección para administrar las Categorías

Listando las categorías

Creando el formulario para nuevas categorias

Guardando las categorías en la base de datos

Actualizando las categorías

Eliminando las categorías

PROYECTO: AdminLTE Agregando los Invitados / Ponentes

Listando los invitados

Creando el formulario para nuevos invitados

Subiendo archivos por Ajax

Moviendo archivos en el servidor y guardando su nombre en la base de datos

Creando el formulario para editar invitados

Editando la fotografia de los invitados

Eliminando un registro

PROYECTO: AdminLTE Creando la sección de usuarios registrados al evento

Listando los usuarios registrados en DataTables

Mostrando los artículos adquiridos por los usuarios

Mostrando la lista de eventos a los que el usuario se registró

Mostrando los eventos en el Front End desde la base de datos

Creando un arreglo de eventos

Imprimiendo los eventos en el front end

Creando el formulario para crear registrados manualmente

Almacenando los registros en la base de datos

Creando el formulario para editar los registrados

Guardando las ediciones en la base de datos

Finalizando nuestro registro de usuarios

PROYECTO: AdminLTE Creando un Dashboard con gráficas y widgets

Mostrando total de Usuarios Registrados y Ganancias

Creando Widgets con los regalos elegidos por los clientes

Creando un servicio en PHP y graficando los registrados

PROYECTO: Últimos ajustes al proyecto

Mostrar los Tweets o twitter Feed desde nuestra cuenta

Crear una página 404

Optimizar el sitio Web antes de Lanzarlo

Imágenes Ligeras

Minificar HTML y CSS

Utilizar un CDN

Cachear PHP y Consultas MySQL

Checklist para lanzar tu proyecto Web