I'm eager to receive assistance in any aspect that can improve my project. This includes everything from code structure and CSS organization to advanced JavaScript techniques. Advice on enhancing accessibility or usability would also be greatly appreciated. Essentially, any guidance that can make my project more robust and effective would be most welcome.
I welcome any assistance that can enhance my project. This could involve improving code structure, organizing CSS more effectively, or mastering advanced JavaScript techniques. Suggestions for boosting accessibility or usability are also appreciated. In short, any advice that can make my project more robust and efficient would be greatly valued.
I'm eager to receive assistance in any aspect that can improve my project. This includes everything from code structure and CSS organization to advanced JavaScript techniques. Advice on enhancing accessibility or usability would also be greatly appreciated. Essentially, any guidance that can make my project more robust and effective would be most welcome.
I'm open to receiving help in any area where I can improve my project. This could range from code structure and CSS organization to advanced JavaScript techniques. Any advice on enhancing accessibility or usability would also be welcome. In essence, any guidance that can help me make my project more robust and effective would be greatly appreciated.
I'm open to receiving help in any area where I can improve my project. This could range from code structure and CSS organization to advanced JavaScript techniques. Any advice on enhancing accessibility or usability would also be welcome. In essence, any guidance that can help me make my project more robust and effective would be greatly appreciated.
I'm open to receiving help in any area where I can improve my project. This could range from code structure and CSS organization to advanced JavaScript techniques. Any advice on enhancing accessibility or usability would also be welcome. In essence, any guidance that can help me make my project more robust and effective would be greatly appreciated.
Did faster than other projects
What challenges did you encounter, and how did you overcome them?easy project in comparison to other projects
What specific areas of your project would you like help with?Any kind of feedback would be helpful
In the hover you can use <outline> instead of <border> so that the card does not resize
.luxury button:hover{
background-color: hsl(179, 100%, 13%);
color: #fff;
border: 1px solid #fff;
}
.luxury button:hover{
background-color: hsl(179, 100%, 13%);
color: #fff;
outline: 1px solid #fff;
}
Arrow button to exit the modal is not well located.
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
In this project I learned a lot about grid layout. It seems like it's an easier layout to adjust than flexbox, but it's limited. I didn't have many difficulties applying responsiveness.
What challenges did you encounter, and how did you overcome them?I found few difficulties applying grid layout. But next time I will use other grid layout resources so I don't need to use media queries.
What specific areas of your project would you like help with?Suggestions on how to simplify the grid layout.
Overall this was a fairly straight forward build.
What challenges did you encounter, and how did you overcome them?I am still struggling with getting the spacing just right between elements with padding and margins. I feel like there should be an easier way to do it. I also find that the text doesn't look exactly like the design file, even though I put in the same font and properties that are in the design. I am not sure why this is.
What specific areas of your project would you like help with?Can anyone provide tips on how to format/layout the text elements? Is there a better option than what I did? Also, how are my media queries? Anything I can improve there?
Note that to use different image sizes, you load them simultaneously, and in the media query, you use a display:none. This implies that if you open the page on a mobile device, the desktop-sized image is still loaded, which has an impact on performance.
The following code is an example of how the image would be loaded depending on the screen size.
<picture class="product__img"> <source media="(min-width:600px)" srcset="./images/image-product-desktop.jpg"> <img src="./images/image-product-mobile.jpg" alt="perfume imagen"> </picture>
Very good solution, you just need to load the image according to the size of the screen.
