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, creando un perfil vacío con estas extensiones

  • HTML + CSS Support - ecmel

  • HTMLHint - HTMLHint: validación de sintaxis de HTML. Atención que la extensión HTMLHint de Mike Kaufman está deprecada, desde allí te redireccionan a la nueva.

  • Highlight Matching Tag - vincaslt: te permite resaltar el tag sobre el cual estás parado y el elemento que lo cierra. Como alternativa, podés instalar HTML End Tag Labels - Ante Primorac: ayuda contextual para saber qué elemento cierra cada tag (puede ser un poco verboso).

  • Auto Rename Tag - Jun Han: permite renombrar un tag tanto al abrir como al cerrar el tag.

  • Prettier - Code Formatter - Prettier, o bien CSScomb - mrmlnc: para dar formato a la hoja de estilos.

  • CSS Peek - Pranay Prakash: para poder encontrar las definiciones de estilos desde el HTML (con F12 - Go to definition)

  • Intellisense for CSS Class Names - Zignd: autocompletado para estilos.

  • Live Server - Ritwick Dey: levanta un servidor local y refresca automáticamente el navegador ante cualquier cambio que hagas.

  • Image preview - Kiss Tamás: muestra previsualizaciones de imágenes en el margen

Podés ver cómo se trabaja con perfiles en VSCode en este video, la recomendación es partir con un profile totalmente vacío. También te dejamos este tutorial muy piola - en inglés y la documentación oficial).  Para instalar las extensiones, tenés dos opciones: 1. instalarlas a mano siguiendo las recomendaciones de esta página. o 2. importando este archivo como se indica en esta parte del video.

• Opcionalmente podés bajarte:

  • Close HTML/XML tag - Compulim: Cierre de etiquetas

  • SVG Previewer - Vitalii Mazurenko: para ver archivos de imágenes .svg

• 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