Algunas consideraciones

Muy buen trabajo @AndreaFerreiro !!!

Aquí tienes unos consejos para mejorar tu ejercicio:

[x] HTML > ATRIBUTOS: Todos los a o img que tengan interactividad deben tener el atributo title.
[x] HTML > HAMBURGUESA: El menú de la hamburguesa debe tener un nav.
[x] HTML > HERO: El texto del título del hero debe ser: “Anonymous Proxy” (con la primera letra en mayúsculas y el resto en minúsculas, pero luego cambia a mayúsculas con la propiedad text-transform).
[x] HTML > MÓDULO LOOKING: Debe haber un elemento con el texto "Looking through a window" (con la primera letra en mayúsculas y el resto en minúsculas, pero luego cambia a mayúsculas con la propiedad text-transform).
[x] HTML > MÓDULO LOOKING: Debe haber un párrafo con el texto "Donec accumsan..." (fíjate en las letras).
[x] HTML > MÓDULO 3 REASON: Debe haber un a o un button con el texto "More reasons".
[x] HTML > MÓDULO 3 REASON: El elemento <button> se ha quedado fuera del enlace <a>.
[x] HTML > FOOTER: Debe haber un a con el texto "Articles".
[x] HTML > FOOTER: Debe haber un a con el texto "Books".
[x] HTML > FOOTER: Debe haber un a con el texto "Events".
[x] HTML > FOOTER: Debe haber un a con el texto "Reasons".
[x] HTML > FOOTER: Debe haber un a con el texto "Tips".
[x] HTML > FOOTER: Debe haber un a con el texto "Twitter".
[x] HTML > FOOTER: Debe haber un a con el texto "Instagram".
[x] HTML > FOOTER: Debe haber un a con el texto "Mastodon.social".
[x] HTML > FOOTER: Necesitamos una o dos etiquetas nav dentro del footer.
[x] HTML > FOOTER: Necesitamos dos ul dentro de nav.
[ ] CSS > CLASES: No uses las clases de Font Awesome para dar estilos a tus elementos (si quieres cambiar de iconos, se te estropea la maquetación)
[x] CSS > FOOTER: El tipo de fuente del footer no parece el correcto.
[ ] CSS > INTERACCIÓN: Intenta usar alguna transición CSS.
[ ] CSS > INTERACCIÓN: Intenta usar alguna animación CSS para llamar la atención de la usuaria.

Es posible que cuando corrijas uno de estos puntos, otros se corrijan solos, ya que unos dependen de otros.

Y recuerda algo muy importante:

Escribe tu código en inglés.
Escribe todos los ficheros y carpetas en inglés.
Los commits también tienen que ser en inglés, empezando por un verbo en infinitivo.

Ánimo y si tienes cualquier duda avísame!!!

Con cada mejora que hagas, márcala como completada en este issue y su súbela a este repo.

Hola Ivan!!

Me acaba de llegar el correo, no se si es que me lo enviaste ahora o tardó por algún problema. De todas formas me pondré a repasar los puntos que me dices.

Los enlaces del footer creo recordar que los puse todos pero ahora de memoria tampoco quiero meter la pata.

Los puntos que pones abajo en “recuerda” también son para revisar? Porque al menos que me quedase algo atrás intenté hacer todo mi código en inglés.

Muchas gracias, nos vemos mañana!!

El El lun, 22 may 2023 a las 20:13, Iván Garrido (profesor) < @.***> escribió:

Muy buen trabajo @AndreaFerreiro https://github.com/AndreaFerreiro !!!

Aquí tienes unos consejos para mejorar tu ejercicio:

HTML > ATRIBUTOS: Todos los a o img que tengan interactividad deben tener el atributo title.

HTML > HAMBURGUESA: El menú de la hamburguesa debe tener un nav.

HTML > HERO: El texto del título del hero debe ser: “Anonymous Proxy” (con la primera letra en mayúsculas y el resto en minúsculas, pero luego cambia a mayúsculas con la propiedad text-transform).

HTML > MÓDULO LOOKING: Debe haber un elemento con el texto "Looking through a window" (con la primera letra en mayúsculas y el resto en minúsculas, pero luego cambia a mayúsculas con la propiedad text-transform).

HTML > MÓDULO LOOKING: Debe haber un párrafo con el texto "Donec accumsan..." (fíjate en las letras).

HTML > MÓDULO 3 REASON: Debe haber un a o un button con el texto "More reasons".

HTML > MÓDULO 3 REASON: El elemento

HTML > FOOTER: Debe haber un a con el texto "Articles".

HTML > FOOTER: Debe haber un a con el texto "Books".

HTML > FOOTER: Debe haber un a con el texto "Events".

HTML > FOOTER: Debe haber un a con el texto "Reasons".

HTML > FOOTER: Debe haber un a con el texto "Tips".

HTML > FOOTER: Debe haber un a con el texto "Twitter".

HTML > FOOTER: Debe haber un a con el texto "Instagram".

HTML > FOOTER: Debe haber un a con el texto "Mastodon.social".

