Skip to content
OverviewSolutions
16
Comments
3
Charles
@charlesmiller0412

All comments

  • Kamasah-Dickson•5,590
    @Kamasah-DicksonSubmitted about 2 years ago

    Hello guys am back with a new solution that I made. It took me a while because of the use of the long BEM class names which made my code harder to debug, maybe am bad at using bem. I used sass mixins and functions on this project to make my code reusable and I also used the CSS clamp function which I have become addicted to for now. Well I was not able to add any JavaScript maybe another project. Please feel free to show your opinion on this solution and let me know about Its responsiveness and accessibility.

    Responsive Expenses-Chart-Component made with HTML and CSS

    1
    Charles•430
    @charlesmiller0412Posted about 2 years ago

    Hey @Kamasah-Dickson!

    I checked out how you were using BEM and have a suggestion. I find it's easier to separate the elements within by alternating between dashes or underscores.

    What you had: card__header__left__balance

    What I would have: card__header--left-balance

    I'll include a link to the BEM page explaining its use. I hope this is helpful! https://getbem.com/naming/

    Great job on the solution though! Fully responsive!

    Marked as helpful
    0
  • Sergio Gurgel•50
    @sergiogurgSubmitted about 2 years ago

    How should I make the button clickable (even if it doesn't do anything)? I thought about replacing the <button> for an <a> tag, but considering a complete e-commerce web application I know it shouldn't be a link.

    Product preview card component

    3
    Charles•430
    @charlesmiller0412Posted about 2 years ago

    Hey @sergiogurg!

    There are 2 ways I could recommend to make the button seem clickable while not really linking to a script or page.

    1. You can always use an anchor tag <a> and place the href as # so it doesn't truly link elsewhere then style the tag.

    2. On your button you can add CSS for cursor: pointer and add text-decoration or change the background color (whatever your requirement is) on the :hover selector. This would be the preference for running scripts such as adding an item to a cart.

    Your solution looks great!

    0
  • Charles•430
    @charlesmiller0412Posted about 2 years ago

    Hey @weakiam! Great job on this!

    I'm not sure what editor you use, but in VS Code you can enable auto-indent to help with the misalignment in your stylesheet. Another great thing to look into is BEM (Block Element Modifier). This will give structure to your CSS and acts as an easy-to-understand naming convention. BEM also works really well with SCSS as you can simply continue writing your styles within the same initial block. Check out https://getbem.com/ for more info on the methodology.

    Another thing to remember on these challenges is you can use absolute positioning on the footer in order to keep the object's center.

    Marked as helpful
    1