CSS La Guía Completa - Flexbox, CSS Grid, SASS +20 proyectos

• Los Proyectos Incluidos en este curso

• ¿Que es un Editor de Texto? y algunas opciones

• ¿Cómo Solicitar soporte en este curso?

• El Primer Proyecto del curso

• ¿Qué es HTML? y primeros pasos

• Textos en HTML

• Extensiones en VSCode para HTML

• Imágenes en HTML ( Descarga Materiales Aquí)

• Enlaces en HTML

• Estructurar HTML

• Estructurando el Proyecto Ecommerce

• Creando el Listado de Productos

• Comentarios en HTML

• Creando el Footer

• Introducción a CSS - Terminología y Partes de CSS

• CSS en el documento HTML y CSS en un archivo Externo

• Colores en CSS

• Seleccionando Elementos en CSS y algunas transformaciones

• Especificidad en CSS

• Agregando Clases a los Selectores

• ¿Qué es el Box Model en CSS?

• Paddings y Margins

• Normalizar CSS

• Displays en CSS

• Agrupando nuestro Código CSS

• Imágenes como Background en CSS

• ¿Que es Flexbox? y aplicandolo al proyecto

• Alineación en Flexbox

• ¿Qué es CSS Grid? y aplicandolo al Proyecto

• Terminología de CSS Grid

• Creando las Categorías

• Añadiendo Fuentes en CSS

• Unidades en CSS y porque utilizar REM

• Formas de Escribir código en CSS

• Ajustando el Diseño

• Creando la sección de Nosotros

• ¿Cuando utilizar CSS Grid y cuando Flexbox?

• Creando la sección de Productos

• Finalizando los Productos

• Mostrando los Productos en el GRID

• Object fit para ajustar las imagenes

• Finalizando la sección de Productos

• Creando el Footer

• Finalizando el Footer

• Creando la página de Nosotros

• Creando la página de la Tienda

• Creando la página de Blog

• Finalizando la página de Blog

• CSS al Blog

• Creando la Entrada del Blog

• Creando la Página de Galería

• Finalizando la Galería

• Creando el Form y el primer campo

• Creando y Agrupando más campos

• Inputs para teléfonos, fechas, emails

• Creando un Select

• Creando un Radio Button

• El Campo Datalist

• Input Submit y Validación

• CSS al Formulario Parte 1

• CSS al Formulario Parte 2

• Display Flex (descarga materiales aquí)

• Flex Direction

• Justify Content

• Justify Content cuando la Dirección es Columna

• Align Items

• Align Items Cuando la dirección es Columna

• Align Items y Justify Content

• Flex Basis

• Gap y Calc

• Flex Wrap

• Flex Grow

• Flex Shrink

• Flex Shortand

• Display Grid (Descarga Materiales aquí)

• Grid Template Columns y Posicionar Elementos

• Grid Template Rows

• Column Span y row Span

• Grid Shorthand

• Grid Autoflow

• Grid Fr y Grid Repeat

• Grid Gap

• Grid Areas

• Grid Template

• Alineación en Grid

• Autofill y Autofit

• Selector de Etiqueta (Descarga Materiales Aquí)

• Selector de Clase

• Selector de 2 Clases

• Selector de Clases Anidadas

• Selector de ID

• Selector de Etiqueta y Clase

• 2 Elementos

• Primer Nivel de Hijos

• Primer Elemento Después

• Atributo

• Primer Hijo de una Lista

• Último Hijo de una lista

• Seleccionar un elemento especifico

• Todos los elementos excepto uno o unos

• Primer Linea o Primer palabra

• ¿Qué es Responsive Web Design?

• Primeros pasos con Media Queries (Descarga material aquí)

• Formas de Probar tu sitio Responsive

• Media Queries al estilo Mobile First

• Media Queries al Estilo Desktop First

• Media Queries entre 2 tamaños

• Creando un Snippet para Media Queries

• Tamaños estandar para Media Queries

• Crear Contenedores Responsive

• 3 Columnas Responsive en Flexbox

• 3 Columnas Responsive en CSS Grid

• Imágenes Responsive

• Imágenes en Avif y Webp Para mayor performance

• Creando un Shorthand para Avif y Webp

• Mostrando imágenes de diferentes tamaños con SRCSET

• El Proyecto Finalizado

• Primeros Pasos (Descarga materiales aquí)

• Ajustando la Navegación

• Ajustando las Categorias

• Ajustando el Bloque de Nosotros

• Ajustando los Productos

• Ajustando el Footer

• Ajustando la página de Nosotros

• Ajustando el Blog

• Ajustando la Galería

• Deployment de Proyectos en Netlify

• El Proyecto Finalizado

• Primeros pasos con el Proyecto (descarga materiales aquí)

• Introducción a Custom Properties

• Registrando los Colores en Custom Properties

• Aplicando el Reset para utilizar REMS y Box Sizing

