Introducción y herramientas

• Introducción al desarrollo web integral
• El diseñador web como programador creativo, el lenguaje de la web
• Herramientas de apoyo
• Elección de un editor de texto, factores a tomar en cuenta
• Todo diseño web debe ser responsive

HTML

• Introducción a los lenguajes de etiquetas
• Elementos, etiquetas y atributos
• HTML semántico, el contenido como guía
• Elementos semánticos y elementos estructurales
• Títulos, párrafos, listas, tablas, enlaces e imágenes... el contenido es el rey
• Flujo normal (normal flow), elementos block e inline

CSS, primera parte: introducción

• Reglas, selectores y propiedades
• Tipos de selectores
• Interludio HTML: elemento style, identificadores únicos y clases
• Vinculación de ficheros CSS a ficheros HTML

CSS, segunda parte: el navegador como herramienta de diseño

• Diseñando en el navegador, inspector de elementos + editor de texto, o cómo dejar atrás las simulaciones
• CSS y su relación a los programas de diseño tradicionales

Tipografía

• Introducción a la tipografía
• Elección de tipografías para web y las distintas alternativas a nuestra disposición
• Unidades de medida, absolutas y relativas.
• Propiedades tipográficas
• Contenido dinámico vs. contenido estático y sus consecuencias a la hora de estilizar la tipografía

Color

• Distintas formas de hablar en RGB
• Color de fondo y color del texto

Layout, primera parte: HTML + CSS

• Relación de las etiquetas estructurales a los típicos “bloques” de un programa de diseño, todo es un rectángulo
• Unidades de medida
• Márgenes, por dentro y por fuera
• Modelo de caja
• Posicionamiento estático, o lo que está detrás del flujo normal
• Rompiendo el flujo normal: posicionamiento relativo, absoluto y fijo
• Introducción al diseño responsive, media queries

CSS, tercera parte: la caja de herramientas gráficas

• Bordes
• Imágenes de fondo y su diferencia con las imágenes de contenido
• Degradados de color
• Sombras
• Modos de fusión
• Filtros
• Transformaciones

Layout, segunda parte: Flex

• El modelo de caja flexible
• Flex vs. flujo normal
• Opciones de Flex
• Flex y su relación al diseño responsive
• Limitaciones de Flex

Layout, tercera parte: Grid

• Cuadrículas a la hora de diseñar una web
• Grid vs. Flex vs. flujo normal
• Opciones de Grid

Layout, grand finale: diseñando en el navegador

• Todo es combinable
• Maquetación idiomática, o cómo pensar en CSS
• Todo diseño web será responsive

Javascript

Jquery