CSS

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

Entorno recomendado

  • Visual Studio Code, con estas extensiones

    • HTML + CSS Support - ecmel

    • HTMLHint - Mike Kaufman: validación de sintaxis de HTML

    • 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 Viewer - cssho: 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

Material importante

De la web

Nuestro material

Ejemplos útiles que trabajan sobre diferentes conceptos

Ejemplos generales

Nuestros

De Internet