All solutions

El reto en este desafío de frontend mentor está en el posicionamiento del background con la "wave" u ola que debe agregarse con posiciones absolutas. Pruébalo y crea tu un componente pixel perfect.

En este desafío me parece muy interesante la sección del background:hover cuando te posicionas encima de la imagen porque además de este sombreado que aplicamos debemos posicionar un elemento en la mitad como lo es el icono de un "ojo" con el cual debemos manejar posiciones absolutas y relativas. Muchas veces este es uno de los conceptos más difíciles de entender de HTML y CSS el posicionamiento de elementos absolutos los cuales no pertenecen al flujo del espacio de trabajo. Por ello me parece que se debe prestar atención a esta sección y aprender lo mayor posible de la misma.

Este es otro sencillo componente para continuar nuestro aprendizaje en HTML y CSS, recomiendo mucho que hagas el componente y luego de terminarlo mires el código y pienses, como puedo mejorar, organizar y mitificar mi código? Esto te ayudara a hacer un código más limpio y escalable

Este reto es muy interesante si estás empezando con HTML y CSS y ya quieres dar el paso de empezar a generar diseños con lo que has aprendido, te ayuda a pensar como plantear un diseño responsivo (sencillo) pero es lo que se busca dar los primeros pasos para poco a poco con los retos siguientes ir mejorando ya avanzando

The first thing was to analyze the project to know how the component would be structured semantically. After this, start applying the corresponding styles and at the end add the necessary javascript for the correct operation.

I think the difficulty of this component is to make an organized and reusable html

This challenge allows you to practice the layout of a fairly standard website. I think that a good challenge that I have applied and that frontmentor recommends was to measure the time before starting the project. Before starting the project I set a goal of lasting 2 hours doing the project in its entirety, but in the end I lasted 2.30 hours. I recommend that you do this and measure your times to improve them.

The most complicated part of this challenge seemed to me to be the orderly positioning of the elements such as the background of the main image.

The process that I have followed is to separate into 2 containers: left and right, and then in the desktop version using display flex, separate both containers horizontally with a media query.

By having tags like <details> and <summary> from html it was not necessary to add javascript to the project.

When you see my code, would you advise me something? I'm just starting out and any feedback would be greatly appreciated.