Estos ejercicios tratan sobre los temas tratados en la Semana 6 del curso.
Para facilitar la realización de los ejercicios, se proporcionan unas plantillas de los ejercicios S6. Una vez descargado el fichero zip:
Descomprima las plantillas en la carpeta ejercicios. Se creará una carpeta s6-plantillas.
Renombre la carpeta s6-plantillas como s6.
Las capturas de pantalla están tomadas con un ancho de ventana de 1920px aproximadamente.
⚠️ En algunos aspectos, no es necesario que el resultado sea absolutamente exacto, sobre todo porque algunos detalles no tienen importancia. Por ejemplo, basta con que la ventana del navegador sea un poco más ancha o estrecha para que las palabras salten de una línea a la siguiente. Los valores de tamaños y distancias utilizados suelen ser valores "redondos", pero acertar el valor exacto puede necesitar varios intentos. Con que el parecido sea razonable, es suficiente. Otros aspectos sí que me gustaría que fueran idénticos, por ejemplo los tipos de letra, la posición de las imágenes o qué palabras se han resaltado.
S6 1 - Consultas de medios / Columnas
Abra en Visual Studio Code la página quijote.html.
Cree la hoja de estilo quijote.css y añada el enlace a la hoja de estilo.
Incluya tres reglas-arroba @media de manera que el diseño de la página cambie cuando el ancho de la pantalla sea inferior a 640px o cuando sea superior a 1280px, como muestra el vídeo siguiente (haga clic en el vídeo para verlo a pantalla completa):
Ayuda (haga clic aquí si no se le ocurre cómo hacerlo)
Las reglas de la hoja de estilo pueden ser las siguientes (faltan las propiedades):
html {
}
@media screen and (max-width: 640px) {
html {
}
section {
}
}
@media screen and (min-width: 640px) and (max-width: 1280px) {
html {
}
section {
}
}
@media screen and (min-width: 1280px) {
html {
}
section {
}
p {
}
}
Abra en Visual Studio Code las páginas revistas.html A, B, C y D.
Sólo hay que escribir las hojas de estilo. El código html ya está incluido en la plantilla.
Complete las hojas de estilo de manera que los diseños de las páginas sean como muestran los vídeos siguientes (haga clic en el vídeo para verlo a pantalla completa). En principio, creo que no hace falta añadir más propiedades, aunque es posible que se pueda eliminar alguna:
Si no dispone de cuenta en GitHub, cree una cuenta en GitHub (apuntes). El nombre de usuario puede ser su nombre real (NombreApellido) o puede usar un seudónimo
Cree un repositorio en GitHub (apuntes). El nombre del repositorio puede ser curso-cefire-2022-05-ejercicio.