@JMBeltranDev
@zhansayatazhibayeva
Submitted
What are you most proud of, and what would you do differently next time?
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
@JMBeltranDev
Posted
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;
}
Marked as helpful
@Stephanie0905
Submitted
@JMBeltranDev
Posted
Arrow button to exit the modal is not well located.
@Ljubo6
Submitted
What are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?
.
What specific areas of your project would you like help with?
.
@JMBeltranDev
Posted
I liked your solution
@hangtime319
Submitted
What are you most proud of, and what would you do differently next time?
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.
@JMBeltranDev
Posted
It seems like a good solution to me.
What are you most proud of, and what would you do differently next time?
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?
@JMBeltranDev
Posted
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>
Marked as helpful
@QuentinPetton
Submitted
@JMBeltranDev
Posted
Very good solution, you just need to load the image according to the size of the screen.
@esurreal
Submitted
What are you most proud of, and what would you do differently next time?
I'm most proud that I was able to use resources available to figure out a solution to the problem.
What challenges did you encounter, and how did you overcome them?
This one was trickier than the last one. I had to use multiple span tags and figure out how to make a table that would look like the design file. I overcame them by looking up examples on stack overflow.
What specific areas of your project would you like help with?
I couldn't get the numbered list to change the color of the numbers without messing something up.
@JMBeltranDev
Posted
You still need to make the responsive design, the good thing is to keep practicing and improve day by day.
@cgyeager
Submitted
What are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?
.
What specific areas of your project would you like help with?
.
@JMBeltranDev
Posted
You can move the CSS code that you have in the HTML to the CSS file, you also missed the hover effect in the links, the important thing is to practice to improve our code.
What are you most proud of, and what would you do differently next time?
I enjoyed trying out a bit of animations for the hover states! It also felt good that I have started feeling a bit more comfortable using flex.
What challenges did you encounter, and how did you overcome them?
I struggled to find some good way to resize the "Learning" chip/button without giving it a fixed width.
What specific areas of your project would you like help with?
I'd like to better understand flex-basis, flex-grow and flex-shrink.
I'd also really like to know if there's a better way than just setting a fixed width for the Learning button. Ideally I'd like that button/chip to grow dynamically based on its content (but not take up the full width as the rest of the content).
@JMBeltranDev
Posted
For "Learning" to use 'width: fit-content' that makes the background color fit the text content, I tried to use 'display:inline-block' but it didn't work.
@CharlieDW
Submitted
@JMBeltranDev
Posted
The style code that is in the HTML should be in the CSS file. Instead of using an h4 you should have used an h1 or an h2. It was not necessary to use media queries.
Marked as helpful
