vinu cyril

Latest comments

• 

  samuelraj446•70

  @samuelraj446Submitted almost 2 years ago

  

  stats-perview-card

  2

  40
  

  vinu cyril•980

  @vinumanPosted almost 2 years 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
• 

  drnepal•10

  @drnepalSubmitted almost 2 years ago

  

  QR component- trying to solve

  3

  50
  

  vinu cyril•980

  @vinumanPosted almost 2 years 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 almost 2 years ago

  

  Stats preview card component

  1

  60
  

  vinu cyril•980

  @vinumanPosted almost 2 years 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
• 

  Momin Riyadh•370

  @momin-riyadhSubmitted almost 2 years ago

  

  Order summary component

  #accessibility#web-components

  2

  80
  

  vinu cyril•980

  @vinumanPosted almost 2 years 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 almost 2 years ago

  

  Results Summary Component Challenge

  1

  60
  

  vinu cyril•980

  @vinumanPosted almost 2 years 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 almost 2 years ago

  

  Responsive and Flex Box

  2

  80
  

  vinu cyril•980

  @vinumanPosted almost 2 years 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