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.
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!
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
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! 🤞
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
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!
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.
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!
hey I am vishal wankhade, this is my first challenge on frontend mentor. review it give your valuable feedback. love
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!
how to remove the image corner which is outside the container
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!
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 .
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!
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!
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!
My second Frontend Mentor challange.
Please give me any feedback you can! Thanks in advance!
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!
Would love to hear your suggestions
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!
Any feedback is much appreciated. I still need more practice with responsive design and media queries for CSS3.
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!
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
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!
