Objetivo

Dar las herramientas necesarias tanto teoricas como practicas para adentrarse en el mundo de la tecnologia weben el aprendizaje de los contenidos de este curso.

Requisitos

No requieres tener ningún conocimiento ya que este curso la base para los siguientes que son mas avanzados, sin embargoes importante aclarar que debes tener conocimientos sólidos en computación y manejo de Internet.

A quien va dirigido?

A todo a aquel que desee adentrarse en el mundo de la tecnologia web, pueden venir del area de diseñocomo de la parte de desarrollo ó no saber absolutamente nada ya que el curso es desde cero.

Temario

Introduccion
  • Introducción
  • Requisitos para el curso
  • Historia de CSS
  • Módulos CSS
  • Conectar HTML y CSS
  • Sintaxis de CSS
  • Variables CSS
Selectores
  • Estilos del navegador
  • Selectores
  • Selectores simples: etiqueta
  • Selectores simples: clases
  • Selectores simples: Id
  • Selectores compuestos: agrupados
  • Selectores compuestos: combinados
  • Selectores compuestos: descendientes
  • Selectores con operadores + > ~ *
  • Selectores de atributos
  • Selector de atributos con comodines
Los Pilares de CSS
  • ¿Cómo funciona CSS?
  • Especificidad
  • Cascada
  • Estilos computados
  • Herencia
Box model
  • Elementos de línea y de bloque
  • Propiedad display
  • Margin
  • Padding
  • Bordes
  • Propiedad box-sizing
Bordes y sombras
  • border
  • Border radius
  • Outline
  • Box shadow
Pseudoclases
  • ¿Qué son las pseudoclases?
  • :hover :active :visited
  • :target :not :empty
  • :first-child :last-child :first-of-type :last-of-type
  • :nth-child :nth-of-type
Fondos
  • background-color
  • background-size
  • background-position
  • background-clip y background-origin
  • background-attachment
  • Background múltiples
  • Shorthand Background
Color
  • Currentcolor
  • Color keywords
  • Modo RGB
  • Notación Hexadecimal
  • Modo HSL
  • Degradados lineales
  • Degradados radiales
  • Degradados repetidos
  • Ejercicio Ying-Yang
Texto
  • Conceptos básicos de tipografía
  • Unidades de medida em y rem
  • Estilos básicos de texto
  • Font Family
  • Sombras de texto
  • Fuentes para la web
  • @font-face
  • font-display
  • Creando un sistema de fuentes
  • Espacios en blanco
  • Flujo y desbordamiento
  • Resolver desbordamiento
  • Ejercicio controlar texto en vertical
Position
  • Flujo y espacio reservado
  • Propiedades offset (top, left, right, bottom)
  • Position relative
  • Position absolute
  • Ejercicio tooltip
  • Ejercicio menú desplegable
  • Repasando temas de posicionamiento
  • Position fixed
  • Position sticky
  • Stacking context
  • z-index
  • pointer-events
  • Ejercicio modal
Variables CSS
  • ¿Qué son las variables CSS?
  • Scope
  • Herencia y cascada
  • Diferencia entre variables CSS y variables SASS
  • Variables CSS en RWD
  • Variables CSS en creación de temas
  • Creando un sistema de botones
Pseudo elementos
  • ¿Qué son los pseudoelementos?
  • ::after y ::before
  • attr()
  • unicode y quotes
  • Imágenes
  • Vacío
  • Pseudoelementos con variables CSS
  • ::first-line
  • ::first-letter
  • ::selection
Listas y contadores
  • Estructura y tipos de lista
  • list-style-type
  • List style image
  • List style position
  • Marker
  • Contadores
  • Contadores anidados
  • Ejercicio con contadores
  • Ejercicio calculadora con contadores
Tablas y formularios
  • Estructura de tablas
  • Bordes en tablas
  • caption-side y empty-cell
  • table-layout
  • Maquetación y estilos de tablas
  • Apariencia de inputs
  • Resize
  • Focus
  • Placeholder shown
  • Required, optional
  • Enabled, disabled, readyonly
  • Valid
  • Estructura y layout de formularios
Filtros
  • Introducción a los filtros
  • Grayscale
  • Sepia
  • Invert
  • Hue-rotate
  • Brightness
  • Contrast
  • Saturate
  • Blur
  • Opacity
  • Drop-shadow
  • Ejercicio múltiples filtros en un elemento
  • Ejercicio sombra con filtros
Blending modes
  • Introducción a los blending modes
  • Multiply
  • Screen
  • Overlay
  • Hard light y Soft light
  • Color dodge
  • Darken y Lighten
  • Difference
  • Exclusión
  • Hue
  • Color
  • Saturation
  • luminosity
  • isolatiION
Figuras, recortes y máscaras
  • Recorte rectangular/interior
  • Recorte circular
  • Recorte elíptico
  • Recorte poligonal
  • Recorte con SVG
  • Animaciones con recortes
  • Máscaras de recortes
  • Composición de máscaras
  • Banner parallax con máscaras
Scroll
  • Desbordamiento de contenido
  • Smooth scroll con CSS
  • Controlando posición final del scroll
  • Desplazamiento dentro de contenedores
  • Scroll fullpages
  • Personalización del scroll. (Parte 1)
  • Personalización del scroll. (Parte 2)
  • Ejercicio tema dark y white para scroll
Layout
  • Holy grail layout responsive
  • Manejo de columnas. (Parte 1)
  • Manejo de columnas. (Parte 2)
  • Creando estructura de landing pages. (Parte 1)
  • Creando estructura de landing pages. (Parte 2)
  • ¿Cuál es el siguiente paso?
Conceptos de RWD
  • Concepto
  • Viewport
  • Media Queries
  • Metodologias
  • Unidades relativas: Porcentaje
  • Unidades relativas: em y rem
  • Unidades de viewport
  • Unidades de viewport II
  • Responsive web design flexbox
  • Responsive web design css grid
  • Breakpoints
Imágenes y videos responsive
  • Video responsive con css
  • Video responsive con css grid
  • Imagenes responsive con css
  • Imaganes responsive con picture
  • Imagenes responsive con srcset
RWD en Javascript
  • CSSOM
  • Propiedad style
  • Propiedad style II
  • Trabajando con variables css
  • Media queries con javascript