• Registrando el CSS Global

• Creando el Header

• CSS al Header

• Finalizando el header

• Creando un Degradado para Textos

• Creando la sección de Iconos

• CSS al bloque de Iconos

• Creando la Sección de Información de los TechPRO

• Estilos a la sección de sobre los TechPro

• Finalizando el CSS de la sección de Sobre TechPRO

• Creando el HTML de la sección Modelos

• CSS a la sección de Modelos

• Finalizando la sección de Modelos

• Animando los Modelos

• Creando el HTML para la sección de Newsletter

• CSS a la sección de Newsletter

• Creando el Footer

• Imágenes Avif y Webp como Background

• Deployment del Proyecto

• El Proyecto FInalizado

• Comenzando el Proyecto (Descarga Materiales aquí)

• Creando el CSS Global

• Creando el Header

• CSS al Header

• Finalizando el Header

• Creando la sección de Nosotros

• CSS en la sección de Nosotros

• Creando la sección de Modelos

• Comenzando con el CSS de Modelos

• CSS al Modelo Básico

• Finalizando los Modelos

• Creando la Galería

• CSS a la galería

• Finalizando el CSS a la galería

• Comenzando el Footer

• CSS al Footer

• ¿Qué es BEM?

• Creando un Bloque y Elementos en BEM (descarga materiales aquí)

• Segundo Bloque y elementos en BEM

• CSS a Productos

• CSS a los bloques de Producto

• Creando un Modificador

• El Proyecto FInalizado

• Primeros pasos con Nucleus (Descarga Materiales Aquí)

• CSS al header

• CSS a la navegación

• Últimos Ajustes al Header

• Creando un Botón en el Header

• Creando la sección de que es Nucleus

• Creando un contenedor que se adapte a BEM

• Primeros Pasos con el CSS en la sección de Nucleus

• Agregando Transiciones a la sección de Nucleus

• Comenzando con la sección de Caracteristicas

• CSS a la sección de Caracteristicas

• Diagonales en secciones Metodo 1

• Posición Relative y Absolute

• Diagonales en secciones Metodo 2

• Creando la sección de Comisiones de Nucleus

• Aplicando CSS a las comisiones

• Creando los Testimoniales

• CSS a los Testimoniales

• Creando el Footer

• CSS al Footer

• ¿Qué es SASS?

• ¿Qué es Gulp?

• Instalando Node

• Instalando Gulp

• El Proyecto Finalizado

• Primeros Pasos con Gulp e instalar Dependencias

• Creando la Primer Tarea en Gulp

• Compilando SASS con Gulp

• Agregando un watch

• Exportar CSS en diferentes estilos

• Añadir Autoprefixr

• Corriendo múltiples tareas por default

• Dividir tu código de SASS en diferentes archivos

• Escuchar por los cambios en todos los archivos .scss

• Creando Variables en SASS

• Utilizando @use y @forward

• Importar Variables en Otros Archivos

• Agregando el Resto del CSS Global

• Creando una serie de Utilidades

• Agregando Más archivos a la compilación de SASS

• Creando el header del Proyecto

• Creando una Tarea para las imágenes (Descarga Materiales aquí)

• Aligerar Imagenes con gulp

• Utilizar Gulp para crear Imagenes Webp

• Utilizar Gulp para crear imagenes Avif

• Creando el CSS de nuestro Header

• Mixins en SASS

• Mixins para Media Queries

• Shortcode para mixins

• SCSS A la barra de navegación

• Ajustando la barra de navegación

• Finalizando el Header

• Creando el Contenido Principal

• CSS al Contenido Principal

• Añadiendo un Gráfico a los Heading

• Creando la sección de Iconos

• CSS a los iconos

• Creando un Mixin para un Grid

• Creando la Galería

• CSS a la galería

• Creando el Menú

• Primeros pasos agregando CSS al menú

• Finalizando el CSS del Menú

• Creando los Testimoniales

• CSS a los testimoniales

• Creando el Footer

• CSS al Footer

• Creando un archivo base.html

• Creando la página de Nosotros

• Agregando el CSS a Nosotros

• Creando la Página de Proceso de Creación de Café

• CSS a la página de Proceso

• Creando la página del Menú

• CSS a la página de Menú

• Creando la página de Galería

• Creando el Formulario de Contacto

• CSS al Formulario

• Añadir un Sourcemap y sus ventajas

• Mejorar tu código CSS con cssnano

• El Proyecto Finalizado

• Arrancando el Nuevo proyecto (descarga materiales aquí)

• Creando el Header y la navegación

• Agregando el Código de SASS al Header

• Agregando un Modificador a la navegación

• Creando el Formulario

• CSS al Formulario

• Creando la sección de Pasos de la App

• CSS a la sección Pasos

• Creando los Testimoniales

• CSS a los Testimoniales

• Posicionando los Testimoniales en el Grid

