Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏
Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.
El Responsive Web Design es crear tu web usando HTML y CSS de forma que automáticamente se rescale y adapte para que se vea bien en todos los dispositivos (ordenadores, tablets, móviles, etc).
Para que las páginas sean responsive tenemos que añadir el <meta> del viewport a todos los documentos HTML.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Las imágenes responsives se escalan de forma que se ven bien en todos los tamaños de navegador.
Podemos usar la propiedad de CSS width con el valor 100% y de esta forma la imagen se escalará.
Para que la imagen no se haga más grande que la imagen original y no se vea pixelada podemos usar la propiedad max-width y ponerla al 100% de este modo no se pasará del tamaño original.
El elemento <picture> nos permite definir diferentes imágenes para diferentes tamaños de ventana de navegador.
Rescala la ventana del navegador y verás como cambian las imágenes del ejemplo de abajo.
El tamaño del texto se puede hacer responsive usando la unidad “vw” que significa “viewport width”.
1vw = 1% del viewport width
También es normal el uso de media queries para hacer responsive textos, imágenes, etc.
Con un media queries puedes definir estilos completamente diferentes para diferentes tamaños de navegador.
Existen muchos frameworks que nos permiten realizar un diseño responsive. El más famoso y usado es Bootstrap.
Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.
![Curso de CSS desde cero [completo]](https://assets-global.website-files.com/635a453bdfb49358830950bd/635a4711b55609ee9858bc34_imagen_curso_completo.jpg)
