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 Última revisión Ambos lados, revisión siguiente | ||
clase:daw:diw:1eval:tema02 [2023/09/25 17:04] admin [Ejercicios] |
clase:daw:diw:1eval:tema02 [2023/11/07 11:31] admin [Estructura de ficheros] |
||
---|---|---|---|
Línea 174: | Línea 174: | ||
<sxh sass> | <sxh sass> | ||
- | @import "./_boton.scss"; | + | @import "./_c-button.scss"; |
</ | </ | ||
Línea 389: | Línea 389: | ||
/scss | /scss | ||
/ | / | ||
- | _variables.scss | + | _css-variables.scss |
+ | | ||
| | ||
| | ||
Línea 395: | Línea 396: | ||
_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 407: | Línea 409: | ||
* / | * / | ||
- | * _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 413: | Línea 416: | ||
* _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 426: | Línea 430: | ||
==== Ejercicio 1 ==== | ==== Ejercicio 1 ==== | ||
- | Haz una página web con 8 imágenes | + | Haz una página web con 8 divs de forma que estén |
- | | | + | | |
- | | | + | | |
- | | | + | | |
- | | | + | | |
==== Ejercicio 2 ==== | ==== Ejercicio 2 ==== | ||
Línea 441: | Línea 445: | ||
- | ==== Ejercicio 3 ==== | + | ==== Ejercicio 3.A ==== |
- | 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 | + | |
- | | 1 | # | + | |
- | | 2 | # | + | |
- | | 3 | # | + | |
- | | 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 4.A ==== | + | |
Usando BEM con modificadores, | Usando BEM con modificadores, | ||
Línea 462: | Línea 451: | ||
- | ==== Ejercicio | + | ==== Ejercicio |
- | Modifica el ejercicio anterior de forma que haya botones de mayor y menos tamaño. | + | Modifica el ejercicio anterior de forma que haya botones de mayor y menor tamaño. |
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
Para aumentar o disminuir el tamaño deberás modificar: | Para aumentar o disminuir el tamaño deberás modificar: | ||
Línea 471: | Línea 464: | ||
- | ==== Ejercicio | + | ==== Ejercicio |
Usando BEM con modificadores, | Usando BEM con modificadores, | ||
Línea 477: | Línea 470: | ||
- | ==== Ejercicio | + | ==== Ejercicio |
Modifica el ejercicio anterior de forma que el badge pueda tener un número al estilo de una notificación | Modifica el ejercicio anterior de forma que el badge pueda tener un número al estilo de una notificación | ||
{{: | {{: | ||
+ | |||
+ | ==== Ejercicio 5 ==== | ||
+ | Mira la página de [[https:// | ||
+ | * Los componentes, | ||
+ | |||
+ | Indica todas las clases CSS que deberia haber para todos los Bloques, Elementos y Modificadores | ||
+ | |||
+ | Este ejercicio es como hacer el análisis de la página desde el punto de vista de BEM | ||
Línea 620: | Línea 621: | ||
- | ==== Ejercicio | + | ==== Ejercicio |
Crear un map con los tamaños de padding | Crear un map con los tamaños de padding | ||
Línea 656: | Línea 657: | ||
.... | .... | ||
- | ==== Ejercicio | + | ==== Ejercicio |
Repite el ejercicio anterior pero ahora con | Repite el ejercicio anterior pero ahora con | ||
* la propiedad '' | * la propiedad '' | ||
* La propiedad '' | * La propiedad '' | ||
- | ==== Ejercicio | + | ==== Ejercicio |
Repite el ejercicio anterior pero ahora con los colores del tema 1. | Repite el ejercicio anterior pero ahora con los colores del tema 1. | ||
Línea 684: | Línea 685: | ||
* '' | * '' | ||
* etc. | * etc. | ||
- | |||
- | |||
- | |||
- | ==== Ejercicio 11 ==== | ||
- | Mira la página de [[https:// | ||
- | * Los componentes, | ||
- | * Los Layouts, elementos y modificadores que hay | ||
- | |||
- | Indica todas las clases CSS que deberia haber para todos los Bloques, Elementos y Modificadores | ||
- | |||
- | Este ejercicio es como hacer el análisis de la página desde el punto de vista de BEM | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||