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.
Material importante
De la web
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
Nuestro material
Ejemplos útiles que trabajan sobre diferentes conceptos
Ejemplo de Maquetado Web
Ejemplos generales
Nuestros
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