Skip to content
OverviewSolutions
7
Comments
8
Deepak
@itsdevdeepak

All comments

  • Deepak•190
    @itsdevdeepakPosted over 1 year ago

    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
    0
  • Jeffrey Stanley•130
    @JS-LawSubmitted over 1 year ago

    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.

    Responsive Product Preview

    1
    Deepak•190
    @itsdevdeepakPosted over 1 year ago

    Hello Jeffrey, how are you? Welcome to the community! great effort on your project's.

    I've few tips for you:

    1. Try not to use manual width with flexbox here a great article on sizing flexbox.
    2. use native <picture> element or <img> tag with srcset attribute insted of mannualy swaping between images.
    3. make sure your image is not starching you can do this with a image container like:
    .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
    0
  • RTM BufferTime•10
    @BufferTimeSubmitted over 1 year ago

    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?

    QR Code Component using simple Flexbox

    1
    Deepak•190
    @itsdevdeepakPosted over 1 year ago

    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.

    1
  • Deepak•190
    @itsdevdeepakPosted over 1 year ago

    There are basally 3 patters to handle error states.

    1. Live validation errors: In this approach error state will visible as user type.
    2. Show error state after input is unfocusable: like the name show the input error state after user provides the value and leaves the input focus.
    3. Show the error state for all the input fields after user click on submit button.

    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.

    0
  • Deepak•190
    @itsdevdeepakPosted over 1 year ago

    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
    1
  • Rennan Silva•190
    @Rennan20Submitted over 1 year ago

    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.

    Responsive Landing Page Using NextJS and TailwindCSS

    1
    Deepak•190
    @itsdevdeepakPosted over 1 year ago

    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.

    1
  • Deepak•190
    @itsdevdeepakPosted over 1 year ago

    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.

    1
  • Deepak•190
    @itsdevdeepakPosted over 1 year ago

    Hi Rajdeep, how you doing? I would like to provide some feedback on your project.

    1. you can save your time and hassle by using <picture> tag or srcset attribute with image, instead of manually defining different img tag and swiping them with CSS.
    2. you could set overflow: hidden property on .card with border radius, it hide the any that is sticking out of your card including images.

    Hope you find my feedback helpful.

    Marked as helpful
    1