@brukmg
Latest solutions
Interactive Rating Component including web accessibility standards.
#accessibilitySubmitted 9 months agoI would like to know how I should've overcome the background issue I mentioned. I also wonder if the element classes I used were appropriately named. Also, if the JS I used could've been done more optimally.
Newsletter Signup With Success Message.
#sass/scssSubmitted 9 months agoI would like to know how to style the input box with the autocomplete still on. From my research it was difficult to tell how to do this properly.
Article Preview Component
#sass/scssSubmitted 9 months agoI had trouble working out whether to use an image directly or as a background in a div element. It's literally the first thing to configure. I got stuck because I was looking into the pros and cons of which approach to take. I'm still not 100% on when to use which, and why. I wanted to decide based on responsiveness and alignment of the image.
Grid Testimonial Challenge
Submitted about 1 year agoPerhaps some clarity on how the screen should look at widths between the mobile and desktop designs. I'm gathering it's my own opinion at this point, but I was toying with having a different grid design at the in-between design widths. For example, a two-column grid.
Responsive Four Card Feature Section
Submitted about 1 year agoI still create spacing between an element and the element below it by using margin-bottom. It works, but I'm not sure if I should use a different method to accomplish the spacing. I'm also trying to use em and rem units more, instead of px; and I'm still not sure if I'm using them properly.
Latest comments
- @Devs-advocate
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.
- P@juliengDevWhat 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-advocateReally 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.
- @mroungouWhat 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-advocateVery 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.
- @JLizcano10What 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-advocateReally 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.
- @Adhi-S12What 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-advocate#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.
- @moncadadWhat 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-advocateVery 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 helpful
