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

ThaBeanBoy

@ThaBeanBoySouth Africa230 points

Just a coder bro..

Latest solutions

  • Responsive time tracking dashboard using CSS Grid, Tailwind & Astro

    #astro#react#tailwind-css#accessibility

    ThaBeanBoy•230
    Submitted about 2 years ago

    0 comments
  • Responsive landing page with graph animation using React & Tailwind

    #gatsby#react#tailwind-css

    ThaBeanBoy•230
    Submitted over 2 years ago

    1 comment
  • Responsive landing page with graph animation using React & Framer

    #gatsby#react#motion

    ThaBeanBoy•230
    Submitted over 2 years ago

    0 comments
  • Responsive landing page with drop down navigation using React & Framer

    #react#sass/scss#motion

    ThaBeanBoy•230
    Submitted over 2 years ago

    0 comments
  • Responsive site using media queries


    ThaBeanBoy•230
    Submitted almost 3 years ago

    0 comments
  • Responsive layout with the use of css position


    ThaBeanBoy•230
    Submitted over 2 years ago

    0 comments
View more solutions

Latest comments

  • Lucas 👾•104,160
    @correlucas
    Submitted almost 3 years ago

    ChatApp CSS Illustration (Vanilla CSS)

    7
    ThaBeanBoy•230
    @ThaBeanBoy
    Posted almost 3 years ago

    Man, the background feels so alive, & the way the elements are loaded on the screen. This was really impressive in my opinion. hope you don't mind me digging through the code.

    I'm curious what the '@media (prefers-reduced-motion:reduce)' does. I've seen this in a couple of places but I'm not really sure what it does. Thanks for any explanation from anyone.

    I know this might be a rookie question, is the minified CSS file supposed to improve the loading speed of the site? How would I minify my own files?

    All in all, this is a really beautiful site.

    Marked as helpful
  • Rhythm•30
    @Rhythm001
    Submitted almost 3 years ago

    Solution | Product preview card component

    #foundation
    2
    ThaBeanBoy•230
    @ThaBeanBoy
    Posted almost 3 years ago

    Hi @Rhythm001, I checked out your project, I like what you've done so far. I'd like to suggest a few things that could make your life easier when developing sites. Please bare in mind that I'm not a web developer by profession, these are just my opinions & suggestions.

    It seems like the container class doesn't have a max-width property, the reason I bring this up is that I fear that on wider screens, your site won't be as presentable. Here's a resource you can check out if you want to learn more about max-width CSS property: https://www.w3schools.com/cssref/pr_dim_max-width.asp

    Personally, I'd use flex-box on the container class. The reason I suggest flex-box is because it makes CSS easier to work with, like in this project. I don't even know when I last use the float property (Like you did with the image). Another reason I suggest flex-box is that it makes it easier to make things responsive, which leads me to my next point. flex-box resource : https://www.w3schools.com/css/css3_flexbox.asp

    The site isn't responsive. When the screen is approximately 1368px wide, the project looks like the design, unfortunately, not all users have a screen that's approximately 1368px wide, so we have to take into account a variety of screen sizes. the site breaks when you start making the screen smaller. Here's a cool resource you can learn about responsive design: https://www.w3schools.com/css/css_rwd_intro.asp

    I hope my comment is useful, & the resources I provide you are useful too. Hopefully we will keep learning so we can improve our web dev skills.

  • christopher II•1,220
    @donchriscorleone
    Submitted almost 3 years ago

    Mobile first workflow using plain CSS

    2
    ThaBeanBoy•230
    @ThaBeanBoy
    Posted almost 3 years ago

    Hi, I actually did this project too. It's really cool that you have 0 accessibility issues too.

    On my challenge, @correlucas suggested something like this: img { mix-blend-mode: multiply; Opacity }

    I found notes on this very thing at https://www.w3schools.com/cssref/pr_mix-blend-mode.asp Maybe this can help you with the image.

    Marked as helpful
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