Skip to content
OverviewSolutions
9
Comments
5
Varun Tyagi
@vitviki

All comments

  • Nelly•30
    @NellyBise
    What are you most proud of, and what would you do differently next time?

    I'm proud of the responsive header. Next time, I think I will define fonts in the CSS index at the beginning of the project. I started using Tailwind config, but it's not the best way for responsive text.

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

    My biggest difficulty was using Vue, as this is my first complete project with it. On the other hand, this project allowed me to improve my CSS knowledge. I discovered some properties that I had never had the occasion to use before.

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

    I'm not sure if my management of the "selected destination" is the best ; perhaps it would have been better to handle it through the URL. What do you think ?

    responsive site using Vue.js and Tailwind

    #vue#tailwind-css
    1
    Varun Tyagi•150
    @vitviki

    The website looks great, but the moon image under the destination tab is not showing up.

  • Varun Tyagi•150
    @vitviki

    Looks great.

  • Varun Tyagi•150
    @vitviki

    Hey, this looks great for a beginner. If you tweak the fonts and padding in the context section and also align the paragraph to center, your solution will look much closer to the given design. Hope this helps.

    Marked as helpful
  • Varun Tyagi•150
    @vitviki

    Looks fantastic.

    The only difference I'm able to spot is that in the actual design line 3 in the main paragraph ends at the word 'Creator' whereas yours ends at 'for'. Small stuff really which I think is easily fixable with some padding.

  • P
    Anjelica•160
    @Anjie-MF
    What are you most proud of, and what would you do differently next time?

    I'm proud that I took the time to build the layout from scratch without immediately relying on AI, and that I figured out how to properly structure the responsive image component and the "Add to Cart" button (including hover states and icons). Looking back, I'd like to approach spacing (padding/margin) more systematically next time — maybe by setting up a layout grid earlier or adding temporary outlines/borders during development to catch inconsistencies faster.

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

    Spacing was a big challenge — especially balancing margin, padding, and ensuring the image filled its container properly across screen sizes. At first, I thought I fixed the problem by adjusting the card width, but further testing revealed deeper issues. To solve it, I went back to basics: inspecting elements in dev tools, experimenting with flexbox vs. grid, reviewing my two-year-old code, and getting feedback from AI to spot mistakes I missed. It reinforced how important careful testing and debugging are, not just "visual fixes.

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

    I'd love feedback on my layout structure — particularly if there are cleaner ways to handle spacing and alignment earlier in the project without needing multiple rounds of tweaking. I'd also appreciate advice on best practices for structuring media queries and scaling a layout for larger screen sizes in a more maintainable way.

    productPreviewCard_figmaChallenge

    1
    Varun Tyagi•150
    @vitviki

    Hey,

    1. To add the cart icon inside the button use img tag inside button tag like so:

           <button class="cart_btn">
        <img src="./images/icon-cart.svg" alt="cart">
       Add to Cart
      </button>

    2. Instructions to add screenshot in README can be found in README-template.md. For some reason I'm unable to write the command here. It's not showing up in the preview.

    Hope this helps.