"Any feedback is welcome! I tried to create as many components as possible to reuse them separately and make the main code cleaner. I'm not sure if the comments should be ordered based on their score.
Since the 'modal' is used not only for images but also for viewing the menu on smartphones, I wasn't sure whether to create a separate modal component and if it would work correctly, so I created a modal section within each component separately to avoid malfunction and to avoid creating another UseContext file.
I don't know yet if there's maybe another way to do it or if this was just a long code challenge. I tried to make it shorter, but it crashed every time I tried.
Hola! necesito ayuda con JS, no se que es lo que no estoy haciendo de forma correcta para que se muestro los iconos de compartir 😭😭😞 también me falta optimizar el código para Mobile pero esto de que no se muestren los iconos me tiene algo frustrado por eso decidí subirlo y pedir ayuda ala comunidad. Gracias ...totales!!!
Hola! Estuve revisando tu código y encontré el problema. En tu hoja de estilos CSS, la clase icons tiene display: flex por defecto, pero debería ser display: none. De esta manera, al apretar el botón se agregará la clase .icons__compartir-activo y el display cambiará a flex.
También noté que en tu hoja de CSS estás llamando a .icons .icons__compartir-activo, lo cual hace que el navegador entienda que .icons__compartir-activo es un hijo de .icons. Prueba dejando el CSS solo con:
.icons__compartir-activo {
display: flex;
}
#What would I do differently?
In my next project, I will use Bootstrap.
What challenges did you encounter, and how did you overcome them?Hi! I don’t have much practice giving feedback, I’m quite new at this, but I was looking at your page with the browser’s element inspector. It’s very useful when you want to discover what’s causing your page to have horizontal scroll. To see it yourself, open your page and right-click anywhere; you’ll see the ‘Inspect’ option. There, you’ll see all your code on one side, and as you hover over it, each area will be highlighted in a different color. This way, you can see which part is using more space, margin, padding, etc. In this case, the ‘convo’ section is taking up more than 100% of the page. Hope this helps!
Me orgulho de ter conseguido concluir o desafio e eu usaria novas tecnologias na próxima vez.
What challenges did you encounter, and how did you overcome them?Conseguir alinhar a imagem principal no centro, busquei mecanismos e fiz pesquisas de como eu poderia resolver aquele problema e consegui resolver ele com sucesso.
What specific areas of your project would you like help with?Na parte do design, já que não tenho muita experiencia nisso.
Wow 😮, you did a great job, even though it’s not the original design from the challenge. Make sure to try to replicate the original design so that you can practice how it would be to work for a client. In some cases, clients, designers, or teams will provide you with a mockup of how they want the web page to look, and you should follow it precisely if you want to do good work. It’s great to propose design changes, but always ensure you have the final approval from the client—unless you’re 100% in charge of the project!
Good job. Make sure to consider the order of files within your repository. For instance, place your CSS stylesheet inside a folder named ‘Styles,’ and ensure that images and other files are within a folder called ‘Assets.’ If you need further clarification, you can refer to this page https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files.
I hope it's helpful! 😊
Your images cannot be seen ☹️I checked your HTML code and in each image line, you missed adding a dot. Your code is like this: ‘/assets/images…’ and it should be like this: ‘./assets/images…’. I hope this helps!
It took too long, so next time I'll just implement the parts in the challenge without any additional work.
What challenges did you encounter, and how did you overcome them?The task of making the a tag respond to the entire card.
.card a.link::after {
position: absolute;
inset: 0;
z-index: 1 !important;
content: "";
}
Size does not match design file.
As a result, the inline-flex parent was 3px larger.
Solved as follows:
.card .author { display: inline-flex; vertical-align: middle; }
Awesome! It looks exactly like the original image. I saw your code and you used the h2 tag, but there is no h1. If I’m correct, those tags should be used in a sequential manner to avoid bad practices.
Hope this article helps you :)
https://medium.com/swlh/html-heading-tags-best-practices-78a85f63df47
