VasanthakumarB

Latest comments

• 

  abdelrahman ahmed•170

  @a-ahmed151Submitted about 1 month ago

  What are you most proud of, and what would you do differently next time?

  I've became much better at using display flex and grid but there are much more to learn. Maybe next time I will add a tablet version for the website and make the shadowbox more settle.

  What challenges did you encounter, and how did you overcome them?

  Making the grid for the desktop version was a little bit hard. But after a few videos and tutorials I came to understand how it can be done.

  What specific areas of your project would you like help with?

  Can this layout be achieved without using transform?

  

  Frontend-Mentor|Four card feature section

  1

  10
  

  VasanthakumarB•80

  @VasanthakumarBPosted about 1 month ago

  Positive Points:

  The structure with the hero section and card grid is well-organized Good use of Tailwind classes for styling Nice implementation of responsive grid using md:grid-cols-3 Consistent spacing and padding patterns

  Areas for Improvement:

  Semantic HTML & Accessibility:

  The hero section could use a <main> tag to better define the primary content Card headings should be consistent - currently using a mix of <h3> and <h4> Images lack meaningful alt text, which is crucial for screen readers Consider adding ARIA labels for the feature cards The color contrast for gray text (text-gray-600) might need checking against WCAG standards

  Responsive Design:

  The cards could benefit from better padding on mobile - p-6 might be too tight Consider adding a lg: breakpoint for larger screens The grid gap (gap-6) could be adjusted for different screen sizes Text sizes could be more responsive with different breakpoints

  0
• 

  Abdulrahmon Ogunwale•80

  @moyinoluwa001Submitted about 2 months ago

  What are you most proud of, and what would you do differently next time?

  What are you most proud of? I’m proud of successfully implementing a responsive and visually appealing product preview card using HTML and CSS. The layout adapts well to different screen sizes, and the design closely matches the challenge requirements. The use of flexbox for layout structuring made it more efficient, and the addition of an interactive "Add to Cart" button with an icon improved the user experience.

  What would you do differently next time? Improve Accessibility: I would ensure better contrast ratios and use ARIA attributes to improve accessibility. Use CSS Grid: Instead of flexbox alone, I’d experiment with CSS Grid for better layout control. Enhance Interactivity: Adding JavaScript for dynamic features like quantity selection or a real-time price update would make the component more interactive. Optimize Performance: Using WebP images and lazy loading would improve page load speed.

  What challenges did you encounter, and how did you overcome them?

  What are you most proud of? I’m proud of successfully implementing a responsive and visually appealing product preview card using HTML and CSS. The layout adapts well to different screen sizes, and the design closely matches the challenge requirements. The use of flexbox for layout structuring made it more efficient, and the addition of an interactive "Add to Cart" button with an icon improved the user experience.

  What would you do differently next time? Improve Accessibility: I would ensure better contrast ratios and use ARIA attributes to improve accessibility. Use CSS Grid: Instead of flexbox alone, I’d experiment with CSS Grid for better layout control. Enhance Interactivity: Adding JavaScript for dynamic features like quantity selection or a real-time price update would make the component more interactive. Optimize Performance: Using WebP images and lazy loading would improve page load speed.

  What specific areas of your project would you like help with?

  Areas Where I Need Help

  1. Enhancing Accessibility I want to ensure the best user experience for all users, including those with disabilities. Any guidance on ARIA attributes, color contrast improvements, and keyboard navigation would be appreciated.

  2. Improving Code Optimization While the code is functional, I’d love feedback on how to optimize CSS and HTML further. Are there better ways to structure the styles for scalability and maintainability?

  3. Advanced Responsiveness The card is responsive, but I’d like suggestions on making it even more fluid across various screen sizes, especially for tablet views and ultra-wide screens.

  4. Performance Optimization Any tips on improving image loading speed, reducing CSS file size, or implementing lazy loading for better performance?

  5. JavaScript Enhancements Right now, the card is static. I’d like to add interactivity, such as:

  A quantity selector A cart counter update when clicking "Add to Cart" Dynamic pricing adjustments

  

  Responsive product preview card

  #accessibility

  1

  10
  

  VasanthakumarB•80

  @VasanthakumarBPosted about 2 months ago

  in my knowledege work on this page

  0
• 

  Michael Cook•60

  @MikeCook9994Submitted 12 months ago

  What are you most proud of, and what would you do differently next time?

  I think it could be very easy to overcomplicate this flexbox or grid. I stuck with default block layouts and accomplished things pretty simply. The downside to this choice is that I had to deal with margins which has left me with a lot of somewhat ugly selectors to handle margins correctly. I should probably being using many more classes to help me get rid of those ugly selectors.

  What challenges did you encounter, and how did you overcome them?

  I struggled a lot with the image. I deduced early that the max width of the banner image was exactly 50% of the size of the image that was given. This led to me trying to figure out some way to set the image's initial size to 50% of itself without using javascript or modifying the original image. This was a complete overcomplication of an otherwise simple problem.

  What specific areas of your project would you like help with?

  One annoying part of a standard block layout is that you have to be awfully particular about margins, most often top margins on :first-child elements and bottom-margins on :last-child elements. I'm curious if there's a good way to simplify this without resorting to classes. While classes are great, I would take the trade of some uglier css selectors if I can add and remove content from my markdown without having to both with making sure the correct css classes are set.

  

  Vanilla HTML/CSS recipe page

  1

  30
  

  VasanthakumarB•80

  @VasanthakumarBPosted 12 months ago

  very use ful

  0
• 

  Olasunkanmi Ige•80

  @SaigecodeSubmitted 12 months ago

  What are you most proud of, and what would you do differently next time?

  i was able to learn from past challenges and successfully implemented it into this particular one

  What challenges did you encounter, and how did you overcome them?

  no challenges

  What specific areas of your project would you like help with?

  responsiveness without bootstrap or tailwind

  

  Social-links solution using HTML5 and CSS

  1

  30
  

  VasanthakumarB•80

  @VasanthakumarBPosted 12 months ago

  give me some for in my code

  0
• 

  Lalit Kumar•40

  @kumarlalit53455Submitted 12 months ago

  What are you most proud of, and what would you do differently next time?

  I have learned to use hover and box shadow.

  What challenges did you encounter, and how did you overcome them?

  NA

  What specific areas of your project would you like help with?

  NA

  

  Blog Preview Card using html and css

  2

  40
  

  VasanthakumarB•80

  @VasanthakumarBPosted 12 months ago

  what is object fit attribute in css

  0
• 

  Benjamin•30

  @bra-BenSubmitted 12 months ago

  What are you most proud of, and what would you do differently next time?

  I'm proud that I've been able to build the exact copy of the project. Secondly, I have a greater understanding of Flexbox now.

  What challenges did you encounter, and how did you overcome them?

  The main challenge was how to resize the QR image in its container.

  What specific areas of your project would you like help with?

  I need help with how to get image to remain in the container when resized

  

  Responsive QR Code Component

  1

  20
  

  VasanthakumarB•80

  @VasanthakumarBPosted 12 months ago

  welcome

  0