• Gradie with Flexbox & Grid

    TheLiz5 months ago

    I made some tweaks for accessibility by making darker borders on form elements and not using placeholders in the form fields. I guess placeholders are a sticking point for a lot of users.

    I think they expected you to use absolute positioning on the phone image, but once it's resized and compressed, it's got a small enough file size that it seems safe and not to mention easier to just set it as a background image and position it bottom center. Just need to give a min-height to the container and it plays well even when resizing the browser window. Perhaps it would have been more performant to recreate the gradient background image as a proper css linear gradient, but again, once it's compressed, it's small enough that a background image is fine. I'm a big fan of moderncss.dev and use a lot of their mark up and style suggestions for accessible form inputs, checkboxes, radio buttons, and buttons in all my starter files.

    • 5

Thank you so much for linking moderncss.dev, looks like a really good resource! Perfect take on this project for accessibility, and you've executed it well.

Join Our Slack Channel
Chat and discuss solutions with a growing community of developers.