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

  • 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

Para instalar una extensión, podés seguir las recomendaciones de esta página.

• 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