jairogarcíarincón

15/06/2021
Contenidos
- Introducción a los pre-procesadores
- Instalación
- Configuración
- Evaluación Bloque 1
- Solución Evaluación Bloque 1
- Sintaxis y reglas
- Variables
- Operadores
- Tipos de datos
- Evaluación Bloque 2
- Solución Evaluación Bloque 2
- Ejercicio 1
- Solución Ejercicio 1
- Ejercicio 2
- Solución Ejercicio 2
- Funciones
- Interpolado
- Reglas y directivas básicas
- Directivas de control y heredadas
- Evaluación Bloque 3
- Solución Evaluación Bloque 3
- Ejercicio 3
- Solución Ejercicio 3
- Ejercicio 4
- Solución Ejercicio 4
- Ejercicio 5
- Solución Ejercicio 5
- Ejercicio 6
- Solución Ejercicio 6
- Ejercicio 7
- Solución Ejercicio 7
Utilizando como plantilla el código html propuesto al final:
- Crea una nueva carpeta en Visual Studio Code llamada ejercicio-2 y añade el archivo index.html con el código proporcionado.
- Abre en el navegador la ruta del archivo index.html y comprueba que funciona correctamente.
- Crea las carpetas css e img.
- Decide si vas a utilizar Sass o SCSS.
- Crea, dentro del carpeta css, el fichero style.scss (o style.sass, según tu elección, yo a partir de ahora usare SCSS).
- Modifica la configuración de tu IDE o los comandos en la consola para compilar automáticamente el fichero style.scss en el fichero style.css (recuerda que ambos estarán en la misma carpeta y que style.css se creará en la primera compilación).
- Si quieres aprovechar bien el ejercicio, no debes escribir nada en el archivo style.css, todo el código de dicho archivo se compilará a partir del fichero style.scss. Además, no puedes utilizar directivas de tipo @, salvo @import para la fuente de Google.
- Accede a Google Fonts e importa la fuente Nunito en sus variantes light 300, regular 400 y bold 700 dentro del archivo style.scss.
- Enlaza el archivo style.css en tu archivo index.html.
- Modifica tu hoja de estilos para que la página y las fuentes cumplan los siguientes requisitos (intenta utilizar todo lo aprendido hasta ahora para optimizar tu hoja de estilos):
- Ajusta la página a un ancho máximo de 1400px sin márgenes y céntrala en la ventana del navegador
- La fuente en toda la página será Nunito y la alternativa será sans-serif.
- La fuente del cuerpo de la página tendrá un peso de 400 con un tamaño de 1rem.
- La fuente de los titulares (h1 a h3) llevará un peso de 700 y su tamaño será mayor que el cuerpo en cada paso (un 50% más para h3, un 100% mas para h2, un 200% mas para h1)
- En este punto, al refrescar tu página deberías ver los cambios en las fuentes. Si no es así, revisa la configuración y los estilos antes de continuar.
- Modifica tu hoja de estilos para que el header cumpla los siguientes requisitos
- El logo de Sass (que puedes descargar de su página web en svg), debe ir alineado a la izquierda ocupando el 10% del ancho del header.
- El título de la página debe aparecer centrado en el espacio restante del header, y el subtítulo debajo y también centrado.
- Pinchando en la imagen o en el título la página se debe recargar, pero el título no debe parecer un enlace (de hecho, ningún enlace de la página debe parecerlo).
- Resetea los márgenes de los títulos del header.
- Añade al header un color de fondo y un pequeño padding a los cuatro lados.
- Modifica tu hoja de estilos para que el nav cumpla los siguientes requisitos:
- El nav ocupará todo el ancho disponible, tendrá el mismo color de fondo y estará levemente separado del header.
- Los ítems de menú deben estar en línea y centrados en pantalla, sin margin y con un mínimo padding entre ellos.
- Los ítems de menú estarán en mayúsculas, con un tamaño de letra del 110% respecto del cuerpo, un peso de 400 y uno de 700 on hover.
- El color de los ítems y los enlaces será negro, salvo en los enlaces on hover que será rojo.
- Aplica a la section una altura mínima de 20em para separarla y que se diferencie del footer. Ya trabajaremos con ella en el tercer bloque.
- Modifica tu hoja de estilos para que el footer cumpla los siguientes requisitos:
- Las dos secciones del footer (div y p) tendrán el mismo color de fondo y estarán separadas levemente.
- Descárgate los iconos de las redes sociales en svg de ESTA DIRECCIÓN.
- Asócialos con sus correspondientes enlaces en el html.
- Los iconos del footer tendrán un ancho de 3em, estarán centrados y en línea, con una cierta separación entre ellos.
- La letra del párrafo p será un 80% respecto de la del cuerpo.
- Extra: Haz una copia del ejercicio, añádele Bootstrap 4 y crea un menú con sub-niveles y sus estilos necesarios.
Archivo index.html de ejemplo:
Se adjunta una imagen de cómo podría ser la solución a nivel visual:

Publicado el 29 de Mayo de 2023
csscss3sassscsslesspreprocesadores