CSS

La primera tecnología que vamos a conocer es CSS, que nos permitirá generar un estilo para nuestras páginas HTML.

• Visual Studio Code, con estas extensiones
  • HTML + CSS Support - ecmel
  • Close HTML/XML tag - Compulim: Cierre de etiquetas
  • Image preview - Kiss Tamás: Información de imágenes
  • Tag Inserter - l7ssha: Añade etiquetas alrededor del texto seleccionado
  • HTMLHint - Mike Kaufman: Validación de HTML
  • CSScomb - mrmlnc: Formateador de CSS
  • CSS Peek - para poder encontrar las definiciones de estilos desde el HTML (con F12 - Go to definition)
• Si tenés ganas de practicar fuera del TP, podés trabajar directamente desde el navegador con CodePen, o bien probar Prepros

• La mejor guía es https://cssreference.io/
• Otro sitio web que tiene muchos artículos interesantes es https://css-tricks.com/
• Página principal del W3C CSS, que tiene sus tutoriales recomendados

• Previo: Introducción a la arquitectura web. HTML
• CSS
• Responsiveness
• BONUS: Introducción a SASS. LESS, SASS, Tutorial de LESS.

• 01-Especificidad
• 02-Box Model
• 03 - Elementos de línea y de bloque. Position. Z-Index.
• Ejemplo de Maquetado Web
  • Paso 0: introducción. Presentación del contenido de la página.
  • Paso 1: Elección de la tipografía.
  • Paso 2: Elección de la paleta de colores.
  • Paso 3: Manejo espacial de la página.
  • Paso 4: Refactorización del contenido y de los estilos.
  • Branch master: uso del framework Bootstrap.
• 04 - Medidas espaciales: em, rem, px
• 05 - Display Flexbox
• 06 - Display Grid
• 07 - Flexbox vs. Grid
• 08 - Reutilizacion. BEM.
• 09- Variables - Custom properties en CSS.
• 10 - Media Queries. Selectores avanzados.
• 11 - Accesibilidad.
• 12 - Transiciones y Animaciones

• Hombre lobo - Bootstrap Twitter
• Lista de amigos, que forma parte del Taller de Maquetado Web que podés ver por tu cuenta. El branch master te muestra cómo integrarlo con Bootstrap Twitter.
• BONUS: Pantalla de Login - SASS

• Ten modern layouts in one line of css