All solutions

Hello everyone 👋,

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. 🙇‍♂️🙏

Hello everyone 👋,

Here's my solution for Pod request access landing page.

In this solution, I am using the Constraints validation APIs to validate the email address field. I am also using patternMismatch over typeMismatch for stricter email formats since the default typeMismatch also accepts email addresses without a top-level domain, i.e. x@y is a valid email address.

Any feedback and suggestions on how I can improve are very welcome! Thanks and happy coding! 🙇‍♂️🙏

Hello everyone 👋,

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! 🙇‍♂️🙏

Hello everyone 👋,

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.

The axis definitions for the Fraunces variable font can be found here.

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! 🙇‍♂️🙏

Hello everyone 👋,

Here's my solution for FAQ accordion card without JavaScript. I'm using <details> and <summary> HTML elements instead.

The illustrations should also scale properly when the base font-size changes and it should not shift when the accordion opens, unless it overflows.

One thing I've learnt was that to remove the summary disclosure triangle for webkit-based browsers such as Safari, we have to use summary::-webkit-details-marker { display: none }. Sigh... Safari 😔

I'd appreciate it if you can provide feedback on my solution. Thanks and happy coding! 🙇‍♂️🙏

Hello everyone,

I'd appreciate it if you could share your feedback on my solution.

One of the things I've learnt from this was how to display different images for different device pixel density with <picture> and <source>. Also learnt how to test this with the browser's responsive design mode (use the DPR setting).

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. 🙇‍♂️🙏

Hello everyone o/

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?

Hi there, I'd appreciate any feedback or tips.

Hello everyone o/

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.

p {
  max-width: 55ch;
}

More about ch unit.

More about length units from MDN website.

A useful HTML element to load different images based on media, pixel density or image type (webp, avif, etc).

<picture>
    <source srcset="/image-desktop.jpg" media="(min-width: 50em)">
    <img src="/image-mobile.jpg" alt="" >
</picture>

More about picture element from MDN website.

Something I found useful about list-style from MDN website:

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";
}

I learnt that a nice way to get the button text colors to match different background colors is to set color: black; and mix-blend-mode: screen;.

About blend-mode from MDN website:

screen

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.

I used a mix of grid and flex (and severe use of the gap property) depending on what I think would have made things easier overall.

• main layout = grid
• rating content = flex
• testimonials section = flex
• testimonial content = grid

Would you have taken a different approach? What would it be and why?

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/

I've been trying out CUBE CSS and it's been an interesting and fun experience. I'd appreciate any feedback or suggestions on how I can improve.

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?