Algunos links de lo que vimos en clase y herramientas para que el trabajo quede perfecto!

NUEVO VIDEO

Si estas buscando como hacer algo, no des muchas vueltas... seguro terminas en w3school.com

- How to

- Responsive intro

- Viewport

Es una etiqueta para configurar el espacio que utilizara tu sitio web: 
width=device-width define el ancho del sitio web en el dispositivo.
Las otras dos que dicen: 
initial-scale=1, maximum-scale=1 sirven para definir la escala del sitio web, ¿Te haz dado cuenta que puedes hacer zoom? a esto se refiere con la escala al definir una escala inicial y una maxima iguales te aseguras de que no se pueda hacer zoom, esto es util en sitios web móviles ya que el zoom en estos generalmente estropean la visibilidad del sitio.

- Grid-View

Una cuadrícula de vista sensible a menudo tiene 12 columnas, y tiene una anchura total de 100%, y se encogerá y expandirse a medida que cambia el tamaño de la ventana del navegador.
No olvidar insertar el estilo: * {box-sizing: border-box;} Esto asegura que el relleno y el borde están incluidas en el ancho total y la altura de los elementos.

- Media Queries

Utiliza la regla @media para incluir un bloque de propiedades de CSS sólo si una determinada condición es verdadera.

- Imagen responsive

- Menú responsive

 

 

Para los que pedian un video mas detallado, desde el boceto: