Skip to content
OverviewSolutions
21
Comments
10
P
Nikitossik
@Nikitossik

All comments

  • P
    Nikitossik•370
    @Nikitossik

    Hey, thanks a lot for your comment! I've just watched the videos you sent, it's pretty cool using npm for compiling SCSS, in my project I used Gulp instead, just to try) but the thing in the video seems to be easier, I'll definitely give it a shot)

    Yeah, I added ::hover only for desktops on purpose, because on smaller screens ::hover behavior is different because of touchscreens and stuff. Maybe I could add ::focus or ::active for these cases.

    I heard about @container queries, that's really cool thing to try. I do think that my code is pretty messy because of @media. I had to change paddings and margins inside them. Firstly I thought about writing a @mixin for clamp function, so not only typography would be adaptive to the viewport, but spacing too. I'm new to SCSS, I haven't tried @mixins yet

  • P
    Nikitossik•370
    @Nikitossik

    Hey, you can create an overlap by using pseudo elements. You have to wrap an img tag with div.someClassName and add position: relative. Then add ::before or ::after to this element and give it position: absolute so it could move inside of it, aplly background, width, height and don't forget about z-index to make it above the image.

    Also there is an approach with backgrounds with background-blend-mode

    good luck)

  • P
    Nikitossik•370
    @Nikitossik

    Hey, congrats on completing the challenge! It would be great if you added :hover for desktops only, because on small screen sizes the user would have to tap on the screen to see the content. I would just show the card the way it is in the challenge and on the large screens add the effect)

    I hope that I gave you some ideas to try, good luck!)

    Marked as helpful
  • P
    Nikitossik•370
    @Nikitossik

    Hey, congrats on completing the challenge! I think the problem is, that .button__text color overrides the color that you add directly to the .button on :hover

    You can do .button:hover .button__text {...} and there change the color.

    Also you can remove p from button and change the color directly for it, so nothing that goes higher in the cascade or has more accurate class could override the styles

    happy coding)

    Marked as helpful
  • P
    Nikitossik•370
    @Nikitossik

    Hey, nice job, but there is enough room for improvements:

    • pick the right classnames for the elements
    • avoid using fixed widths or heights, because it can cause problems like horizontal scroll, overflows on diffenrent screen sizes etc. Use max/min-width, relative units, it's more reliable
    • actually it's not bad, that you used SCSS, but preprocessors are made to reduce the amount of work. If speaking of SCSS, it has nesting, mixins, math, templates and other cool things. I'm trying to say, that you didn't benefit from it, so it wasn't important to use SCSS, because your code is plain CSS

    good luck, keep learning!

    Marked as helpful
  • P
    Nikitossik•370
    @Nikitossik

    Hey, you've done really good)

    Literally today I started learning SCSS and completed this project using it. Recently I've been also practicing CSS grid, it's really cool and gives you some new approaches on building layouts. Do you know some of the best practices in SCSS (where to use mixins, templates and so on)? And how did you actually learn this?) I'd like to know

  • P
    Nikitossik•370
    @Nikitossik

    Hey, nice job!)

    I've just looked in your code in dev tools, the thing is that the value for border-radius is invalid, just try removing commas and everything works as expected

    good luck)

    Marked as helpful
  • P
    Nikitossik•370
    @Nikitossik

    I think for this challenge no media gueries are needed, because we have only 1 component. It's good , that you applied max-width for this

    Also if speaking about @media in general, I often question myself if I need it or not, but I think you should always use @media if something breaks or looks bad. Actually you can watch Kevin Powell yt channel about responsive web, he gives many useful pieces of advise about it. I often use some of his tricks to write responsive design easier

    I hope that I helped you somehow, good luck)

    Marked as helpful
  • P
    Nikitossik•370
    @Nikitossik

    Hey, good job)

    Here are some improvments I'd like to tell you:

    • instead of adding 2 <img> tags, you can use <picture> to change the image on the certain breakpoint if needed
    • when you flip the content on the mobile version, you could change a @media query to max-width: 700px (card width), because a horizontal scrollbar appears between the breakpoints. Or you could change width: 700px to max-width: 700px, just to avoid fixed width, because it can cause issues

    Good luck)

  • P
    Nikitossik•370
    @Nikitossik

    Hey, good job

    Actually I'd like to give you some improvements:

    • on 400px breakpoint the image is not responsive, you can use max-width: 100% to fix this
    • instead of using ::before element you can use picture tag to change the path to image on different breakpoints

    Good luck!