Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
12
Comments
30
Grzegorz Sterczewski
@gsterczewski

All comments

  • Julius Macharia•100
    @MashaKE254
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    Could be better but i think the use of Divs.

    What challenges did you encounter, and how did you overcome them?

    Designing the last part I used divs and border-bottoms but I know there is a better method. If you know please tell me

    What specific areas of your project would you like help with?

    The bottom part.

    Recipe Page using HTML and CSS

    1
    Grzegorz Sterczewski•680
    @gsterczewski
    Posted over 1 year ago

    Hey @Jumanji-21, regarding that bottom part, main problem is setting fixed height on .container class.

      width: 800px;
      height: 2130px;
      border-radius: 12px;
      background-color: hsl(0, 0%, 100%);
      padding: 25px;
      margin-bottom: 50px;
    }
    

    Remove it, and it should fix your overflow problem. Try to avoid setting height on elements, and if you have to do it consider relative units.

    Good luck!

  • Kareem Ahmed•40
    @kiko19
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    being able to work under pressure

    What challenges did you encounter, and how did you overcome them?

    creating the project in short time

    What specific areas of your project would you like help with?

    i think till now nothing , cuz the project was very easy

    display:flex ; responsive web design as @media screen ;

    1
    Grzegorz Sterczewski•680
    @gsterczewski
    Posted over 1 year ago

    Hey @kiko19 congratulations on completing this challenge 👏.

    I've noticed a one thing you could improve. Make sure your headings are in order, right now you have h3 before h2. Check this article for reference

    Once again, congratulations on your work.

    Best of luck! 🤞

  • Anna•190
    @aproskur
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I used styled components for the first time. Next time I'll minimize the use of unnecessary nested styled components, preferring instead to style simple tags within them. Overall, I liked the flexibility styled components offered for dynamically changing styles.

    What challenges did you encounter, and how did you overcome them?

    Ensuring responsive design for both small and large screens presented the most significant challenges for me

    Matching pairs game using React.js and styled-components

    #react#styled-components
    1
    Grzegorz Sterczewski•680
    @gsterczewski
    Posted over 1 year ago

    Hey Anna congratulations on completing this challenge 👏.

    I noticed a few things you could improve, I'll address a few of them.

    • On the desktop I see an unnecessary horizontal scrollbar. This is because you set overflow:scroll in the page_gameContainer... class. Removing this rule should solve this particular problem.
    • Consider adding height:100% to body and perhaps page_gameContainer to fill 100% of the height on the desktop.
    • You may also want to consider using button instead of div for clickable elements, this will improve accessibility and allow the game to be controlled using the keyboard.

    Once again, congratulations on your work. Best of luck!

    Marked as helpful
  • Андрій Рогов•1,155
    @Andrii-Rohov
    Submitted almost 4 years ago

    HTML & SCSS and JS for mobile menu

    2
    Grzegorz Sterczewski•680
    @gsterczewski
    Posted almost 4 years ago

    Hello Andrii-Rohov 👋, my name is Grzegorz.

    Your solution looks super awesome on desktop, and it's alomost pixel-perfect with the design.

    One thing to check it's the responsiveness on screen width < 768px, because right now your layout does not fit on the screen.

    I'm sure it is just a small overlook.

    Overall, I am impressed with your work and animations that you add.

    Keep up the good work! 💪

    See you on the coding trail 😉

    Cheers!

    Marked as helpful
  • vishal wankhade•495
    @Vishal-wankhade
    Submitted almost 4 years ago

    stats preview card-component main challenge solution using Html & css

    2
    Grzegorz Sterczewski•680
    @gsterczewski
    Posted almost 4 years ago

    Hello Vishal-wankhade 👋, my name is Grzegorz.

    I think you set incorrect url for background-image, for now it doesn't show up.

    I would also rethink usage empty article for displaying image as a background.

    article should be used for displaying stand-alone content, right now there is no content at all. Perhaps img element would be more suitable here.

    I hope this will be helpfull to You.

    Keep up the good work! 💪

    See you on the coding trail 😉

    Cheers!

    Marked as helpful
  • Chandra Shekhar Pawar•110
    @Shekharpawar1
    Submitted almost 4 years ago

    faq card

    1
    Grzegorz Sterczewski•680
    @gsterczewski
    Posted almost 4 years ago

    Hello Shekharpawar1 👋, my name is Grzegorz.

    Regarding your question, you can set overfow: hidden on your container.

    I hope this will be helpfull to You.

    Keep up the good work! 💪

    See you on the coding trail 😉

    Cheers!

  • devansh•20
    @devansh-ios
    Submitted almost 4 years ago

    single price grid component

    2
    Grzegorz Sterczewski•680
    @gsterczewski
    Posted almost 4 years ago

    Hello devansh 👋, my name is Grzegorz.

    Regarding border on main container.

    • Add background-color to body, you should have exact color in style guide
    • Try removing the border: 1px solid grey rule, but leave border-radius.
    • Play around with box-shadow property
    • You don't need border-bottom-right-radius and border-bottom-left-radius on .right-container, instead add overflow-hidden on .container and it should do the trick.

    I hope this will be helpfull to You.

    Keep up the good work! 💪

    See you on the coding trail 😉

    Cheers!

    Marked as helpful
  • Misty Griffin•80
    @mistyrgriffin
    Submitted almost 4 years ago

    Mobile first site using CSS Grid, Flexbox, and Local Storage

    1
    Grzegorz Sterczewski•680
    @gsterczewski
    Posted almost 4 years ago

    Hello Misty 👋, my name is Grzegorz.

    Regarding flexbox and grid check out this resources:

    • Kevin Powell Flexbox tutorial

    • Web Dev Simplified Flexbox in 15 minutes

    • Longer tutorial from freeCodeCamp

    • Traversy Media Grid crash course

    Maybe you will find it usefull, checkout other videos from these youtubers, because there is plenty of learning material.

    Keep up the good work! 💪

    See you on the coding trail 😉

    Cheers!

    Marked as helpful
  • dannebrob•130
    @dannebrob
    Submitted almost 4 years ago

    Four card feature section

    2
    Grzegorz Sterczewski•680
    @gsterczewski
    Posted almost 4 years ago

    Hello dannebrob 👋, my name is Grzegorz.

    I like your solution, it's looking pretty good.

    I have a few small observations.

    • Your <p> element right now is too narrow on desktop, maybe consider giving it more space by reducing margin-left and margin-right on .info

    • There is not enought vertical space between .info and .card-container, you can easily fix it by adding margin-bottom or margin-top

    • I would rethink using vw and vh as a unit for margins, since it cause problems with responsiveness (try to resize page to 1024x1366 and see what happens)

    • Maybe figure out other way to limit width on .info without those horizontal margins.

    Other than that, I like it.

    I hope my sugestions will be useful to you

    Keep up the good work! 💪

    See you on the coding trail 😉

    Cheers!

    Marked as helpful
  • Atharv Pote•325
    @atharvpote
    Submitted about 4 years ago

    Social Proof Section Using HTML and CSS

    1
    Grzegorz Sterczewski•680
    @gsterczewski
    Posted about 4 years ago

    Hello Atharv 👋, my name is Grzegorz.

    I like your solution, it's looking very good on desktop and on mobile.

    One thing I would tweak is responsiveness on screens 900 - 1200 px, because right now it's overflowing the screen.

    Keep up the good work! 💪

    See you on the coding trail 😉

    Cheers!

    Marked as helpful
  • Danny A. Mase•200
    @admase
    Submitted about 4 years ago

    sunnysideprojectsolution

    1
    Grzegorz Sterczewski•680
    @gsterczewski
    Posted about 4 years ago

    Hello Danny 👋, my name is Grzegorz.

    Your work is ok, there is some work to do, but it's a good starting point.

    Here's my suggestions, I hope they will be useful to you

    • On desktop there is a not enough space for Stand out... heading, increasing width in this rule should help :

    section .container { width: 55% }

    • I would add some hover and focus states on anchors in nav to improve a11y

    • I would also add focus state on .brand-link so hovering and navigating with keyboard would have the same effect.

    • Consider using inline svg instead of img in social media links, so you can apply better hover and focus effects with adjustingfill property.

    This are the things you can fix pretty fast, later we can focus on improving layout and general responsiveness.

    Keep up the good work! 💪

    See you on the coding trail 😉

    Cheers!

  • GoakingFy•50
    @GoakingFy
    Submitted about 4 years ago

    Mobile first and flexbox with css and javascript vanilla

    1
    Grzegorz Sterczewski•680
    @gsterczewski
    Posted about 4 years ago

    Hello GoakingFy 👋, my name is Grzegorz.

    Here's my suggestions, I hope they will be useful to you

    Your first try is nice, but there is a room for improvements.

    • I think you should use button element instead of div for hand,paper,scissors. That would give you a lot of accessibillity out of the box.

    • Consider adding button to close rules modal, since now it's not very accessible.

    I have some other tips, nut for now let's focus on improving those 'low hanging fruits'.

    Keep up the good work! 💪

    See you on the coding trail 😉

    Cheers!

  • Anwar•375
    @Anwar11234
    Submitted about 4 years ago

    HTML and CSS and JS website

    2
    Grzegorz Sterczewski•680
    @gsterczewski
    Posted about 4 years ago

    Hello Anwar 👋, my name is Grzegorz.

    Reagrding the css and accessibillity I have a few observations:

    • You could add focus state on clickable elements, so when I navigate it with keyboard I can see the same effect as with hover with mouse.

    • Headings are not in sequential order (you've skipped h2) and you have multiple h1 (there should be only one per page). Use h2 h3 etc. and style them in CSS if you need them to be bigger/smaller.

    • Consider adding the same hover state on social media links as in other links in the footer section for consistency.

    • Links in nav could also use some visual tips when you hover or focus on them.

    Your are on the right path, continue to improve your solution and you will get it perfect soon.

    Keep up the good work! 💪

    See you on the coding trail 😉

    Cheers!

    Marked as helpful
  • Moises•60
    @devmoises
    Submitted about 4 years ago

    3-column preview card component using HTML & CSS Flexbox

    4
    Grzegorz Sterczewski•680
    @gsterczewski
    Posted about 4 years ago

    Hello Moises 👋, my name is Grzegorz.

    You did really good job, and implemented the design almost perfectly.

    One minor thing to improve is to add focus state to the anchors, so user can navigate it with keyboard.

    Of course those links are dead, but I think it is a good practice to remember about a11y (I'm working on it myself).

    Overall, excellent work, I'm hoping to see more of your work here.

    Keep up the good work! 💪

    See you on the coding trail 😉

    Cheers!

    Marked as helpful
  • Alec•40
    @AlecDye
    Submitted about 4 years ago

    Mobile first component with Flexbox & transparent overlay

    2
    Grzegorz Sterczewski•680
    @gsterczewski
    Posted about 4 years ago

    Hello Alec 👋, my name is Grzegorz.

    Your solution is nice, but there is a room for improvements.

    • There is empty space between image and right edge of the component. You can try to set width on the image to prevent that (now you have only max-width).

    • When I decrease screen width your image gets too small, and at some point is no longer visible (you can set different breakpoint to change to mobile view sooner)

    Keep up the good work! 💪

    See you on the coding trail 😉

    Cheers!

    Marked as helpful
  • Pratyush Kumar•30
    @PratypartyY2K
    Submitted about 4 years ago

    Mobile first site using flexbox

    1
    Grzegorz Sterczewski•680
    @gsterczewski
    Posted about 4 years ago

    Hello Pratyush Kumar 👋, my name is Grzegorz.

    Try out this site http://scg.ar-ch.org/, enter the same color (in hex) as you have in h1 > span and play around with saturation and darkness.

    I did it myself and got pretty close to the design, but not 100%, maybe you will get it right.

    Keep up the good work! 💪

    See you on the coding trail 😉

    Cheers!

  • Karim•590
    @yasssuz
    Submitted about 4 years ago

    Mobile first, SCSS and Javascript todo app bundled with Vite.JS

    2
    Grzegorz Sterczewski•680
    @gsterczewski
    Posted about 4 years ago

    Hello Karim 👋, my name is Grzegorz.

    I like your solution, but I think the app (according to the design picture) should show how many unfinished todo's are left.

    Right now it shows overall todo's count (active and completed).

    I really enjoy the animation, when clearing out completed todo's 👍

    Keep up the good work! 💪

    See you on the coding trail 😉

    Cheers!

  • Dolapo Alli•20
    @dolapo-oluremi
    Submitted about 4 years ago

    Mobile First Solution Using HTML, CSS-Flexbox

    2
    Grzegorz Sterczewski•680
    @gsterczewski
    Posted about 4 years ago

    Hello Dolapo 👋, my name is Grzegorz.

    Your problem with padding on the right is cause by this rule :

    
    .card-components > div{
        height: 60vh;
        padding: 4rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    } 
    

    Try to add width property to it and see if it helps (for example 33%).

    Keep up the good work! 💪

    See you on the coding trail 😉

    Cheers!

    Marked as helpful

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

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

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