Skip to content
OverviewSolutions
10
Comments
11
Devs-advocate
@Devs-advocate

All comments

  • Gilbert•360
    @juliengDevSubmitted 25 days ago
    What 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.
    What challenges did you encounter, and how did you overcome them?

    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 :)

    Interactive_rating_component_TypeScript_Accessibility

    1
    Devs-advocate•220
    @Devs-advocatePosted 22 days ago

    Really 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
  • Malick Roungou•470
    @mroungouSubmitted 7 months ago
    What 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 :)

    Newsletter Sign-Up (Sass + JS)

    1
    Devs-advocate•220
    @Devs-advocatePosted 28 days ago

    Very 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
  • JL10•260
    @JLizcano10Submitted about 1 month ago
    What 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.

    article preview component with SCSS and JS

    1
    Devs-advocate•220
    @Devs-advocatePosted about 1 month ago

    Really 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•240
    @Adhi-S12Submitted 5 months ago
    What 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.

    Testimonials grid section using React.js

    1
    Devs-advocate•220
    @Devs-advocatePosted 5 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
  • denise•230
    @moncadadSubmitted 5 months ago
    What 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 :(

    Recipe Page

    1
    Devs-advocate•220
    @Devs-advocatePosted 5 months ago

    Very 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
    0
  • sammie-create•100
    @sammie-createSubmitted 6 months ago
    What 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.

    Responsive Product preview card component using CSS grid

    1
    Devs-advocate•220
    @Devs-advocatePosted 6 months ago

    Really 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 helpful
    0
  • Olanrewaju•80
    @LANRIE-DEVSubmitted 7 months ago
    What 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.

    Recipe page challenge

    1
    Devs-advocate•220
    @Devs-advocatePosted 7 months ago

    Very 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 helpful
    1
  • osmar mendes•50
    @osmarmcnSubmitted 7 months ago
    What 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.

    recipe page

    1
    Devs-advocate•220
    @Devs-advocatePosted 7 months ago

    Nice 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 helpful
    0
  • Anthony Becarne•160
    @AbecarneSubmitted 7 months ago
    What 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 :)

    Social Links Profile Main

    1
    Devs-advocate•220
    @Devs-advocatePosted 7 months ago

    Very 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 helpful
    0
  • woojjajja•90
    @woohyodongSubmitted 7 months ago
    What 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?

    :)

    Blog preview card

    1
    Devs-advocate•220
    @Devs-advocatePosted 7 months ago

    Wow. 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
  • Devs-advocate•220
    @Devs-advocatePosted 7 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