blastrobot/instagrampost

Proactive Software Developer, coming from Tenerife 🏝 based in Berlin at the moment.

Technologies I've been working with:

Experimenting with:

Connect with me:

Vibing to:

instagrampost's Issues

Comentarios sobre el ejercicio

Hola Carlos,

✔ Bastante bien este ejercicio. Has hecho exactamente lo que se pedía y además has usado flexbox para alinear los elementos, así que genial.

👉 Comentarios / Mejoras:

• En styles.css esto que has puesto no hace falta:

#contenedor-header .options {
    position: relative; left: 63%;
    margin-top: 5%;
    margin-bottom: 5%;
}

1. Os aconsejo que por ahora no uséis mucho la propiedad position, ya que puede confundir bastante y suele aplicarse para cosas muy concretas.
2. En tu código, el "padre" del div .options (línea 24) sería #contenedor-header (línea 16), el cual ya tiene aplicada la propiedad display: flex. Cuando aplicas esta propiedad, estás indicando que quieres que todos los "hijos" (es decir, los elementos que están directamente debajo) se alineen siguiendo la lógica de flex. Por lo tanto, bastaría con añadir la propiedad justify-content: space-between al padre para que sus hijos se alineen a los extremos sin necesidad de aplicar propiedades adicionales como position, left, etc... De hecho, toda esta teoría que te cuento la has aplicado en los iconos que hay debajo de la imagen, por lo que debes seguir la misma lógica.
3. Para los iconos de debajo de la imagen tienes el div .alineado-derecha-izq al que le has asignado este CSS:

.alineado-derecha-izq{
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

Esto es correctísimo y por eso te he puesto en el punto 2 que lo hagas igual, ya que estás habilitando flexbox y además le estás diciendo que los hijos se alineen horizontalmente a los extremos con justify-content: space-between. Debido a esto, no necesitas poner esto:

.alineado-izq{
    justify-content: start;
}
.alineado-dcha{
    justify-content: end;
}

ya que son propiedades que no van a tener ningún efecto. Primero, porque se alinearán en base a .alineado-derecha-izq, y segundo porque la propiedad justify-content solo se aplica a elementos que tengan display: flex, y en este caso .alineado-izq y .alineado-dcha tienen asignado automáticamente display: block. Por lo tanto, esta parte no tendría sentido para conseguir lo que queremos.

Te apruebo el ejercicio pero te animo a que lo corrijas aplicando todo lo comentado para dejarlo perfecto. Si lo haces, avísame y vuelvo a echarle un vistazo sin problemas.

Puedes leer más sobre flexbox aquí: https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

☝ Consejo: Siempre recomiendo dedicar un tiempo (el mínimo) a cada repositorio de GitHub para hacerlo más vistoso. Es posible que en algún momento alguna persona / empresa entre a verlo y ayuda bastante tener un README.md personalizado que describa brevemente el ejercicio, o que el repositorio tenga una descripción, etc... Es recomendable hacerlo desde el principio porque luego raramente vuelven a editarse. Igualmente veo que ya vas personalizando tu GitHub, así que te animo a seguir.