@luciaguerra
Submitted
@itsdevdeepak
@luciaguerra
Submitted
@itsdevdeepak
Posted
Hello lucy, how are you? I love the outcome of your project, however I have some advice for you:
Instead of manually switching between different image elements with media query and styling both of them, I think you should use native <picture> element with media attribute or you could you srcset attribute on img element.
I hope it's useful. and yeah keep putting great effort.
Marked as helpful
@JS-Law
Submitted
I found the responsive breakpoints to be the most challenging. Using two different pictures to be displayed for one element was a hurdle but I knew I had to learn how to use media queries.
I would love some feedback if anyone has any! I'm always trying to grow and develop my skills in a professional way.
@itsdevdeepak
Posted
Hello Jeffrey, how are you? Welcome to the community! great effort on your project's.
I've few tips for you:
.image_container {
...
}
.image_container img{
display: block; /* use block element */
width: 100%; /* take entire with of container*/
height: auto;
object-fit: cover; /* if image is overflow use it as cover */
object-position: center; /* position overflow image in center */
}
Learn more about responsive image;
hope you find this feedback helpful and yeah keep putting great effort.
Marked as helpful
@BufferTime
Submitted
How do the given widths work? Where do I put them?
The given widths are something like 1440px for Desktop, and 400px (?) for Mobile. I don't have any background regarding accessibility yet so I don't understand it. I just saw similar questions here and a Youtube video but I still don't understand it. Does anyone know what is that for so I could research more about it?
@itsdevdeepak
Posted
If your talking about sizes that is in the style guide, then they are just screen sizes that they have taken screenshot of, you don't have to worry about them too much.
Just use these screen sizes to match your site with the design in the responsive mode.
and hey welcome to the community.
@Genesys-jr
Submitted
I don't know how to go about the error states if a valid email is not entered. I need a feedback about it
@itsdevdeepak
Posted
There are basally 3 patters to handle error states.
You could use css class and add/remove it depending on your validation or you could also use ternary operator to hide or unhide the element. for validation use you could use regex or manual validation.
you can read more from this article
If you have any questions feel free to leave below.
@ashwanipydev
Submitted
"Review my code and suggest improvements to apply them to a real-world project. I am a newbie in this field. Please help me out, and criticism is also welcome. 😊"
@itsdevdeepak
Posted
Hey Ashwani, how you doing ?
Good job on completing the challenge. It looks like you were having trouble styling background pattern. you can solve the issue by using background image with background color.
background-image: url(...);
background-color: #skyblue; /* yes you can use both at the same time */
background-size: 100% 50%; /* to make pattern always stays in the center, by manually setting width and height */
You could also pseudo classes to set this separately so its doesn't bother with your other important styles as its just for decoration.
hope you find my feedback helpful and also keep you the good stuff.
Marked as helpful
@Rennan20
Submitted
That's the coolest thing I have done until now! I utilized the best technologies I know, such as React and Next. The most challenging part was implementing Redux to handle the cart functionalities and make it dynamic since users were expected to add multiple items to the cart at once. Nevertheless, I am pleased with the results. I hope you all like it too! Feel free to check the repository for feedback; I always believe there's room to make the code cleaner.
@itsdevdeepak
Posted
Hey Rennan, How you doing ?
Love your Solution, but i think you can improve it further by looking it from accessibility side point as well. Right now your buttons for price control has less click area which makes it harder to click, you can fix this adding padding (not recommended) or using button instead of img tag. If your currently learning Next js or don't have time, I recommend you to read any article about accessibility, it only takes less the 30min and after you done with learning main technologies you could learn deeper about accessibility.
Hope you find it helpful and also keep up the good work.
@its-rkravi
Submitted
@itsdevdeepak
Posted
Hello Rahul, How you doing ?
I've love your solution, but i think you can improve it further but not making font size smaller for smaller screen size as it makes it harder to read the text, we generally make text larger for smaller screen sizes.
Hope you find this feedback helpful, and yay keep up the good stuff.
@Rajdeep1999GitHub
Submitted
The part when we needed to switch between the two images for responsiveness was kinda difficult, rest your feedbacks are welcomed!
@itsdevdeepak
Posted
Hi Rajdeep, how you doing? I would like to provide some feedback on your project.
Hope you find my feedback helpful.
Marked as helpful