Fidel Lim• 2,775
@fidellim
Submitted
Would love to ask for your feedback! Also, I would like to ask is there a better way for me to position the illustration?
Web Frog
@MasterDev333
All comments
- Web Frog• 1,840
@MasterDev333
Posted
Great work! fully responsive and close to design. Here're some suggestions.
- It would be great if you add transitions to buttons.
please add
transition: all .3s ease-in-outfor example. - on mobile view, please remove min-width for hero image
- and personally, I think it would be great if you put landing-page-container outside of header tag. Hope this helps. Happy coding ~ :)
1 - It would be great if you add transitions to buttons.
please add
- Stuart Haw• 20
@shdsgn
Submitted
This is my first time coding something by myself. If anyone could give me some feedback on I would greatly appreciate your help, good or bad :D. Thanks
Web Frog• 1,840@MasterDev333
Posted
Great work @Stuart Haw. It's a little tricky to draw background circles in this example. I suggest you use background-image or pseudo-elements. Here's my solution used pseudo elements. https://www.frontendmentor.io/solutions/profile-card-xRCu-QVRG Hope it helps. Happy coding~ :)
0 - Luca• 210
@Ducknaro
Submitted
Hi guys, I really liked doing this other website, I'll keep practising because I've noticed I have been improving my skills by doing all of these challanges. I still have a hard time fixing problems with flex-box, width, what do you suggest doing? thanks
Web Frog• 1,840@MasterDev333
Posted
Well done @Luca! Some suggestions here.
- It would be great if you make everything fully responsive.
- Font is not loaded correctly
- background images are missing https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ These are great materials for studying CSS Grid and flex. Hope it helps. Happy coding~ :)
0 - Daniel• 60
@DanielHolen
Submitted
I've tried to clean everything up (better class names, re-usable classes etc;) also adjusted the card size to better represent the original design.
Web Frog• 1,840@MasterDev333
Posted
Great work @Daniel. Your solution is spot on. I suggest you to use background-image or pseudo-elements to draw background circles rather than real doms. And if you'd like to make your class names more readable, please study BEM. Hope it helps. Happy coding~ :)
1 - Denis• 125
@DenisShkarinov
Submitted
I don't like a lot of background images in one block. Especially, do it responsive.
Web Frog• 1,840@MasterDev333
Posted
Great solution @Denis. It would be better if you use pseudo-elements or background-image rather than real doms. Anyway, it was great. Happy coding~ :)
0 Hello👋!
No specific questions but any additional feedback will be appreciated!
Thanks! 😁
Web Frog• 1,840@MasterDev333
Posted
Great work @tediko. I love your animations, especially header link hover animation. It would be better if you use anchor tags for footer phonenumber and mail. You may use tel and mailto attributes for direct call and message. Hope it helps. Happy coding~ :)
1- Moreshwar Nabar• 30
@moreshwarnabar
Submitted
Completed my first challenge. It was a bit difficult at times, but I am happy with the end result. Setting up the background was the most challenging part. It still doesn't respond perfectly at lower screen sizes. Also feel like my CSS is too long. Would love some feedback on how to style the background better!
Web Frog• 1,840@MasterDev333
Posted
Great work. Your solution is spot on. Needs some improvements while drawing background. To make background position responsive, you may use vw rather than px. so it should be
background-position: top xvw left xvw, bottom xvw right xvw;Hope it helps. Happy coding~ :)Marked as helpful
1 - Sajjad Ali \• 10
@Sajjad-al
Submitted
Please give me feedback It will help me a lot and tell me what I have done mistakes. pls it's my second-time solution
Web Frog• 1,840@MasterDev333
Posted
Great work @Sajjad-al! I have some suggestions.
- Why did you set grid for text? I think it's useless.
- Font size and spacing are slightly different
- Background patterns are missing
- I suggest you use background-image and background-repeat to draw rating stars. It's hard to draw 4.5 or 4.2 base on your solution. Hope it helps. Happy coding~ :)
0 - Mayank-Behl• 20
@Mayank-Behl
Submitted
Thank you for checking the solution. All improvements and suggestions are welcome.
Web Frog• 1,840@MasterDev333
Posted
Great work @Mayank-Behl. Everything is responsive and close to design. Your code is also semantic. I have no words to say. "Perfect!" Happy coding~ :)
1 - __alv__• 30
@alvi0407
Submitted
Feel free to point out any mistakes and I am happy to receive suggestions. Thankyou.
Web Frog• 1,840@MasterDev333
Posted
Great work @alvi0407. It would be better if you use Grid rather than flex. And when screen goes down 920px, style is broken. Please make it more responsive. Happy coding~ :)
0 - Maria Glynou• 290
@Msgl
Submitted
Any feedback would be great! :)
Web Frog• 1,840@MasterDev333
Posted
Great work. Everything is fully responsive and spot on. I've no words to say. "PERFECT". look forward to seeing other solutions from you. Happy coding~ :)
0 - Agata Sokołowska• 50
@agatablazejewska
Submitted
I'd like to know:
- is it possible to structure the HTML and CSS in a better way?
- are there any CSS tricks I could have used for this assignment?
- your opinion overall :)
Web Frog• 1,840@MasterDev333
Posted
Great solution @Agata. One suggestion, please remove breakpoint max-width:1440px. On wide screens, it doesn't look good. Happy coding~ :)
0 - Adebola Soyemi• 10
@OluyemisiA
Submitted
Any feedback or suggestions would be appreciated. Thank you very much
Web Frog• 1,840@MasterDev333
Posted
Great work @OluyemisiA. You used Bootstrap and I'm a big fan of Bootstrap also. :D Your solution is really crisp. One suggestion, it would be better if you add transitions on button. Hope it helps. Happy coding~ :)
0 - em• 70
@emityiska
Submitted
My first time ever project. I really struggled with the background part. Please advise on how you make it more responsive/ just on how my code looks like in general(whether it's readable/efficient).
Web Frog• 1,840@MasterDev333
Posted
Great work @emityiska. Some suggestions here.
- I recommend you to use background-image or pseudo-elements for drawing background rather than real doms.
- Remove border-radius on card-top. You already set border-radius to card.
Add
overflow: hidden;to card to make rounded border. Hope it helps. Happy coding~ :)
1 - jota svec• 60
@jotasvec
Submitted
any feedback?
Web Frog• 1,840@MasterDev333
Posted
Great work @Jotasvec. Your solution is pretty cool. Some suggestions here.
- It would be great if you add vertical scroll on card-accordion, now it's hard to see contents when it's all expanded.
- Remove margin-top on attribute div, instead, you may set absolute position.
- Make it more responsive Hope it helps. Overall great work!! Happy coding~ :)
1 - Marie-Ève• 55
@nonowelle
Submitted
I really had a hard time making every element fit into the smaller screens. Any tip would be appreciated!
Web Frog• 1,840@MasterDev333
Posted
Great work! Your solution is really crisp. Everything is fully responsive and has clean code. I've no words to say. "PERFECT!" Look forward to seeing other solutions from you. Happy coding~ :)
0 - Zach Kyman• 220
@zky63
Submitted
I feel like the code is a bit sloppy and could be reduced but since I am relatively new I just wanted to see if I could match the provided document by whatever means necessary. Please let me know where I could clean it up.
Thank you.
Web Frog• 1,840@MasterDev333
Posted
Great work. I've some suggestions.
- It would be better if you use background-image or pseudo-elements to draw background circles, rather than real doms.
- line div is not necessary I think
- Make your class names more readable (I suggest you BEM naming conventions)
- Hide scroll on desktop version
body { width: 100vw; height: 100vh; overflow: hidden; }Hope it helps. Happy coding~ :)
1 - Peter Klink• 165
@Peterklink
Submitted
Css is pretty messy. Any suggestions on how to make it a little bit lighter and cleaner?
Web Frog• 1,840@MasterDev333
Posted
Great work @Peter. Your solution is spot on. Everything is fully responsive and close to design. I've studied your code, but it looks good. If you make your class names more readable, please take a look BEM in your sparetime. Happy coding~ :)
1 - Xavier Guzman• 160
@XavierGM23
Submitted
Hello everyone! It was an interesting challenge,I just change the design of the "share box", hope you like it and if you have any tips I would be grateful. 👨💻💪
Web Frog• 1,840@MasterDev333
Posted
Great work @Xavier. I love your share box animation. Some suggestions.
- Social icons should be anchor tags
- Make your class names more readable (I suggest you study BEM) Hope it helps. Happy coding~ :)
0 - Favourite Jome• 1,110
@jomefavourite
Submitted
I really struggled to make it look nice on all views, but I couldn't. So I'll really like feedbacks or to see a very good solution.
Thanks
Web Frog• 1,840@MasterDev333
Posted
Great work! Your solution is really crisp. Everything is great and smooth. It would be great if you add transition to shop now button. Look forward to seeing other solutions from you. Happy coding~ :)
1 @vkomusar
Submitted
I'm wondering if the coding approach is OK, if the component is performing well at different resolutions and what I can do better/different(best practice for this component).
Web Frog• 1,840@MasterDev333
Posted
Great work. Your solution is spot on. Hover effect on sign-up button was pretty cool. Everything is great! Happy coding~ :)
0
