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
  • Plan para el Curso
Editores de Texto, IDE's y mucho más
  • Visual Studio Code - Extensiones y otros Editores y IDE's
SITIO FREELANCER: Creando un Proyecto paso a paso: HTML
  • Introducción a HTML - El Rol de HTML
  • Creando los textos con HTML
  • Estructurar Contenido en HTML
  • Creando Enlaces y Navegación
  • Añadir imágenes con HTML
  • Formularios en HTML
SITIO FREELANCER: Creando un Proyecto paso a paso: CSS
  • Introducción a CSS - El rol de CSS
  • Primeros pasos con CSS
  • Crear un archivo externo para el CSS
  • Estilos a nuestro proyecto
  • Introducción a Selectores CSS
  • Especificidad en CSS
  • Colores en CSS
  • Añadir Fuentes externas
  • Añadiendo Normalize CSS
  • Estilos CSS a la navegación - Primeros Pasos
  • Estilos CSS a la navegación y Displays en CSS
  • Estilos a la navegación y Tipos de Efectos a textos
  • Estilo s la navegación y posicionando los enlaces con Flexbox
  • Estilos para escribir código CSS - BEM, Módulos y Utilidades
  • Finalizando la navegación
  • Introducción a Responsive Web Design y Media Queries
  • Añadiendo Media Queries
  • Imagenes con CSS
  • CSS Box Model
  • Posicionando elementos con position absolute
  • CSS a los Headings
  • CSS para crear botones
  • Comentar el código CSS
  • Degradados con CSS
  • Sombras con CSS
  • Introducción a CSS Grid
  • Cuando usar CSS Grid, Flexbox y Floats?
  • Finalizando la sección de Servicios
  • Primeros pasos con el formulario
  • CSS a los inputs
  • Posicionando los Inputs
  • Añadiendo un Efecto de Scroll
  • Publicar un Proyecto en Netlify
FRONTEND STORE - Creando un Segundo Proyecto con HTML y CSS
  • Viendo el Proyecto Finalizado (DESCARGA MATERIALES AQUI)
  • Primeros pasos
  • Añadiendo los Globales al CSS
  • Añadiendo el Logotipo y la navegación
  • Introducción a BEM
  • Creando los enlaces
  • Añadiendo los Productos
  • CSS a los Productos
  • Posicionar elementos con CSS Grid
  • Creando la página de Nosotros
  • Creando la sección con iconos
  • HTML para la sección de Producto
  • CSS a la sección de Producto
Patrones de Diseño Responsive Web Design con CSS Grid y Flexbox
  • Introducción a los Patrones de Responsive Web Design (DESCARGA MATERIALES AQUI)
  • Dos Columnas Iguales - CSS Grid
  • Dos Columnas Iguales - Flexbox
  • Tres Columnas Iguales - CSS Grid
  • Tres Columnas Iguales - Flexbox
  • Tres Columnas (1 más grande) - CSS Grid
  • Tres Columnas (1 más grande) - Flexbox
  • Column Drop - CSS Grid
  • Column Drop - Flexbox
  • Con Sidebar - CSS Grid
  • Con Sidebar - Flexbox
  • Layout Shifter - CSS Grid
  • Layout Shifter - Flexbox
  • Mostly Fluid
  • Tiny Tweaks
BLOG CAFÉ - Creando un Proyecto con HTML y CSS
  • El Proyecto Finalizado
  • Primeros pasos con el proyecto (DESCARGA MATERIALES AQUI)
  • Añadiendo CSS global
  • Creando el Header
  • CSS al Header
  • Creando el Blog
  • Finalizando el Blog
  • Creando la barra lateral
  • Creando el Footer
  • Creando la Página de Nosotros
  • Desarrollando la página de Cursos
  • Creando la página de entradas de Blog
  • HTML para la página de Contacto
  • CSS al Formulario de Contacto
  • Mejorando el Performance con Lazy Loading
  • Mejorando el Performance con Preload
  • Mejorando el Performance con Prefetch
  • Mejorando el Performance con Imagenes Webp