@rsentanu635Submitted 9 months ago
Hello, I would like some feedback on just the organization of my code and how I can make it look cleaner overall. (i.e. bracket placement, line spacing, etc)
Jadurani Davalos
@jaduraniAll comments
- @jaduraniPosted 9 months ago
"how I can make it look cleaner overall. (i.e. bracket placement, line spacing, etc)"
Hey! I'd recommend you check out Prettier:
- https://prettier.io/
- VSCode Extension -- if you enable it, your code will be auto-formatted when you save your file (of course this depends on whether you use VSCode or not, but Prettier has support for other code editors which you can check out here: https://prettier.io/docs/en/editors
Hope you found this helpful! Happy coding! 🎉
0 - @brycezusanSubmitted 9 months ago
I've just completed a front-end coding challenge from @frontendmentor! 🎉
You can see my solution here: https://effortless-zuccutto-9d2bf5.netlify.app/
Any suggestions on how I can improve are welcome!
@jaduraniPosted 9 months agoHey! I was checking out your solution and here's my feedback:
- Spacing
- Try to lessen the horizontal padding of the main content and get it as close to the mock-up as possible
- Ingredients section
- The alignment of the table contents could be improved
- Try to use the
<table>HTML tag and its related tags
- Image
- The image looks perfect on desktop view. However, on mobile view, it has to stick to the edge of the screen (without padding) and without rounded corners
Hope you find this helpful. Congrats on submitting your first solution! 🎉
2 - Spacing
- @evertznerSubmitted 9 months ago@jaduraniPosted 9 months ago
Hello, I looked at your solution and have a few comments:
Phone number field
- I could enter letters
- I could enter a single character and it passes
Next Button
- On hover, it turns purple. It should be
#164A8A
Yearly / Monthly Toggle
- Color should be
#022959
Form Steps (The form numbers on the side)
- Active form steps don't have white borders on the design
Hope you find these comments helpful. Overall, congrats on your submission! 🎉
Marked as helpful1 - @Mussab12Submitted 10 months ago
When designing this page I find difficulty in making the layout of the qr-code-container. I have tried to adjust it according to different screen sizes. It's not accurate but I have tried my best.
@jaduraniPosted 10 months agoHello!
Congrats on submitting your solution :)
"I find difficulty in making the layout of the qr-code-container"
I saw that you've set fixed width and height for the container. This makes it difficult to adjust the container according to different screen sizes. Try setting a max-width for the card container only (but not height, let the contents expand the container vertically and handle the height). And center the container in page vertically and horizontally.
Hope this was helpful. HAPPY CODING!
1 - @AfgantarSubmitted 10 months ago
Images load slowly, please give me some feedback on how to optimize image loading and image placeholders so user don't stare at white screen as they wait for the image to load. And also, please give me some tips on accessibility for my website such as labelling or good user experience in general. Your feedback would be helpful and very much appreciated
@jaduraniPosted 10 months agoHello,
Good work :) Regarding your concern on "how to optimize image loading", I have some recommendations:
- Optimize the image size itself. My suggestions:
- Use imagemin to compress images
- Use image processing platforms, I personally use Imgix
- Use
srcsetfor the image tags. See references below:
Best,
Rani
Marked as helpful0 - Optimize the image size itself. My suggestions:
