Skip to content
OverviewSolutions
2
Comments
5

DroopyDev

@droopydevSingapore80 points

Spelling Bee Champeon

Latest solutions

Latest comments

  • DroopyDev•80
    @droopydev

    Hi Aviral Sharma!

    • "I'd love to know if I have written clean code and written which was not required."

    One of the ways to write clean and understandable CSS code is to apply the BEM naming convention.

    For example, in your CSS styling, when a person reads ".card1", ".card2" etc, they may not know which card you are referring to. So to make it easily understandable, you can do.

    ".card--sedan", ".button--suvs"

    You can read more about it here: https://css-tricks.com/bem-101/

    Marked as helpful
  • DroopyDev•80
    @droopydev

    Hey Scott! For the buttons, using the native HTML <Button> element is a much suitable choice as it provides a semantic meaning as compared to creating a button using div. I see that you also repeated CSS properties across 3 different classes (.button1 .button2 .button3). A better way is since all three buttons has the same .button class, you can write the same CSS properties (padding: 1em 2em) for that class and it will be applied to all 3 buttons.

    Marked as helpful
  • DroopyDev•80
    @droopydev

    Looks great Emilio! 👍🏻👍🏻

    Marked as helpful
  • DroopyDev•80
    @droopydev

    Hey Mayank! To make all 3 buttons be in the same horizontal line is to have them all align to the bottom. That's because the text content (the p tag) can be dynamic and have different heights, but the button will always be at the bottom. Currently, the height of the .card-para across the 3 cards are different. Make It flex so that its height takes up the whole remaining vertical space

  • DroopyDev•80
    @droopydev

    I didn't know you can actually add multiple backgrounds to an element using the background-image property, learnt something new today by looking through your code. Awesome! I'm aware that the challenge has only one card, but I'd personally contain the component in its own div instead of using the <main> tag, just so that I can duplicate the card component again and again, like how cards are usually used in some websites.

    Also, the "803K Likes" is not truly centred. That's because even though you used justify-content: space-around to distribute the space evenly, the 3 flex items have different widths.