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/

• Videos de CSS para desarrolladores (muy recomendado)

• 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