Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
6

VasanthakumarB

@VasanthakumarB80 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • tailwind css


    VasanthakumarB•80
    Submitted 5 months ago

    0 comments
  • use tailwind css

    #accessibility

    VasanthakumarB•80
    Submitted 6 months ago

    0 comments
  • Recipe Page


    VasanthakumarB•80
    Submitted over 1 year ago

    No


    1 comment
  • Social links profile


    VasanthakumarB•80
    Submitted over 1 year ago

    Css with help with us


    1 comment
  • blog preview card

    #react

    VasanthakumarB•80
    Submitted over 1 year ago

    css


    0 comments
  • Age Calculator


    VasanthakumarB•80
    Submitted over 1 year ago

    0 comments
View more solutions

Latest comments

  • abdelrahman ahmed•170
    @a-ahmed151
    Submitted 5 months 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
    VasanthakumarB•80
    @VasanthakumarB
    Posted 5 months 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

  • Abdulrahmon Ogunwale•100
    @moyinoluwa001
    Submitted 6 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
    VasanthakumarB•80
    @VasanthakumarB
    Posted 6 months ago

    in my knowledege work on this page

  • Michael Cook•60
    @MikeCook9994
    Submitted over 1 year 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
    VasanthakumarB•80
    @VasanthakumarB
    Posted over 1 year ago

    very use ful

  • Olasunkanmi Ige•80
    @Saigecode
    Submitted over 1 year 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
    VasanthakumarB•80
    @VasanthakumarB
    Posted over 1 year ago

    give me some for in my code

  • Lalit Kumar•40
    @kumarlalit53455
    Submitted over 1 year 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
    VasanthakumarB•80
    @VasanthakumarB
    Posted over 1 year ago

    what is object fit attribute in css

  • Benjamin•30
    @bra-Ben
    Submitted over 1 year 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
    VasanthakumarB•80
    @VasanthakumarB
    Posted over 1 year ago

    welcome

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub