Skip to content
OverviewSolutions
40
Comments
26
vinu cyril
@vinuman

All comments

  • vinu cyril•980
    @vinumanPosted over 1 year ago

    Hello,

    Good job completing the project. The design looks impeccable.

    • Instead of using the filter CSS property on the image, you can use the CSS property, mix-blend-mode: multiply; It sets the blending mode for how an element should blend with its background or neighboring elements.

    • Hope this helps. Happy coding!

    0
  • vinu cyril•980
    @vinumanPosted over 1 year ago

    Hello,

    Good job completing the project. The design looks really good.

    • Kindly Use the <main> tag to enclose the content instead of the 'container' div. The <main> tag is used to indicate the primary content of the document, and it helps search engines and accessibility tools to understand the structure and hierarchy of the content on the page.

    • 100vh represents 100% of the viewport height, which means that the element will take up the entire height of the visible area of the browser window. This can result in an oversized height for the element, creating unnecessary white space and pushing other elements off the visible area of the page. Its better to avoid the same.

    • Hope this helps. Happy coding!

    0
  • Caio Ferreira•60
    @caiof9Submitted over 1 year ago

    had some difficult to color the image, did it with :before, and tried to do with filter, but i couldn't. i would appreciate any comments and help.

    Stats preview card component

    1
    vinu cyril•980
    @vinumanPosted over 1 year ago

    Hello there,

    Good job completing the project. The design looks impeccable.

    -To apply the purple filter, you can use the CSS property, mix-blend-mode: multiply; It sets the blending mode for how an element should blend with its background or neighboring elements.

    -Hope this helps, happy coding!

    Marked as helpful
    0
  • vinu cyril•980
    @vinumanPosted over 1 year ago

    Hello,

    Good job completing the project. The design looks impeccable.

    • Kindly use the <main> tag to enclose the content instead of the 'container' div. The <main> tag is used to indicate the primary content of the document, and it helps search engines and accessibility tools to understand the structure and hierarchy of the content on the page.

    • The "<p>Proceed to Payment</p>" should be replaced with a button element and do add hover to it.

    <button>Proceed to Payment</button>

    • You can make your buttons and other clickable items more interactive and engaging, you can use the, <--cursor:pointer;--!> property in CSS. This property changes the appearance of the cursor when it hovers over a button, indicating that it is clickable.

    • Additionally, you can use the :hover pseudo-class which can change the styling of an element when a user hovers over it with their mouse. This can be a great way to add visual feedback and make your website more engaging for your visitors.

      button:hover{ background-color: somecolor; color: somecolor; }

    • The <p class="order">Cancel Order</p> can also be changes to a button or <a> tag.

    • Hope this helps. Happy Coding!

    Marked as helpful
    2
  • Destany•50
    @destanyrSubmitted over 1 year ago

    I am still struggling to understand how to do responsive design for mobile, any advice would be wonderful.

    I also can only get my css grid and flexbox to work half the time so it took a while for me to complete this with lots of extra steps to make up for what wasn't working.

    Results Summary Component Challenge

    1
    vinu cyril•980
    @vinumanPosted over 1 year ago

    Hello,

    Good job completing the project. The desktop design looks impeccable.

    • If you are looking to make the component responsive, the Media queries in CSS allow you to create responsive designs that adapt to different screen sizes and devices. Please view "https://www.youtube.com/watch?v=2KL-z9A56SQ&t=62s" for a quick start.

    • Using meaningful class names can greatly improve the readability, maintainability, and scalability of your CSS code. By giving classes descriptive names that accurately reflect their purpose and meaning,

    • Setting a fixed width for the body element can cause several issues, including making the website less responsive and causing horizontal scrollbars to appear on smaller devices. Additionally, it can limit the flexibility of the design and make it harder to adapt to different screen sizes and resolutions. It is a good idea to use relative units like percentages or ems when defining widths in CSS. This allows elements to scale proportionally with their container and ensures that they can adapt to different screen sizes.

    • Kindly use the hover property for the button, which allows you to create interactive and engaging user experiences by adding visual feedback when users interact with buttons on your website. When a user hovers over a button, it can change color, size, or shape, giving them an indication that they are hovering over a clickable element.

    • Hope this helps. Happy coding!

    Marked as helpful
    0
  • eve•230
    @Eve-WangariSubmitted over 1 year ago

    I used <hr> to add the line but I could not change the color. Any better way to do it?

    Responsive and Flex Box

    2
    vinu cyril•980
    @vinumanPosted over 1 year ago

    Hello,

    Good job completing the project. The design looks good.

    • Avoid using the <hr> tag. While these tags can be used to create line breaks and horizontal rules, they are generally considered outdated and not recommended. You can use the border bottom property of the previous div and add color and border thickness to the same.

    • Kindly avoid using <br> tags. The <br> tag can also affect accessibility, as it can disrupt the flow of content for screen readers and other assistive technologies.

    • For your media query, the max-width is set to 450px, which means it will only be applied for screens with width less than 450px(It works well for iphoneSE but not for iphoneXR :). For mobile devices, you can set it to 640px(https://tailwindcss.com/docs/screens).

    • Hope this helps. Happy coding!!

    Marked as helpful
    0
  • J0K3RY•60
    @J0K3RY-03Submitted over 1 year ago

    Hello, I'm a beginner in web development and I'm self-taught, my goal on this challenge is to train on flex and grid, if you have any tips or anything on anything on my project's code, I'm taker, thank you.

    QR code component

    1
    vinu cyril•980
    @vinumanPosted over 1 year ago

    Hello,

    Good job completing the project. The design looks impeccable. Here are some suggestions.

    • Use the <main> tag to enclose the content instead of the 'container' div. The <main> tag is used to indicate the primary content of the document, and it helps search engines and accessibility tools to understand the structure and hierarchy of the content on the page.

    • By adding descriptive alt text to images, you can make your content more accessible to a wider audience, including those with visual impairments or who rely on assistive technologies to access the web.

    • Hope this helps. Happy coding!

    Marked as helpful
    1
  • Zahirul•150
    @ZahirulIslamTanvirSubmitted over 1 year ago

    Hi,guys this is my solution to the Product Review Card Component! Feel free to comment on how the solution can be improved.

    Thanks for walking by 😁❤️

    Product Review Card Component Solution

    1
    vinu cyril•980
    @vinumanPosted over 1 year ago

    Hello,

    Good job completing the project. The design looks impeccable.

    • For your media query, the max-width is set to 375px, which means it will only be applied for screens with width less than 375px(It works well for iphoneSE but not for iphoneXR :). For mobile devices, you can set it to 640px(https://tailwindcss.com/docs/screens).

    • Use the <main> tag to enclose the content instead of the 'card' div. It is used to define the main content of a page.

    -Hope this helps. Happy coding!

    Marked as helpful
    1
  • vinu cyril•980
    @vinumanPosted over 1 year ago

    Hello,

    Good job completing the project, the desktop design looks good.

    • One suggestion is to have the width of the 'details' div the same as the 'image' div. The component will look better this way.

    • Use the <main> tag to enclose the content instead of the 'card' div. It is used to define the main content of a page

    • Kindly avoid using <br> tags. You can have the text content in seperate lines by adjusting the width of the <p> tag.

    • If you are looking to make the component responsive, the Media queries in CSS allow you to create responsive designs that adapt to different screen sizes and devices.

    • Please view "https://www.youtube.com/watch?v=2KL-z9A56SQ&t=62s" for a quick start.

    • Hope this helps. Happy coding!!

    Marked as helpful
    1
  • vinu cyril•980
    @vinumanPosted over 1 year ago

    Hello There,

    Good job completing the project. The design looks impeccable.

    • One of the functional requirements is to highlight the bar(cyan color) for the current day. One way to do this is to assign classes to each BAR div's starting from sun to sat.

    • The following code with render the functionality after naming the classes.

      <div class="sun"></div> <div class="mon"></div> ..... .....

      let day; const daysOfTheWeek = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'] const today = new Date();

      if(today.getDay() == 0){ day = daysOfTheWeek[6]; } else{ day = daysOfTheWeek[today.getDay() -1] }

      document.querySelector(.${day} .bar).style.backgroundColor = '#76B5BC';

    • Hope this helps. Happy coding!

    Marked as helpful
    0
  • vinu cyril•980
    @vinumanPosted over 1 year ago

    Hello,

    Good job completing the project. The desktop design looks impeccable.

    • If you are looking to make the component responsive, the Media queries in CSS allow you to create responsive designs that adapt to different screen sizes and devices.

    • Please view "https://www.youtube.com/watch?v=2KL-z9A56SQ&t=62s" for a quick start.

    • Hope this helps. Happy coding!!

    0
  • vinu cyril•980
    @vinumanPosted over 1 year ago

    Hello There,

    Good job completing the project. The design looks impeccable.

    • One small suggestion => To make your buttons and other clickable items more interactive and engaging, you can use the,

    cursor:pointer;

    property in CSS. This property changes the appearance of the cursor when it hovers over a button, indicating that it is clickable.

    • Hope this helps. Happy coding!!
    0