Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
clase:daw:diw:1eval:tema02 [2022/10/06 19:49] admin [Ejercicios] |
clase:daw:diw:1eval:tema02 [2024/05/17 18:43] admin [Introducción al Layout con CSS] |
||
---|---|---|---|
Línea 5: | Línea 5: | ||
Mas información: | Mas información: | ||
- | * [[https://alligator.io/css/css-grid-layout-grid-areas/ | + | * [[https://css-tricks.com/almanac/properties/ |
+ | * [[https:// | ||
<sxh html> | <sxh html> | ||
Línea 174: | Línea 175: | ||
<sxh sass> | <sxh sass> | ||
- | @import "./_boton.scss"; | + | @import "./_c-button.scss"; |
</ | </ | ||
Línea 190: | Línea 191: | ||
Como arquitectura CSS vamos a seguir durante todo el curso una llamada [[http:// | Como arquitectura CSS vamos a seguir durante todo el curso una llamada [[http:// | ||
+ | |||
+ | |||
+ | {{: | ||
+ | [[https:// | ||
Línea 350: | Línea 355: | ||
* g--margin-4 | * g--margin-4 | ||
* g--margin-bottom-6 | * g--margin-bottom-6 | ||
+ | |||
+ | {{: | ||
+ | |||
---- | ---- | ||
Línea 382: | Línea 390: | ||
/scss | /scss | ||
/ | / | ||
- | _variables.scss | + | _css-variables.scss |
+ | | ||
| | ||
| | ||
Línea 388: | Línea 397: | ||
_override.scss | _override.scss | ||
_reset.scss | _reset.scss | ||
+ | _typography.scss | ||
/03_layout | /03_layout | ||
_cada_uno_de_los_layouts.scss | _cada_uno_de_los_layouts.scss | ||
Línea 400: | Línea 410: | ||
* / | * / | ||
- | * _variables.scss: Variables como por ejemplo los colores o tamaños de margen ,etc. | + | * _css-variables.scss: Variables |
+ | * _sass-variables.scss: | ||
* _functions.scss: | * _functions.scss: | ||
* _mixins.scss: | * _mixins.scss: | ||
Línea 406: | Línea 417: | ||
* _override.scss: | * _override.scss: | ||
* _reset.scss: | * _reset.scss: | ||
+ | * _typography.scss: | ||
* /03_layout | * /03_layout | ||
* _cada_uno_de_los_layouts.scss: | * _cada_uno_de_los_layouts.scss: | ||
Línea 416: | Línea 428: | ||
* main.scss: Aquí se agrupa todo el código de SASS y es el único fichero que se transforma en CSS. | * main.scss: Aquí se agrupa todo el código de SASS y es el único fichero que se transforma en CSS. | ||
===== Ejercicios ===== | ===== Ejercicios ===== | ||
- | |||
==== Ejercicio 1 ==== | ==== Ejercicio 1 ==== | ||
- | Haz una página web con 8 imágenes de forma que estén colocadas de la siguiente forma: | ||
- | | Imagen 1 ||| | + | Haz una página web con 8 divs de forma que estén colocados de la siguiente forma: |
- | | Imagen 2 | Imagen 3 || | + | |
- | | Imagen 2 | Imagen 5 | Imagen 2 | | + | |
- | | Imagen 2 | ::: | Imagen 2 | | + | |
+ | | div 1 |||| | ||
+ | | div 2 | div 3 | div 4 || | ||
+ | | ::: | ::: | div 6 | div 7 | | ||
+ | | div 5 | ::: | ::: | div 8 | | ||
==== Ejercicio 2 ==== | ==== Ejercicio 2 ==== | ||
Línea 434: | Línea 445: | ||
Comprueba también si hay diferencias entre usar Chrome, Edge o Firefox al usar o no el '' | Comprueba también si hay diferencias entre usar Chrome, Edge o Firefox al usar o no el '' | ||
- | ==== Ejercicio 3 ==== | ||
- | Modifica la página HTML del ejercicio 1 y haz que con CSS cada imagen tenga un borde. El color del borde será el siguiente: | ||
- | ^ Imagen | + | ==== Ejercicio |
- | | 1 | # | + | Usando BEM con modificadores, |
- | | 2 | # | + | |
- | | | + | |
- | | 4 | # | + | |
- | | 5 | # | + | |
- | * Cada uno de los colores deberá estar en una variable de SASS y al usar usar esas variables. | + | {{: |
- | * También deberá haber un fichero " | + | |
- | * Desde SASS se deberá generar un único fichero llamado " | + | |
- | ==== Ejercicio | + | ==== Ejercicio |
- | Imagina un botón en una aplicación Java. Ese botón tiene muchas propiedades visuales como el tamaño | + | Modifica |
- | * Indica otra serie de propiedades visuales y sus posibles valores. | + | {{: |
- | * Indica que valores tendrían las propiedades por defecto. | + | |
- | ==== Ejercicio 4.B ==== | + | {{:clase: |
- | Mira el componente [[https:// | + | |
+ | Para aumentar o disminuir el tamaño deberás modificar: | ||
+ | * El tamaño de fuente | ||
+ | * El padding | ||
- | * Indica los elementos HTML que puede componer el componente " | ||
- | * Indica varias propiedades visuales que podría tener y sus posibles valores pero especifica cada propiedad para que elemento HTML se aplicaría. | ||
- | * Indica que valores tendrían las propiedades por defecto. | ||
- | ==== Ejercicio 4.C ==== | + | ==== Ejercicio 4.A ==== |
- | Dado el ejercicio anterior, crea las clases CSS que implementen las propiedades | + | Usando BEM con modificadores, haz el HTML y el CSS de los siguientes badges: |
- | ==== Ejercicio 4.D ==== | + | {{: |
- | Dado el ejercicio anterior, imagina una nomenclatura para estandarizar los nombres | + | |
+ | |||
+ | ==== Ejercicio 4.B ==== | ||
+ | Modifica | ||
+ | |||
+ | {{: | ||
- | ==== Ejercicio 4.E ==== | ||
- | Dado el ejercicio anterior, modifica el nombre de tus clases CSS para que sigan la nomenclatura de BEM | ||
==== Ejercicio 5 ==== | ==== Ejercicio 5 ==== | ||
- | * Crea una clase CSS llamada '' | + | Mira la página de [[https:// |
- | * Crea una clase CSS llamada '' | + | * Los componentes, |
- | * Crea una clase CSS llamada '' | + | |
- | * Crea una clase CSS llamada '' | + | |
- | * Crea una clase CSS llamada '' | + | |
+ | Indica todas las clases CSS que deberia haber para todos los Bloques, Elementos y Modificadores | ||
- | Crea en una página | + | Este ejercicio es como hacer el análisis de la página |
- | * Botón '' | + | |
- | * Botón '' | + | |
- | * Botón '' | + | |
- | * Botón '' | + | |
- | * Botón '' | + | |
- | * Botón '' | + | |
==== Ejercicio 6 ==== | ==== Ejercicio 6 ==== | ||
- | Transforma los siguientes códigos para que siga el estándar de BEM. | + | Transforma los siguientes códigos |
<sxh html> | <sxh html> | ||
Línea 627: | Línea 622: | ||
+ | ==== Ejercicio 7 ==== | ||
+ | Crear un map con los tamaños de padding | ||
+ | $padding-values { | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | ...... | ||
+ | } | ||
+ | | ||
+ | Pero usando los valores del array de paddings del tema 1. | ||
+ | Crea los siguientes globales | ||
+ | g--padding-0 | ||
+ | g--padding-1 | ||
+ | .... | ||
+ | g--padding-left-0 | ||
+ | g--padding-left-1 | ||
+ | .... | ||
+ | g--padding-right-0 | ||
+ | g--padding-right-1 | ||
+ | .... | ||
+ | g--padding-top-0 | ||
+ | g--padding-top-1 | ||
+ | .... | ||
+ | g--padding-bottom-0 | ||
+ | g--padding-bottom-1 | ||
+ | .... | ||
+ | g--padding-vertical-0 | ||
+ | g--padding-vertical-1 | ||
+ | .... | ||
+ | g--padding-horizontal-0 | ||
+ | g--padding-horizontal-1 | ||
+ | .... | ||
- | ==== Ejercicio | + | ==== Ejercicio |
- | Mira la página de [[https:// | + | Repite el ejercicio anterior pero ahora con |
- | * Los componentes, | + | * la propiedad '' |
- | * Los Layouts, elementos y modificadores que hay | + | * La propiedad '' |
- | * Los modificadores globales que hay | + | |
- | * Las variables que usarías | + | |
- | Indica todas las clases CSS que deberia haber para todos los Bloques, Elementos y Modificadores | + | ==== Ejercicio 9 ==== |
+ | Repite el ejercicio anterior pero ahora con los colores del tema 1. | ||
- | Este ejercicio es como hacer el análisis | + | Para ello deberás crear un map dentro |
- | ==== Ejercicio | + | <sxh base> |
- | Crea una página web que tenga lo siguiente: | + | $colores: |
+ | " | ||
+ | " | ||
+ | " | ||
+ | ) | ||
+ | </ | ||
+ | |||
+ | Las propiedades CSS serán: | ||
+ | * '' | ||
+ | * '' | ||
- | * 3 componentes | ||
- | * 2 Layouts | ||
- | * Variables | ||
- | * Márgenes globales. | ||
- | * Que todo se organice según la estructura de ficheros de SASS | ||
+ | Y al crear los globales tendrán la siguiente forma | ||
+ | * '' | ||
+ | * '' | ||
+ | * etc. | ||