• Creando la sección de Restaurantes Favoritos

• Posicionando los Restaurantes

• Finalizando el CSS de los restaurantes

• Creando la sección de Repartidores

• CSS a la sección de repartidores

• Creando la sección de Descargar la app

• CSS a la sección de Descargar App

• Trabajando con la sección de Tiendas

• Creando el Footer

• CSS al Footer

• El Proyecto Finalizado

• Comenzando el Proyecto (descarga materiales aquí)

• Creando el Header

• CSS al Header

• Creando la sección Crea tu Podcast

• Agregando CSS a la sección Crea tu podcast

• CSS al Heading

• Creando la Sección de Beneficios del Podcast

• CSS a la sección de Beneficios

• Creando un Mixin para encabezados

• Creando la sección de Estadisticas

• Creando el HTML de los Planes

• CSS a la tabla de Precios

• Finalizando la tabla de Precios

• Creando los Testimoniales

• CSS a los Testimoniales

• Creando el HTML del Footer

• CSS al Footer

• El Proyecto Finalizado

• Arrancando el Proyecto (descarga materiales aquí)

• Creando el HTML del Header

• CSS al Header

• Finalizando el Header

• Creando la sección de Destinos populares

• Agregando el Código CSS a destinos populares

• Creando la sección de Vive en cualquier lugar del Mundo

• CSS a la sección de Vive en Cualquier parte del mundo

• Creando la sección de convertirte en anfitrión

• CSS a la sección de convertirse en Anfitrión

• HTML a la sección de Descubre nuevas experiencias

• CSS a la sección de Descubre Nuevas Experiencias

• Creando el Footer

• CSS al Footer

• El Proyecto Finalizado

• Comenzando el Proyecto (descarga materiales aquí)

• Primeros pasos con el CSS del header

• Finalizando el Header

• Creando el HTML de las Propiedades

• Creando un Mixin para los Encabezados

• CSS de las Propiedades

• Agregando las Imágenes de Fondo de las Propiedades

• Finalizando el CSS de las propiedades

• HTML a la sección de Propiedad destacada

• CSS a la sección de propiedad destacada

• HTML del Blog y Testimoniales

• Creando Headings de Blog y Testimoniales

• CSS a los Testimoniales

• CSS al Blog

• Creando el HTML del Footer

• Creando el CSS del Footer

• Añadir un Efecto al dar Scroll a las imágenes

• El Proyecto Finalizado

• Creando el Header (descarga materiales aquí)

• CSS al header

• CSS a la navegación

• Creando un Menú de Redes Sociales

• CSS al menú de Redes Sociales

• Creando el slider y bienvenida

• CSS a la bienvenida

• Creando un Mixin para Headings

• Creando los Cards

• CSS a los Cards

• Creando los Horarios

• CSS a la sección de Horarios

• CSS a la Tabla de Horarios

• Creando los Productos

• CSS a los Productos

• Creando la sección de Realiza una Cita

• CSS a la sección de Realiza una Cita

• Creando el Footer

• CSS al Footer

• Instalando swiperjs

• Configurando el Slider

• Otras Configuraciones

• CSS al Slider

• Agregando otro efecto

• Creando el Header y Navegación (Descarga materiales aquí)

• Escribiendo el CSS del Header

• CSS a la navegación

• CSS al Hero

• Creando el Formulario de búsqueda

• CSS al Formulario

• Creando la sección de Próximos Eventos

• CSS a Próximos Eventos

• Creando el Listado de Categorías

• CSS a las Categorías

• Creando el HTML del bloque de Grupos

• CSS a los bloques de Grupos

• Creando el Header

• Reto

• Primeros pasos con la sección de Meeti

• Finalizando el Proyecto

• Primeros pasos (descarga materiales aquí)

• CSS al Header

• CSS a la navegación

• CSS a los bloques parte 1

• CSS a los bloques parte 2

• Creando la sección de Nosotros

• CSS a los Iconos

• HTML a la sección de próximos cursos

• CSS a la sección de Cursos

• Creando la sección de Escuela

• CSS a la sección de licenciatura

• Creando el Footer

• Viendo el Proyecto Finalizado

• Primeros pasos con el header (Descarga materiales aquí)

• Añadiendo Información del Modelo en el Header

• Trabajando con el CSS del header

• CSS a la Información del Modelo en el Header

• Posicionando la Guitarra del header

• Creando una animación en el header

• Creando el Listado de Productos

• Aplicando CSS Grid a los Productos

• Finalizando el Listado de Productos

• Trabajando con la sección de Cursos

• Primeros Pasos con el Blog

• CSS al Blog

• Mostrar Cierta cantidad de Líneas con puro CSS

• Trabajando con el Footer

• Creando un archivo base

• Creando la página de Nosotros

• Creando la Página de Grid

• Creando la página de entrada de Blog

• Finalizando la página de Tienda y Producto