Skip to content
OverviewSolutions
11
Comments
150

Gerben Dol

@GerbenDolThe Netherlands3,115 points

Mendix Consultant with a background of front-end development and project management.

I’m currently learning...

JavaScript, Astro, React, Git

Latest solutions

View more solutions

Latest comments

  • Gerben Dol•3,115
    @GerbenDol

    Hey Chris-Ann! Great job on the layout!

    There's a couple of things I'd keep in mind regarding the design:

    • The font-size is a bit small in my opinion, it's a bit hard to read
    • Make sure to check sizes and spacing within the cards. For example right now the profile photos are a bit too big and the margin below the photo is a bit small.

    It's details like this that will get your solution from looking good to looking great!

  • Gerben Dol•3,115
    @GerbenDol

    Hi Salah Eddine,

    First thing I noticed: your solution is looking really nice! Loving the spacing, typography and overall feel. Well done! 👌

    A thing to consider:

    • Check out your accessibility and HTML issue rapports

    Honestly, going through your code I think you did really well and I don't have a lot of feedback. Keep up the great work! 😁

  • Gerben Dol•3,115
    @GerbenDol

    Hey Toyger,

    I think your solution is looking really good! 🙌🏻

    The things I found are that:

    • The animation on the answer in the FAQ is a bit slow
    • The hover on the answer is a bit odd. The color changing and the cursor becoming a pointer suggests the answers is somehow interactive.

    Curious to see what feedback other people have! Keep up the nice work! 💪🏻

  • Gerben Dol•3,115
    @GerbenDol

    Hey Leon, cool to see you're learning to use BEM! 💪🏻

    I've looked at your code and noticed you're not using the -- part in BEM correctly yet.

    For example: <div class="card__offer"><p class="card__offer--text"><span>Try it free 7 days</span> then $20/mo. thereafter</p></div>

    So .card__offer suggests that this is in an element in .card which it is not. So, maybe change this to be the block and call it .card. The text (honestly, I'm not sure you even need a class on this paragraph as you'll probably style all text the same in here) could become .card__text.

    Only use the -- in your class if it is a modifier on an already existing element. For example, let's say this case of the .card__text is special since it is highlighted. You want all the styling .card__text already has, but with a modification on it's background-color. You'd make it like <p class="card__text card__text--highlight"> to use the basic styles and apply the modifier.

    Be sure to check out some articles diving into what all the ideas behind BEM are to avoid making these mistakes. Hit me up on Slack if you need some more help! I'm on there using the same name as I am here. 🙌🏻

  • Gerben Dol•3,115
    @GerbenDol

    Hey Nafsuki!

    Your solution looks great - really well done! 🤩

    One thing I'd consider paying attention to is the nesting of your SASS. Right now your style on, for example, your h1 only works as long as it is in the .container. Do you really need that depth in your selector or risk the style breaking as soon as it is used outside of the .container?

    In a small project like this obviously it's no problem at all, but keep this in mind on bigger projects! 😄

  • Gerben Dol•3,115
    @GerbenDol

    Hey!

    So my tip: instead of setting a padding or margin left on all the separate content elements, just set a padding-left on your .left-wrapper so it's more universal and anything your throw in there is just aligned properly by default.

    Great solution overall, keep up the good work! 💪🏻

View more comments