Diferencias

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

--- clase:daw:diw:1eval:tema02 [2022/10/17 22:11]
admin [Ejercicios]
+++ clase:daw:diw:1eval:tema02 [2023/09/25 08:47]
admin [Ejercicios]
@@ Línea 190: / Línea 190: @@
 Como arquitectura CSS vamos a seguir durante todo el curso una llamada [[http://getbem.com/|BEM]].
+{{:clase:daw:diw:1eval:arquitectura_css.jpg?700|}}
+[[https://platzi.com/tutoriales/1640-frontend-developer-2019/9913-oocss-bem-smacss-itcss-y-atomic-design/|OOCSS, BEM, SMACSS, ITCSS y Atomic Design]]
@@ Línea 350: / Línea 354: @@
   * g--margin-4
   * g--margin-bottom-6
+{{:clase:daw:diw:1eval:globales.jpg|}}
 ----
@@ Línea 684: / Línea 691: @@
   ....
+==== Ejercicio 9 ====
+Repite el ejercicio anterior pero ahora con
+  * la propiedad ''font-size''
+  * La propiedad ''margin''
+==== Ejercicio 10 ====
+Repite el ejercicio anterior pero ahora con los colores del tema 1.
-==== Ejercicio 9 ====
+Para ello deberás crear un map dentro de un map:
+<sxh base>
+$colores:(
+  "principal":("1":#DCEBFE, "2":#BEDBFE, "3":#91C3FD, "4":#61A6FA, "5":#3C83F6, "6":#2463EB, "7":#1D4FD7, "8":#1E3FAE, "9":#1E3B8A)
+  "laternativo":("1":#FEF3C8, "2":#FDE68B, "3":#FCD44F, "4":#FBBD23, "5":#F59F0A, "6":#DB7706, "7":#B35309, "8":#91400D, "9":#76350F)
+  "rojo":.....
+)
+</sxh>
+Las propiedades CSS serán:
+  * ''color''
+  * ''background-color''
+Y al crear los globales tendrán la siguiente forma
+  * ''g--color-rojo-4''
+  * ''g--background-color-principal-1''
+  * etc.
+==== Ejercicio 11 ====
 Mira la página de [[https://www.bankia.es/es/particulares|Bankia Particulares]] y según la metodología de BEM indica:
   * Los componentes, elementos y modificadores que hay
@@ Línea 697: / Línea 733: @@
 Este ejercicio es como hacer el análisis de la página desde el punto de vista de BEM
-==== Ejercicio 10 ====
+==== Ejercicio 12 ====
 Crea una página web que tenga lo siguiente:
@@ Línea 705: / Línea 741: @@
   * Márgenes globales.
   * Que todo se organice según la estructura de ficheros de SASS
+==== Ejercicio 13 ====
+Crea los siguientes Badgets.
+{{:clase:daw:diw:1eval:badgets.png|}}
+==== Ejercicio 14 ====
+Modifica los bagets del ejercicio anterior pero añadiendo a la derecha un circulo que tendrá un número.
+{{:clase:daw:diw:1eval:badgets_numered.png|}}

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página