Diferencias

Muestra las diferencias entre dos versiones de la página.

--- clase:daw:diw:1eval:tema02 [2023/09/25 17:04]
admin [Ejercicios]
+++ clase:daw:diw:1eval:tema02 [2023/10/03 13:42]
admin [Estructura de ficheros]
@@ Línea 174: / Línea 174: @@
 <sxh sass>
-  @import "./_boton.scss";
+  @import "./_c-button.scss";
 </sxh>
@@ Línea 395: / Línea 395: @@
         _override.scss
         _reset.scss
+        _typography.scss
     /03_layout
         _cada_uno_de_los_layouts.scss
@@ Línea 426: / Línea 427: @@
 ==== Ejercicio 1 ====
-Haz una página web con 8 imágenes de forma que estén colocadas de la siguiente forma:
+Haz una página web con 8 divs de forma que estén colocados de la siguiente forma:
-|  Imagen 1  |||
+|  div 1  ||||
-|  Imagen 2  |  Imagen 3  ||
+|  div 2  |  div 3  |  div 4  ||
-|  Imagen 2  |  Imagen 5  |  Imagen 2  |
+|  :::  |  :::  |  div 6  |  div 7  |
-|  Imagen 2  | ::: |  Imagen 2  |
+|  div 5  |  :::  | ::: |  div 8  |
 ==== Ejercicio 2 ====
@@ Línea 441: / Línea 442: @@
-==== 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  ^  Color  ^
-|  1  |  #FF0000  |
-|  2  |  #00FF00  |
-|  3  |  #0000FF  |
-|  4  |  #FFFF00  |
-|  5  |  #00FFFF  |
-  * Cada uno de los colores deberá estar en una variable de SASS y al usar usar esas variables.
-  * También deberá haber un fichero "reset.scss" con el código CSS del reset.
-  * Desde SASS se deberá generar un único fichero llamado "main.css".
-==== Ejercicio 4.A ====
 Usando BEM con modificadores, haz el HTML y el CSS de los siguientes botones:
@@ Línea 462: / Línea 448: @@
-==== Ejercicio 4.B ====
+==== Ejercicio 3.B ====
-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.
+{{:clase:daw:diw:1eval:botones_pequenyos.png|}}
+{{:clase:daw:diw:1eval:botones_grandes.png|}}
 Para aumentar o disminuir el tamaño deberás modificar:
@@ Línea 471: / Línea 461: @@
-==== Ejercicio 5.A ====
+==== Ejercicio 4.A ====
 Usando BEM con modificadores, haz el HTML y el CSS de los siguientes badges:
@@ Línea 477: / Línea 467: @@
-==== Ejercicio 5.B ====
+==== Ejercicio 4.B ====
 Modifica el ejercicio anterior de forma que el badge pueda tener un número al estilo de una notificación
 {{:clase:daw:diw:1eval:badges_numerico.png|}}
+==== Ejercicio 5 ====
+Mira la página de [[https://www.caixabank.es/|Caixabank]] y según la metodología de BEM indica:
+  * Los componentes, 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
@@ Línea 620: / Línea 618: @@
-==== Ejercicio 8 ====
+==== Ejercicio 7 ====
 Crear un map con los tamaños de padding
@@ Línea 656: / Línea 654: @@
   ....
-==== Ejercicio 9 ====
+==== Ejercicio 8 ====
 Repite el ejercicio anterior pero ahora con
   * la propiedad ''font-size''
   * La propiedad ''margin''
-==== Ejercicio 10 ====
+==== Ejercicio 9 ====
 Repite el ejercicio anterior pero ahora con los colores del tema 1.
@@ Línea 684: / Línea 682: @@
   * ''g--background-color-principal-1''
   * etc.
-==== Ejercicio 11 ====
-Mira la página de [[https://www.caixabank.es/|Caixabank]] y según la metodología de BEM indica:
-  * Los componentes, elementos y modificadores que hay
-  * 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

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página