Skip to content
OverviewSolutions
3
Comments
3

Shubham Giri

@XshubhamGNew Delhi India30 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

Latest comments

  • Shubham Giri•30
    @XshubhamG

    Hey, I love the you presented all of your fem challenges in single vue app, It's cool!. One suggestion from my side or maybe you have planned something for it, it would be cool if you turn the '/' route as a dashboard with little more detail using card for each challenge.

    for this project I think you did a really good job and I learnt alot of things from it. This is my first time seeing a vue project. I like it. Will try in my Future challenges

  • Leonardo Bravo P.•100
    @leonardo-bravop
    What are you most proud of, and what would you do differently next time?

    Learning to use variable fonts and the clamp CSS function to set variable font sizes. I'm also feeling more comfortable with Tailwind CSS.

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

    I didn't know variable fonts existed. I researched and found a way to implement them. I also didn't know there was another way to set variable font sizes without using media queries, it's good to learn something new.

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

    Optimize Tailwind CSS usage.

    Blog preview card

    #tailwind-css#vite
    1
    Shubham Giri•30
    @XshubhamG

    That's a great solution, there were some many things i learnt from it and will use in my projects as well for example the clamp function in CSS. There is just one thing that bothered me I might be wrong but :

    1. <div class="card group"> There is an unused class called group
  • P
    AM-TECH•210
    @ameer112-746dgd
    What are you most proud of, and what would you do differently next time?

    What I'm Most Proud Of:

    • Successfully implementing a clean and responsive design that closely matches the given challenge.
    • Using Flexbox to center the QR code card properly.

    What I Would Do Differently Next Time:

    1. Improve accessibility by adding aria-labels and ensuring proper contrast for better readability.
    2. Use CSS Grid instead of Flexbox to experiment with different layout techniques.
    3. Optimize the image size to enhance performance.
    What challenges did you encounter, and how did you overcome them?

    Challenges I Encountered and How I Overcame Them:

    • Centering the Component: Used display: flex to align the card properly.
    • Responsiveness Issues: Applied max-width for the image and rem units for fonts.
    • Spacing & Alignment: Used reset CSS and adjusted padding/margins for balance.
    • Font Selection: Integrated Google Fonts for a better match.
    • UI Refinements: Added border-radius, box-shadow, and subtle color contrasts.
    What specific areas of your project would you like help with?

    Areas Where I’d Like Help:

    • Responsive Design: Ensuring the QR code component adapts perfectly to all screen sizes.
    • Accessibility Improvements: Best practices for better readability and screen reader support.
    • Code Optimization: Simplifying CSS while maintaining design accuracy.
    • Hover Effects: Adding subtle animations for better user interaction.
    • Best Practices: Feedback on improving structure and maintainability.

    Flexbox Box Shadow & Border Radius Google Fonts Live Server

    #node
    1
    Shubham Giri•30
    @XshubhamG

    Well done, You did great for the most part of this challenge. Here is a suggestion which will be helpful in your upcoming projects regarding accessibility and overall code readablility.

    1. The <style> block is inside the <body>. While browsers often render this, the standard and best practice is to place CSS definitions within the <head> (either in a <style> block or, preferably, linked via <link rel="stylesheet" href="style.css">) or perhaps even better use link