Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Lucas 👾 104,420

    @correlucas

    Submitted

    👾 Hello, Frontend Mentor coding community. This is my solution for the ChatApp CSS Illustration.

    This challenge was really challenging! The hardest thing was the background svg images, I tried to create these gradient elements inside the css with content: ' ' and after/before but for a reason that I don't know a huge gap was created in the bottom. So I took the shortcut to finish the solution and I've exported the svg elements from Figma ❤ and placed it in the body as background-image. Then I add some animations and changed a bit the design.

    🍚Follow me in my journey to finish all HTML/CSS only challenges (Only 4 missing)! Gotta Catch ’Em All

    Ill be happy to hear any feedback and advice!

    ThaBeanBoy 230

    @ThaBeanBoy

    Posted

    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

    1
  • ThaBeanBoy 230

    @ThaBeanBoy

    Posted

    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.

    1
  • ThaBeanBoy 230

    @ThaBeanBoy

    Posted

    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

    1