Skip to content
OverviewSolutions
7
Comments
7
Constantine Tereschenkov
@kdubrovsky

All comments

  • Constantine Tereschenkov•230
    @kdubrovskyPosted over 1 year ago

    Hi there, Lucas! Almost perfect solution! A few things to improve: — you have to control overflow-x on html and body tags together to prevent horizontal scrolling on WebKit browsers — try to create main promo block with pure css/html instead of solid png image. It will give you more control and flexibility to get responsive design

    Feel free to research my solution @ GitHub — it might be helpful.

    Marked as helpful
    1
  • Constantine Tereschenkov•230
    @kdubrovskyPosted over 1 year ago

    Hi! There some thing to improve your solution:

    1. Try to control overflow-x on html and body tags to prevent horizontal scrolling
    2. Try to create main promo block with pure css/html instead of solid png image. It gives you more control and flexibility to get responsive design
    3. Don't forget about box-shadow on courses cards

    Feel free to research my solution @ GitHub — it might be helpful.

    Marked as helpful
    0
  • Uvejs•370
    @UvejsiiSubmitted over 1 year ago

    This challenge helped me understand display: flex; and flex direction. All feedback is welcome thank you in advance.

    Product preview card component

    1
    Constantine Tereschenkov•230
    @kdubrovskyPosted over 1 year ago

    Hi! Nice work! Let me to highlight two tiny things to improve your solution:

    1. The button is breaking on ≈570px breakpoint. You should fix button markup and get rid of padding-left: 27% and make it with justify-content property of flex item
    2. Don't forget — you have to set width of the most of element to 100% at mobile view. Feel free to explore my solution at GitHub.

    All the best for you!

    Marked as helpful
    0
  • doublem•620
    @MarioMinchevskiSubmitted over 1 year ago

    This was a fun one! Two things that kinda puzzled me:

    • Did I pull off the image positioning in a correct way? It definitely works, but I don't know if it actually the way to go. Also, when I inspect it in Chrome, the overflow-x:hidden; did not work and there was a horizontal scroll bar. All good on Mozilla.

    • I could not get the height of the cards correct in the Desktop version. I'm sure I am missing something, but couldn't quite figure out what.

    Any feedback would be very much appreciated, thank you!

    Skilled e-learning landing page

    1
    Constantine Tereschenkov•230
    @kdubrovskyPosted over 1 year ago

    Hi, Mario! That was a great challenge, wasn't it? ) I'll try to clear for you some things:

    1. you can fix horizontal scroll by setting overflow-x: hidden for html tag (check this out)
    2. you might get rid of large image for hero section for pure css/html reconstruction of that statistics and gradient
    3. cards height is controlled by intrinsic elements size. Check line-heights, font-size and margins there to fix it Wish you the best and feel free to check my solution on GitHub 🙏
    0
  • Łukasz Lubaszewski•120
    @luckyszakul0Submitted over 1 year ago

    Hi everyone, I (for now) finished my first project using SCSS. First I was a little frustrated with it but quickly learned some things and the enjoyed the process.
    I had some problems with overflow-x not working in chrome dev-tools but everything looked alright when I checked the website in firefox and on my phone. If someone encounters any problems please let me know!
    And of course - all other feedback is greatly appreciated! Have a nice day 💜!

    First project using SCSS - skilled e-learning landing page

    1
    Constantine Tereschenkov•230
    @kdubrovskyPosted over 1 year ago

    H, Łukasz! Your work looks almost perfect but there are few thing you can improve:

    1. You definitly should try to get rid of large image in promo section and reconstruct it with simple html and css. It is great speed and visual quality improvement. (only girl with a cup of tea has to stay as png image)
    2. There is a tiny bug in Safari (iOS and desktop) with overflow-x: hidden. We have to assign that property for html to prevent horizontal scrolling. Wish you all the best and feel free to check my solution @ my github 🙏
    Marked as helpful
    0
  • Constantine Tereschenkov•230
    @kdubrovskyPosted over 1 year ago

    Hi! You should use overflow-x: hidden on html selector to prevent horizontal scroll in Safari. And it can be more effective and lightweight to create promo block with html and css instead of heavy png. Feel free to research my solution for it.

    Marked as helpful
    1
  • Andrii Iladii•210
    @AndriiIladiiSubmitted over 1 year ago

    Had some problems with curved background, if anyone have better solution for this please let me know =) I will accept any comments. I'm newbie that just trying to learn =)

    Responsive landing page Work-IT

    2
    Constantine Tereschenkov•230
    @kdubrovskyPosted over 1 year ago

    Hi! I used clip-path pseudo element for precise background curves. Let's try it!

    Marked as helpful
    0