CSS
La primera tecnología que vamos a conocer es CSS, que nos permitirá generar un estilo para nuestras páginas HTML.
Entorno recomendado
Entorno recomendado
- 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
Material importante
Material importante
De la web
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
Nuestro material
Ejemplos útiles que trabajan sobre diferentes conceptos
Ejemplos útiles que trabajan sobre diferentes conceptos
- 01-Especificidad
- 02-Box Model
- 03 - Elementos de línea y de bloque. Position. Z-Index.
- Ejemplo de Maquetado Web
- 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
Ejemplos generales
Ejemplos generales
Nuestros
Nuestros
- 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
De Internet
De Internet