Skip to content
OverviewSolutions
9
Comments
3
P
Rohan T George
@19Rohan97

All comments

  • P
    Rohan T George•230
    @19Rohan97

    Awesome work! You've replicated the design exceptionally well — your attention to detail and execution really stand out. It's evident that you understand the layout structure and styling principles well. Keep up the great work!

    ✅ One Suggestion – Simplify with Universal Selector *

    In your CSS, I noticed you've explicitly listed out every single element (like html, body, div, h1, p, etc.) for resetting default styles. While this is thorough and ensures cross-browser consistency (especially for older projects), it’s also quite verbose and can be simplified in modern workflows.

    🔁 Recommendation: Use the Universal Selector

    Instead of:

    html,
body,
div,
span,
applet,
object,
iframe,
... (and many more)

    You can use:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

    This does the same job more efficiently by:

    • Removing default margin and padding from all elements
    • Setting a consistent box-sizing model (border-box) which is easier to manage when working with padding and widths

    🕹️ Optional for Older Browser Compatibility

    If you're specifically targeting older browsers or legacy layouts, it’s still valid to use a detailed reset like the one you provided. It follows the Eric Meyer reset pattern, which was popular before modern CSS tools became mainstream.

    However, for most current web development scenarios, especially in a learning or modern portfolio project, the universal * selector or a CSS Reset/Normalize file is enough.

    🧠 Pro Tip

    For even better practice, combine the universal selector with ::before and ::after to cover pseudo-elements:

    *, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

    This ensures full consistency in how box dimensions are calculated — even for decorative elements like icons or overlays.

  • Lalalaloo•40
    @Lalalaloo
    What are you most proud of, and what would you do differently next time?

    I'm really proud that i was able to replicate the design.

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

    I didn't know much about git or git-hub, since i am a beginner, but this project taught me. After hours of videos, i finally got it.

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

    The entire code. Any feedback would be helpful

    Qr code component using html and css

    1
    P
    Rohan T George•230
    @19Rohan97

    Awesome work! You've replicated the design exceptionally well — great attention to detail and execution. It’s clear you’re developing a solid understanding of layout and responsiveness. Keep it up!

    📱 Suggestion: Embrace Mobile-First Approach

    I noticed that in your CSS, you’ve used max-width media queries, which means you're working from a desktop-first mindset and scaling down for smaller devices.

    Instead, I recommend switching to a mobile-first approach, which is the current best practice in responsive design.

    ✅ Why Mobile-First Is Better:

    • Performance: Mobile devices often have slower connections. Serving them a lightweight layout first improves load speed.
    • Progressive Enhancement: You start with the most basic version (mobile) and then enhance it for larger screens.
    • Maintainability: Writing base styles for mobile and layering min-width media queries for tablets and desktops is easier to scale and debug.

    💡 Example:

    Instead of this (desktop-first):

    .element {
  font-size: 24px;
}

@media (max-width: 768px) {
  .element {
    font-size: 16px;
  }
}

    Go for this (mobile-first):

    .element {
  font-size: 16px;
}

@media (min-width: 768px) {
  .element {
    font-size: 24px;
  }
}

    This way, you're building from the smallest viewport up — and letting styles grow with the screen size.

    Let me know if you want help refactoring your current CSS to follow this approach — I'd be happy to assist!

    Marked as helpful
  • uconnwomensbball•190
    @uconnwomensbball
    What specific areas of your project would you like help with?

    Looking for a solution to getting the remove/add buttons level and at the same place on every extension. Based on how much text the extension has, the remove/add buttons and toggle bar will be higher or lower. Just changing "justify" (e.g. between, around) does not fix issue.

    Browser Extension Manager UI

    #tailwind-css
    1
    P
    Rohan T George•230
    @19Rohan97

    Feedback for Tailwind Card Implementation

    Heyy!! 👋

    You did awesome. I love the Tailwind implementation — seriously great work! 🎉

    I checked your code and noticed why the alignment of the bottom part of the card is not equal across all the cards.

    Here’s the relevant code snippet:

    <div class="bg-slate-900 border flex flex-col items-center justify-between mx-2 my-2 p-3 px-4 rounded-3xl w-74">
  <div class="flex mt-3 mb-9">
    <img src="logo-tab-master-pro.svg" class="mr-4 w-20 h-20">
    <div class="flex-col">
      <h1 class="text-2xl font-semibold">TabMaster Pro</h1>
      <p class="text-xl">Organizes browser tabs into groups and sessions.</p>
    </div>
  </div>
  
  <div class="flex items-center justify-between w-full">
    <button id="5" class="remove-btn text-xl bg-slate-900 px-4 py-2 rounded-3xl border hover:bg-orange-600 hover:text-stone-950">Add</button>
    <label class="inline-flex items-center cursor-default pointer-events-none">
      <input type="checkbox" value="" class="slide-btn sr-only peer">
      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-500 rounded-full peer dark:bg-gray-700 peer-checked:bg-red-500 transition-colors duration-300 cursor-default pointer-events-none"></div>
      <div class="absolute w-5 h-5 bg-white rounded-full transform peer-checked:translate-x-full transition-transform duration-300 ml-1 mt-0.5 cursor-default pointer-events-none"></div>
    </label>
  </div>
</div>

    What went wrong?

    • You correctly gave flex-col to the main container, but flex-col alone only sets flex-direction: column.
    • You forgot to add flex itself to the main container.
    • Because of that, the space between the top and bottom parts is not distributed properly.

    How to fix it?

    ✅ Make sure the main container has both flex and flex-col:

    <div class="flex flex-col ...">

    ✅ Also, ensure the bottom container (the one with the buttons) has w-full so it stretches properly:

    <div class="flex items-center justify-between w-full">

    Awesome job once again! Just these tiny adjustments and your cards will look 🔥 perfectly aligned!