Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
6

Jeffrey Izelaar

@Astrobean110 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

  • Struggled with the background (Sass, flexbox, css position)


    Jeffrey Izelaar•110
    Submitted about 4 years ago

    1 comment
  • Mobile first, Sass


    Jeffrey Izelaar•110
    Submitted about 4 years ago

    2 comments
  • Mobile first, Flexbox and Sass


    Jeffrey Izelaar•110
    Submitted about 4 years ago

    1 comment

Latest comments

  • Kelly Valdez•50
    @GK-Production
    Submitted almost 4 years ago

    3-column preview card component | Flexbox (HTML & CSS)

    1
    Jeffrey Izelaar•110
    @Astrobean
    Posted almost 4 years ago

    Damn near perfect!

    • The width of the cards should be increased slightly to prevent the paragraphs from wrapping contrarily to the design.
    • Judging by your css theoretical knowledge, you look ready (to me) to start Junior level exercises.
    Marked as helpful
  • Mapelsun•70
    @Mapelsun
    Submitted almost 4 years ago

    Responsive 3-column-preview-card-component

    1
    Jeffrey Izelaar•110
    @Astrobean
    Posted almost 4 years ago

    Judging by your code, and the way you use scss, you should move up to Junior level exercises. Good job! 👍

  • Abdulrhman Kotb•395
    @abdo-kotb
    Submitted about 4 years ago

    Profile Card Component Solution

    1
    Jeffrey Izelaar•110
    @Astrobean
    Posted about 4 years ago

    I see that you're playing around with animations, which is great, because fun is a good motivational tool for studying. Here's some suggestions:

    • Center the card vertically, there are plenty of easy ways to do this, but it's more fun if you figure that one out yourself.
    • Normalize css is cool, but overkill for a tiny project like this.
    • You're using many media queries for the background alone. This pattern usually indicates that you need to stop using absolute units (px) and lean towards relative units and percentages instead. I'm sure you could build a smoother result if you used less media queries, and more appropriate units.

    Happy coding ✌

    Marked as helpful
  • Izzatbek•50
    @IzzatbekDadamirzayev
    Submitted about 4 years ago

    Just CSS

    1
    Jeffrey Izelaar•110
    @Astrobean
    Posted about 4 years ago

    Nice work! You're almost done, here's some quick suggestions:

    • The size of the card is fixed, no need to let it shrink or grow.
    • The card's size and layout is the same on mobile and desktop, so you don't need to use a media query on it.
    • For the card cover, try 'background-size: cover', to make it fill the top-half of the card.
    • The profile picture is a tricky one. I aligned it perfectly using CSS position.
    • The background images do need to be included in a media query as their position is different in each layout.
  • Flash•80
    @flash54
    Submitted about 4 years ago

    Profile Card with Sass

    3
    Jeffrey Izelaar•110
    @Astrobean
    Posted about 4 years ago

    Never imagined that my code would help someone like this, that's actually really cool, so thanks for that awesome moment! 🙏

    The bad news is: I did not do it right, but I did learn that understanding how CSS position works is equally as important as layout options like flexbox and grid! And, just like flexbox and grid, it can be tricky to wrap your head around it.

    I think more practice with CSS position will help you for sure.

  • Khazin•50
    @khazin
    Submitted about 4 years ago

    Mobile first responsive 3 column preview card made using CSS flexbox

    1
    Jeffrey Izelaar•110
    @Astrobean
    Posted about 4 years ago

    Big black bars on the side! I checked your code and noticed that you give things a fixed width using px. Here's some quick tips:

    1. A background is applied to a box, in this case your body element. To make your body cover the full page, try using 'height: 100vh' and 'width: 100%'.
    2. Step away from using px, and familiarise yourself with sizing boxes using flex or units like 'rem'. Seriously, google these things before you start your next project; it's pretty simple and it'll improve everything about your code.
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub