Looking to hire developers?
@gsterczewski
@Jumanji-21
Submitted
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.
@gsterczewski
Posted
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!
@kiko19
Submitted
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
@gsterczewski
Posted
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! 🤞
@aproskur
Submitted
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
@gsterczewski
Posted
Hey Anna congratulations on completing this challenge 👏.
I noticed a few things you could improve, I'll address a few of them.
overflow:scroll in the page_gameContainer... class. Removing this rule should solve this particular problem.height:100% to body and perhaps page_gameContainer to fill 100% of the height on the desktop.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
@Andrii-Rohov
Submitted
Hello. This project was not that hard. I had a lot of fun building this page, hope you would check it and point out the errors.I think i get more confident with my layout skills, and get used to scss, but my main weak point is JS =| ... Anyway, if you have any feedback about my solution please leave a comment.
@gsterczewski
Posted
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
Submitted
hey I am vishal wankhade, this is my first challenge on frontend mentor. review it give your valuable feedback. love
@gsterczewski
Posted
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
@Shekharpawar1
Submitted
how to remove the image corner which is outside the container
@gsterczewski
Posted
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-ios
Submitted
if you do the preview website the page is showing fine but i think there is some problem in my code because of that it is showing the three container stacking on over each other , feel free to give any suggestion .
@gsterczewski
Posted
Hello devansh 👋, my name is Grzegorz.
Regarding border on main container.
background-color to body, you should have exact color in style guideborder: 1px solid grey rule, but leave border-radius.box-shadow propertyborder-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
@mistyrgriffin
Submitted
I really struggle with getting my elements aligned in various positions on the page. Are there any extremely simplified grid and flexbox resources out there for people who are brand new to web development and coding? Any easy tricks to help with positions and alignment? Also, any other resources and/or advice are welcome! Thank you in advance for your help!
@gsterczewski
Posted
Hello Misty 👋, my name is Grzegorz.
Regarding flexbox and grid check out this resources:
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
Submitted
My second Frontend Mentor challange.
Please give me any feedback you can! Thanks in advance!
@gsterczewski
Posted
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
@atharvpote
Submitted
Would love to hear your suggestions
@gsterczewski
Posted
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
@admase
Submitted
Any feedback is much appreciated. I still need more practice with responsive design and media queries for CSS3.
@gsterczewski
Posted
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
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
Submitted
Hello, this is my first fronted challenge, I have started with an advanced one, although I do not have enough knowledge to create this challenge in a more orderly and clean way, I know it is not the best way to do it but I could not think of any other way vanilla form. Advice to improve, both in methodology and logic, would be appreciated, thanks
@gsterczewski
Posted
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!
@Anwar11234
Submitted
I would love feedback on my CSS code quality also, any note about accessibility would be great
@gsterczewski
Posted
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
@devmoises
Submitted
This challenge is very interesting, it has its details to consider, I really liked it. I await your advice and recommendations. Thanks.
@gsterczewski
Posted
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
@AlecDye
Submitted
What is the preferred way of styling the <picture> element? I think wrapping it with a container div (similar to the standard practice of wrapping an <img> element with a container div) adds an unnecessary div to the html.
@gsterczewski
Posted
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
@PratypartyY2K
Submitted
How to bring the same mix-blend mode to the picture as the given design?
@gsterczewski
Posted
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!
@Galielo-App
Submitted
I tried for the first time the new javascript API called "MutationObserver" and it's awesome. I will clearly use it in a few projects I have in mind because you can have a ton of control and observe every change in the dom easily.
Do you guys have some advice on how to use this API?
For those who never heard of MutationObserver, you should absolutely take a look at my code!
Happy coding :D
@gsterczewski
Posted
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-oluremi
Submitted
when dragging the screen size down, I am unable to maintain equal padding on the right side of the card component. I could use some help reviewing the CSS, thank you.
@gsterczewski
Posted
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
@awaiskorai
Submitted
Tried my best, if anyone can provide feedback upon best practices and things that need to be improved. Would really appreciate. Thanks.
Happy Coding :D
@gsterczewski
Posted
👋 Hello awaiskorai,
I like your solution, it looks good and it is responsive.
Only thing that catches my eye is your usage of headings. I think in this context it may be confusing for screen readers for example.
Headings should describe sections of the page.
In this example you created heading to display age and paragraph to display name. I think you could consider using a different tag, but I could be wrong, so verify it yourself.
<p class="name">Victor Crest</p>
<h2 class="age heading">26</h2>
Anyway, great job.
Good day and happy coding.
@JakubKepak
Submitted
Any feedback greatly appreciated; as always.
@gsterczewski
Posted
Hi Vincent
I like almost everything about your solution, but maybe you could consider using different breakpoint, or add another, because right now, on screen widths from 400 to about 700 your component is kind of malformed.
Anyway, cool project.
Cheers!
@WebLytic
Submitted
Will Love to have Feedback.
@gsterczewski
Posted
👋 Hi there WebLytic
Good effort, your solution looks good and it's responsive.
I have few tips, I hope they will prove useful.
Currlently there are no hover states on buttons/links and icons except those in the header, so adding them could improve user experience.
One of your a elements have href attribute set to btn-2 that leads to 404 on vercel, I think it is a bug, perhaps you meant to use class?
I would be nice if you could consider adding some support for keyboard users, so they can navigate yor site (make buttons and anchors focusable).
Anyway, I think you are going in the right direction, and I hope to see your future projects. 👍
Cheers!
@pklepa
Submitted
I liked this challenge a lot, it has some nice details and interesting API implementation.
I used React with create-react-app as the basis, Styled Components for CSS-in-JS and component reusability and finally although unnecessary, I brought axios for the API integration.
I would love to hear comments about the page.
Cheers
@gsterczewski
Posted
Hey, I like your work.
Maybe you could consider adding some more support for keyboard navigation? It will make your project more accessibble. Currently it is hard to figure out on which element is focus set.
Overall good job.
Cheers!
@jeantiston
Submitted
I know it's a bit overkill to use React for a little bit form handling but I was practicing React and I didn't really plan out this particular project properly. If you can be kind with your comments that would be appreciated :))
Also, I just noticed that the logos are missing. They were there before I deployed it to Vercel. I'll try and find out tomorrow what's the problem but if you have any insights on why it is missing, feel free to comment. Thanks!
@gsterczewski
Posted
Hi jeantiston,
I gave it a quick look, and I think logos are there, but their opacity is set to 1%, so it could be the main problem.
Good job by the way.
Cheers.
@McClef
Submitted
Please feedback will be highly recommanded.
@gsterczewski
Posted
Hello Martins Michael 👋,
Here's my suggestions, maybe they will be useful to you
<hr> element is currently too thick, try to set border to 0 and border-top: 1px solid with appropriate color
Also, consider changing h3 heading to h1 since it's a good practice to have them in order
Maybe add some space between .container and .attribution
Consider adding some @media to change position of the background images on smaller screens, since right now they are out of the view
Keep up the good work! 💪
See you on the coding trail 😉
Cheers!
