Diferencias

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

--- clase:daw:diw:1eval:tema02 [2023/09/25 22:29]
admin [Ejercicios]
+++ clase:daw:diw:1eval:tema02 [2023/11/07 11:31] (actual)
admin [Estructura de ficheros]
@@ Línea 174: / Línea 174: @@
 <sxh sass>
-  @import "./_boton.scss";
+  @import "./_c-button.scss";
 </sxh>
@@ Línea 389: / Línea 389: @@
   /scss
      /01_utilities
-         _variables.scss
+         _css-variables.scss
+         _sass-variables.scss
          _functions.scss
          _mixins.scss
@@ Línea 395: / Línea 396: @@
         _override.scss
         _reset.scss
+        _typography.scss
     /03_layout
         _cada_uno_de_los_layouts.scss
@@ Línea 407: / Línea 409: @@
   * /01_utilities
-    * _variables.scss: Variables como por ejemplo los colores o tamaños de margen ,etc.
+    * _css-variables.scss: Variables **css** como por ejemplo los colores o tamaños de margen ,etc.
+    * _sass-variables.scss: Variables de **SASS** como por ejemplo los colores o tamaños de margen ,etc
     * _functions.scss: Funciones de SASS
     * _mixins.scss: Mixins de SASS
@@ Línea 413: / Línea 416: @@
     *  _override.scss: Es para sobreescribir CSS de alguna librería que se use
     * _reset.scss: El reset que usemos
+    * _typography.scss: Cosas relacionadas con la tipografía
   * /03_layout
     * _cada_uno_de_los_layouts.scss: Habrá un fichero por cada Bloque que sea de tipo layout. Por ejemplo ''_l-page.scss''
@@ Línea 426: / Línea 430: @@
 ==== 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 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:
+Usando BEM con modificadores, haz el HTML y el CSS de los siguientes botones:
-^  Imagen  ^  Color  ^
+{{:clase:daw:diw:1eval:botones.png|}}
-|  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 3.B ====
+Modifica el ejercicio anterior de forma que haya botones de mayor y menor tamaño.
-==== Ejercicio 4.A ====
+{{:clase:daw:diw:1eval:botones_pequenyos.png|}}
-Usando BEM con modificadores, haz el HTML y el CSS de los siguientes botones:
-{{:clase:daw:diw:1eval:botones.png|}}
+{{:clase:daw:diw:1eval:botones_grandes.png|}}
-==== Ejercicio 4.B ====
-Modifica el ejercicio anterior de forma que haya botones de mayor y menos tamaño.
 Para aumentar o disminuir el tamaño deberás modificar:
@@ Línea 471: / Línea 464: @@
-==== 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 470: @@
-==== 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
@@ Línea 483: / Línea 476: @@
-==== Ejercicio 6 ====
+==== 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
@@ Línea 492: / Línea 485: @@
-==== Ejercicio 7 ====
+==== Ejercicio 6 ====
 Transforma los siguientes códigos sacados de bootstrap para que siga el estándar de BEM.
@@ Línea 628: / Línea 621: @@
-==== Ejercicio 8 ====
+==== Ejercicio 7 ====
 Crear un map con los tamaños de padding
@@ Línea 664: / Línea 657: @@
   ....
-==== 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 692: / Línea 685: @@
   * ''g--background-color-principal-1''
   * etc.

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página