Skip to content
OverviewSolutions
16
Comments
7

Babs-unique

@Babs-unique210 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

View more solutions

Latest comments

  • Babs-unique•210
    @Babs-unique

    Good project dude Keep it up

  • Madu Jang•450
    @MJspitta
    What are you most proud of, and what would you do differently next time?

    Starting with mobile-first is better in terms of loading speed. I've not seen much difference but I enjoyed the work flow and i'll continue practicing this same approach from now on for all my projects.

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

    It was the first time i tried Mobile-first Responsive Design. When i was adopting for larger screens like desktops, i was a bit confused on how to restructure but i passed the hurdle.

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

    Is there a better way I could have adopted to larger screens from the mobile-first design?

    Newsletter Signup with Success Message

    1
    Babs-unique•210
    @Babs-unique

    Good project

  • Binh05•450
    @Binh05
    What challenges did you encounter, and how did you overcome them?

    I ran into issues with CSS selector specificity. The classes I added dynamically via JavaScript couldn't override the styles previously defined in my CSS. I wasn’t sure what keywords to search for, so I turned to AI for help.

    Eventually, I realized the problem was caused by the fact that my original CSS used highly specific selectors, whereas the dynamically added classes had more generic selectors. For example:

    • before
    .active {
...
}
    • after
    .card .content-right .active {
...
}

    However, more importantly, I’ve gained a much clearer understanding of how CSS specificity works.

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

    I was trying to make the drawer image overflow hidden when it exceeds the container boundaries. However, when I set height: 100% without specifying the width, it took up the full width of the screen instead of hiding the overflow content.

    To work around this, I set width: 123%, which helped achieve the visual result I wanted.

    .card .img img {
    width: 123%;
    height: 100%;
    border-top-left-radius: .5rem;
}

    I'm not sure if this is a good solution, so I’d really appreciate any feedback or suggestions from others.

    article preview component using flex, grid, transition and position

    1
    Babs-unique•210
    @Babs-unique

    Love this

  • Babs-unique•210
    @Babs-unique

    His website was cool and fantastic

  • Babs-unique•210
    @Babs-unique

    Your project is quite impressive

  • Babs-unique•210
    @Babs-unique

    Perfect

View more comments