Gregor de Cillia
@GregorDeCilliaAll solutions
Tip Calculator
Submitted 27 days agoI would like to get some feedback on accessibility. I used
<label for="">for every input. The one for the tips just references the custom input. Maybe making the other controls for the tip percentagesaria-hiddenmight be sensible.Is there some way to make the outputs (tip amount/totals) more accessible? live-regions seem relevant, but maybe not quite a perfect fit.
Newsletter Signup w/ Validation and Error States
Submitted 29 days agoPlease let me know if the error handling feels intuitive. I was considering an explicit message that tells users why an input is invalid (no @, no dot, invalid characters) but I wonder if that might be negative for UX if it's too detailed.
Article Preview Component with Toggletip
Submitted about 1 month agoTooltips are notorious for being hard with accessibility and there are different suggestions floating around depending on usecases. If you could give me your suggestion on how to make it work for this design, that would be great.
- I remembered this article from an earlier project (back when I knew much less about web) and gave it another read: https://inclusive-components.design/tooltips-toggletips/.
- Another idea I had was to make the tooltip an
.sr-onlyelement for screenreaders and a toggleable element for other users. - There is also the
aria-expandedattribute which is often used with expandable nav elements which also seems to fit.
The amount of options feels very overwhelming to me which is why the current accessibility of the tooltip is at a very bad state.
display: noneremoves the tooltip from the accessibility DOM until a screenreader user triggers a click event on a non-focusable element :(.Responsive Grid Layout: Testomonials
Submitted about 1 month agoI tried to match the design pretty closely with the font-sizes/paddings/margins which made the css quite messy. If anyone could give me some better insight in how important that is versus just playing around and focus on the (more abstract) theme of the challenge, that would be very helpful.
Responsive grid layout with 4 cards
Submitted about 1 month agoI feel like I had to use a lot of magic numbers to get the margins and font sizes right. Any recommendations on how to make that part of the code more elegant would be welcome.
Product preview with responsive images
Submitted about 1 month agoLet me know if there is any "code-smell" that stands out to you. I'm happy to polish this up a little bit more.
Responsive Recipe Page
Submitted about 1 month agoDo the layouts around the breakpoint feel good? Do you think another breakpoint for very small screens would be good?
Responsive card with social link buttons
Submitted about 1 month agoI am still not sure what the right strategy for the responsive card width/padding is. It seems to match up in the sizes from the designs but there might be a more elegant way (with clamp?) for those two properties.
Responsive Blog Preview Card
Submitted about 1 month agoThe way I had to set up
max-widthon the<main>element feels unelegant. There might even be a case for not styling semantic elements at all. I feel I need a deeper understanding of layouts in general. Any tips would be appreciated.QR Code Card
Submitted about 1 month agoAs often, I feel there is a good amount of magic numbers in the css. If you can think of more elegant approaches, I would be interested.
