Here is my solution for Base apparel coming soon page.
For desktop image, I decided to set a fixed width and use height: 100% and object-fit: cover to cater for larger viewport sizes. How would you approach this problem of full-height images and also making it responsive for larger viewports?
Appreciate any feedback or suggestions. Thank you. πββοΈπ
Here's my solution for Ping single column coming soon page.
I've learnt that to make error messages accessible, we can use the Aria Live Regions. We can set aria-live="polite" so that screen readers will inform of the error when the user is idle, and aria-live="assertive" for more time-sensitive and critical notifications.
I'd appreciate it if you can provide feedback on my solution. Thanks and happy coding! πββοΈπ
Here's my solution for product preview card component using variable fonts.
If the browser supports variable font features, it should set the optical size of the font using the opsz axis, e.g. font-variation-settings: "opsz" 72. This progressive enhancement is introduced by using the @supports query in the CSS.
One thing I've learnt was that if you want to play with the other axis of the variable font, make sure to include it in the font import π€¦π We can do this by adding the axis and range into the font import, e.g. family=Fraunces:opsz,wght,[email protected],100..900,0..100 and then we can use the axis via the font-variation settings, e.g. font-variation-settings: "opsz" 72, "wght" 126, "SOFT" 88;.
I'd appreciate it if you can provide feedback on my solution. Thanks and happy coding! πββοΈπ
P.S. I use newer CSS properties such as padding-inline and margin-block which may not work on all browsers. Thank you @Deevyn9 for testing and informing. πββοΈπ
I would appreciate it if you could check this out and let me know any feedback on how I can improve. Thank you :)
I've spent some time contemplating on how to implement the SVG hover effect - decided on using CSS filter. If you were to implement the SVG hover effect, which approach would you prefer and why?
I would appreciate if you can check this out and let me know any feedback or tips on how it can be improved, or how you might approach this differently. Thank you very much!
Using max-width with ch lets you limit the max width of a text element by character count, more specifically the width of the glyph "0" (zero) of the given font. This adapts to different font family and font sizes.
Safari will not recognize an unordered list as a list in the accessibility tree if it has a list-style value of none.
We can fix this by either adding an explicit role="list" to the <ul> element in the markup, or add a zero-width space as pseudo-content before each list item:
ul {
list-style: none;
}
ul li::before {
content: "\200B";
}
The final color is the result of inverting the colors, multiplying them, and inverting that value. A black layer leads to no change, and a white layer leads to a white final layer. The effect is like two images shone onto a projection screen.
This one's tricky with the image centering but I think I've found a nice way to always have the image centered even with larger heights or font sizes using CSS grid.
I'd appreciate it if I could get feedback on how to improve, especially on the use of semantic HTML and accessibility considerations. Thanks everyone o/
On the "Crew" page, I feel like the mobile/tablet design gives the impression that the tab content can be navigated through 'swipe' gestures. I've implemented as such but I am unsure of the impact on accessibility. What are some accessibility considerations to take note of when implementing gesture navigation on websites?
On the "Technology" page, the desktop design shows the image aligned to the right. I'm hesitant to do so as I feel it would introduce huge gaps between the text and image on larger screens. My current solution has the image "aligned to the right" on certain screen sizes, however on larger screens it'll have gap to the right border. How would you go about dealing with this problem? Would you also deviate from the design?