@brukmgSubmitted 7 days ago
Devs-advocate
@Devs-advocateAll comments
- @Devs-advocatePosted 4 days ago
Nice work @brukmg. The dynamic functionality of the daily, weekly and monthly selections all work well. I'm not sure if it's deliberate, but some of the active state styling isn't present. I like the responsiveness using grid to collapse and expand the number of columns using grid. There's a "#react" indication at the top yet I don't see any React in your source code.
0 - @juliengDevSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
This project allowed me to deepen my knowledge of TypeScript and web accessibility. Here are some key takeaways:
- Object-Oriented Programming in TypeScript: I structured the code using a class, which improved the organization and maintainability of the code.
- Advanced Accessibility: I implemented ARIA attributes and managed focus to ensure an inclusive user experience.
- Error Handling: I added an accessible error handling system to improve user feedback.
- Responsive Styles: I created styles that adapt to user preferences, including for motion reduction.
no particular difficulties with this project
What specific areas of your project would you like help with?Let me know if you see anything that i can improve, thank you :)
@Devs-advocatePosted about 1 month agoReally nice solution Gilbert. The dimensions are near perfect. The functionality is good too with your implementation of an error message. I like your use of typescript which is something I'm learning at the moment. Your accessibility features looked more than adequate as well.
0 - @mroungouSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
This is the second time I have completed this challenge and looking back at the first time I completed this challenge I can see that I have improved a lot.
Next time I will try using a framework.
What challenges did you encounter, and how did you overcome them?At some point, the regex and the method I was using to check the validity of the email weren't working as expected. I proceeded to troubleshot the problem and determine the root of the issue and modified my code and logic.
What specific areas of your project would you like help with?If there any tips I can do to improve my code please let me know :)
@Devs-advocatePosted about 1 month agoVery nice work on the desktop page. It's practically identical. All your elements and functionality are working well. You could make the SVG in the mobile design more responsive by giving it width: 100% of the container it's in. Other than that, good job.
0 - @JLizcano10Submitted about 2 months agoWhat specific areas of your project would you like help with?
if you have any tips, recommendations or corrections about my solution I would be very grateful.
@Devs-advocatePosted about 2 months agoReally good job. Fonts, colors, text alignment are virtually identical. I used cropped images from the original jpeg to try and get what they were looking for.
0 - @Adhi-S12Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I assumed it would take a very little time if I did this in react since there are resuable components in this challenge. But, I actually would've completed it very quickly if I've used vanilla html,css
What challenges did you encounter, and how did you overcome them?couldn't think of a way to get the quote svg to move behind the text element , finally gave up and reduced opacity of the quote to look somewhat decent enough and finished the challenged. Still not satisfied with the result.
What specific areas of your project would you like help with?I miscalculated on the time it would take to finish the challenge. My assumption that React will help to reduce the time taken to finish this was wrong. Give me ideas on how to move the quote behind the text element in the first card.
@Devs-advocatePosted 6 months ago#container { position: relative; z-index: 0; } #img { position: absolute; top: 0; right: 23px; z-index: -1; }Give the image a lower z-index so it's behind the text. There's a lot of online resources that can give better examples than I have, but making your image absolute and the container it's in, relative will place the image. The z-index will modify if it's in front or behind. Apart from that, your structure and details are very good. Nice work.
1 - @moncadadSubmitted 6 months agoWhat specific areas of your project would you like help with?
On the design itself the list bullet points are aligned with the list text. If anyone has any tips on how to do that please help me out. Perhaps it's a simple fix, but I didn't figure it out :(
@Devs-advocatePosted 6 months agoVery nice work. I don't see any issues with your bullet point alignment. Perhaps you fixed this already. I see you used li::marker element, so you've edited the properties on that. I added right side padding to it and used content: '\25AA'; to change bullet point style. Your outcome looks very similar overall.
Marked as helpful0 - @sammie-createSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I tried using grid layouts on different screen sizes.
What challenges did you encounter, and how did you overcome them?Responsiveness, i used different viewport heights with relative units.
What specific areas of your project would you like help with?How to make my page take all the viewport of an iPhone 11pro or related devices.
@Devs-advocatePosted 6 months agoReally nice similarity. You kept your attribution below which threw off the centering, but the container sizes and proportions look spot on. Other than that, some font size tweaking is all I can see that could be changed, but very good job.
Marked as helpful0 - @LANRIE-DEVSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of the way and manner I attended to the bumps I encountered and how I took my time to solve each and every one of them.
And next time, I would make sure I apply every bit of what I have learned and continue to ask questions and be inquisitive.
What challenges did you encounter, and how did you overcome them?I encountered the challenges of actually having to structure the NUTRITION SECTION properly, but thanks to KEVIN POWELL, I was able to catch up in no time.
What specific areas of your project would you like help with?I would love to learn more about CSS FUNCTIONS and how they are used to counter different problems in CSS.
@Devs-advocatePosted 7 months agoVery nice job. Looks pretty much spot except for the margin-top of your container. You also had the same issue with the Outfit font for the numbering in the Instructions section. The "1" didn't render as it was supposed to. Well done.
Marked as helpful1 - @osmarmcnSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
Busquei reproduzir o projeto o mais próximo do que pedido. Acrescentaria algumas animações.
What challenges did you encounter, and how did you overcome them?Organização da projeto sem ficar utilizando a div.
@Devs-advocatePosted 7 months agoNice job. Looks like your HTML was spot on. You seem to only have one font family for the text. I declared one font in the root selector then used the other at more specific elements. Your element sizes look proportionate but lack preciseness. I was able to calculate pixel height and widths for elements using Microsoft Powertoys screen ruler. Its free on Windows accounts, and has helped me heaps. It's not perfect, but it's invaluable for these challenges, depending on how fast or precise you want to be.
Marked as helpful0 - @AbecarneSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
This one is the first time for me not using Figma. So i had to use my best judgment for styles such as width, height, padding, margin, etc. I think i did well enough to publish it
What challenges did you encounter, and how did you overcome them?N/A
What specific areas of your project would you like help with?Feel free to share any feedback :)
@Devs-advocatePosted 7 months agoVery nice work. I don't have figma, so I used microsoft powertoys screen ruler. I saw a youtuber using it recently and it worked great for me. It gives horizontal and vertical lengths in pixels. Best of luck in future.
Marked as helpful0 - @woohyodongSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
:)
What challenges did you encounter, and how did you overcome them?:)
What specific areas of your project would you like help with?:)
@Devs-advocatePosted 8 months agoWow. Very nice likeness there. The only issue I can see there is the height. I got around this by using Microsoft Powertoys Screen Ruler. It's free, and measures in pixel sizes the the horizontal and vertical lengths of the supplied jpgs.
0 - @mbattalogluSubmitted 8 months ago@Devs-advocatePosted 8 months ago
Hi MB. Nice likeness for your design. The only obvious issue I can see is the sizing. For me, I used Screen Ruler from Microsoft Powertoys to get pixel sizes for the image and the container it's in. I don't think you need the padding. Your centring with flexbox is good.
0
