I'd like to improve upon my solution to share popover. There seems a little junk in loading icons, when initially clicking share button. I'd like to learn how to mitigate this and improve code structure of share popover.
Accessibility / responsiveness mainly but anything will do.
figuring Accessibility / Responsiveness mainly but anything will do
Anything really. Something is inaccessible? Weird or clunky? Let me know. Thx 🙏
Assess the accessibility, especially for radio group component.
I've tried to redirect to social networks when the user clicks on the icon with different methods but it doesn't work. i'm using nextJs if anyone has any suggestions.
Hi, congratulation on finishing this challenge!
I like your take on shared component and using of inline svgs. They seem to render asap. In my solution I loaded them via <img> but they seem to have some delay to them.
If i can give you a tip how to make experience little better I'd make ArticleCard more responsive. ArticleCard has currently fixed size which make it quite rigid and hard to reuse. One place where rigidity shows up is distorted Image, which is sized up relative to its parent while ignoring its intrinsic aspect ratio.
I think solution in general could be to leave elements grow with their content and only cap the extremes either by putting hard stop to it with max-* or by shifting layout.
I'd also suggest cleaning up the code a little, removing unused code, fixing spelling mistakes like setiSClicked, running code through formatter etc. This would put a little bit of shine to it and showed that you care.
Hopefully you find my rumblings at least somewhat useful.
Good luck with future challenges!
I'm most proud of the responsive positioning and scaling of the hero image. If I were to do this project differently next time, I would probably try another JS framework.
What challenges did you encounter, and how did you overcome them?The hero image positioning is tricky. I think I've come up with an okay solution, but there might be a better way.
What specific areas of your project would you like help with?I am open any helpful constructive feedback that will make me a better developer.
Hi @DarrickFauvel,
Nicely done I like the result overall. Going over your codebase I found it very interesting that you divided components into different responsive views. I never thought about that. Also, I liked how you've extended tailwind config with fluid typography, I will probably steal that.
I don't have many tips, only that you can prevent button's content from wrapping by using whitespace-nowrap.
And that at width 980px, your layout is breaking as it is not edge-to-edge anymore and then again is. This doesn't look all that pleasant. In my opinion thing to remember is not to strain the design too much with fixed widths. Let it breath even if it means going beyond its original proportions.
Hope my note will help you in some way.
Hey @MesrouaDjamel,
Congrats on finishing the challenge! I like the result overall. Thing I'd would try to improve though is code quality in ListTestimonialCard. It can get quite messy when you keep data together with code like this, also the conditional rendering logic could use some simplification as well.
I'm proud of using grid to make the layout
What challenges did you encounter, and how did you overcome them?I encountered the challenge of styling space between paragraphs and component as their appear in the design. How to know the current space between paragraphs so i can know the amount to add up for example i could set margin of paragraphs to zero but still there was some space between them making it difficult to know the space to add so as they could look like in the design. I used developer tool.
What specific areas of your project would you like help with?I would like help on best ways how to style and calculate space between paragraphs. Is good to use margin, gap or other ways?
Hi @Jackson-zablon15,
you've created nice solution. The way you handled the top stripes on those feature cards inspired me 🕵️♀️ and I reimplemented mine too .
Regarding the spacing inside feature cards I'd handle it slightly different. It's better when header of feature is sticking to the start of the flex container and icon to the the end of it. You already using flexbox so its as easy as removing those margins and setting items-justify: between on your flex container.
Regarding layout shift, i'd propose to use larger width when shift happens. Currently it shifts prematurely and horizontal scrollbars appear between 750px...1150px
Hope this note will help you in some way.
I'm most proud of 3 things. 1. Finishing or at least completing this project. I know it's a small one, but it has been a while since I've completed something here. 2. How good the spacing is for the elements. 3. Implementing some functionality with react and typescript in my button element.
Next time, I will consider both the mobile and laptop screens when deciding how to establish components.
What challenges did you encounter, and how did you overcome them?My biggest challenge had been the positioning for the main card, and how to space the elements within the card. I took my time looking for helpful resources and videos about positioning and spacing.
What specific areas of your project would you like help with?I'm not 100% sure if my spacing is exactly like the example given, so I am open to hearing about that. Specifically, the section that has item details.
Hi @Sean-LH,
congrats on finishing this solution! I like you approach regarding, responsiveness of an image, it works great here.
Overall solution looks good on desktop but it falls short on extra wide displays or when I'm resizing from mobile to tablet. I think main culprit here is that you've decided to use absolute positioning as layout building tool. There are much better alternatives like a flexbox or grid. With flexbox page container you can easily control positioning of your card across devices of all sizes. You can also add some margin so there is breath room around the card on small devices.
Hope i made a sense and it gave you right idea Cheers
I'm happy that I was able to finish this challange with no mayor hurdles.
What challenges did you encounter, and how did you overcome them?Nothing that I can think of this time.
What specific areas of your project would you like help with?I'm open to comments and suggestion that will help me to improved as a developer. Thanks
I like your solution, namely how you solved image responsiveness with bg. I was just wondering was there particular reason you went with span instead of div in here?
<div class="image-container">
<span class="background-image" role="img" aria-label="Gabrielle Essence Eau De Parfum image"></span>
</div>