HTML > FOOTER: Necesitamos una o dos etiquetas nav dentro del footer.

HTML > FOOTER: Necesitamos dos ul dentro de nav.

CSS > CLASES: No uses las clases de Font Awesome para dar estilos a tus elementos (si quieres cambiar de iconos, se te estropea la maquetación)

CSS > FOOTER: El tipo de fuente del footer no parece el correcto.

CSS > INTERACCIÓN: Intenta usar alguna transición CSS.

CSS > INTERACCIÓN: Intenta usar alguna animación CSS para llamar la atención de la usuaria.

Es posible que cuando corrijas uno de estos puntos, otros se corrijan solos, ya que unos dependen de otros.

Y recuerda algo muy importante:

Escribe tu código en inglés.

Escribe todos los ficheros y carpetas en inglés.

Los commits también tienen que ser en inglés, empezando por un verbo en infinitivo.

Ánimo y si tienes cualquier duda avísame!!!

Con cada mejora que hagas, márcala como completada en este issue y su súbela a este repo.

— Reply to this email directly, view it on GitHub https://github.com/Adalab/modulo-1-evaluacion-final-AndreaFerreiro/issues/1, or unsubscribe https://github.com/notifications/unsubscribe-auth/A7NJUMKO3OPTPKT4T35N543XHOUC3ANCNFSM6AAAAAAYKZLNKU . You are receiving this because you were mentioned.Message ID: @.***>

Hola Andrea!

Nada, son una serie de notas que me apunté de tu código por si las quieres revisar. ¡Pero no hace falta que las revises ahora! Lo puedes dejar para cuando finalice el curso, para repasar HTML.

Los enleces, así como los títulos, lo que he visto es que es mejor escribirlos normal, sin que esté todo en mayúsculas ("Looking through a window", "Articles", "Books", ...) y luego con CSS los cambiamos (text-transform: uppercase o text-transform: capitalize).
Los puntos de recuerda es solo un "recuerda". Efectivamente, lo tienes todo en inglés.

Un saludico!

Hola de nuevo!! Estoy revisando las anotaciones que me pusiste y tengo alguna duda:

En los textos del hero o los títulos de las secciones que me dices que los tengo que transformar mediante css, ya los tenía así. La única diferencia es que tenía todo el texto escrito en minúsculas. No valdría escribiendolo asi? Tendría que ser obligatoriamente con la primera en mayúsculas desde el html?

2.Cuando me dices que no use las clases de font awesome para dar estilos a los iconos no sé a que parte te refieres, porque en los iconos del footer no le he dado estilos directamente al icono, si no a su contenedor, y en el hero le he puesto yo la clase "flecha" sobre la que he aplicado los estilos.

3.Las transiciones de css a las que te refieres no son las de hover?

A ver si tienes un segundillo para verlo, muchas gracias!!

Hola!!!

Claro! Intento explicarlas un poco mejor:

Los textos de los títulos, o los textos de los elementos en general, tienes que estar escritos como si fuese una frase: es decir, empezando por una letra mayúscula y el resto en minúsculas (salvo los nombres propios). Por ejemplo, en el <h1> hay que poner Anonymous proxy y luego lo pasaremos a todas mayúsculas con text-transform: uppercase;. O "Insomnia tips" (fíjate que no lo tienes bien escrito) con la "t" en minúscula pero la "I" en mayúsculas y luego lo mostramos como en el diseño con text-transform: capitalize;.
Me pareció que en los estilos del header https://github.com/Adalab/modulo-1-evaluacion-final-AndreaFerreiro/blob/8f6489cf507b5bb8c48f3cd9918a4a434d19b084/src/scss/layout/_header.scss#L10 tienes un estilo puesto con las clases de Font-Awesome. Si cambias el icono (en vez de barras, una tuerca/engranaje), se dejan de aplicar tus estilos. Tampoco está bien usar estilos en línea en el HTML https://github.com/Adalab/modulo-1-evaluacion-final-AndreaFerreiro/blob/8f6489cf507b5bb8c48f3cd9918a4a434d19b084/src/html/partials/header.html#LL2C86-L2C86 porque en el HTML tiene que estar solo el contenido y los estilos/apariencia en CSS.
Las transiciones no son solamente poner la pseudo-clase :hover. Además hay que poner las propiedes transition-property y transition-duration para hacer que se pase de un estilo a otro "suavemente". En tu caso, podríamos poner esas propiedades al botón con la clase section2__buttom quedando los estilos de ese botón así:
```
.section2__buttom {
transition-property: background-color;
transition-duration: 1s;
background-color: #f26002;
border-radius: 30px;
width: 150px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-transform: capitalize;
font-size: 20px;
font-family: 'Roboto', sans-serif;
line-height: 45px;
padding: 0 10px;
}
```
De esta forma, el cambio del background-color del color #f26002 al color #8ccbea cuando tiene el hover le decimos que sea suave y dure 1 segundo la transicion de uno a otro.

Espero haberte ayudado!

AndreaFerreiro / modulo-1-evaluacion-final-AndreaFerreiro

Algunas consideraciones #1