This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
| Screenshot | Demonstration | |
|---|---|---|
 |
 |
In this project, I have practiced the following skills:
- Creating a responsive component with semantic HTML, CSS and JavaScript
- Using the
<dialog>element and JavaScript to create a modal - Styling scrollbars in Firefox, Chrome and Safari
- Detecting if a device supports hovering with the
@media (hover: hover)media query - Using CSS relative units to ensure the page scales according to the user's font size settings
- Using CSS custom properties to allow easy customization and reusability of components
- Using Git and GitHub
To further develop this project, I would like to use a polyfill to ensure a great experience for older browsers that might not support the <dialog> element. As of September 27, 2022, the <dialog> element is supported by 92.18% of browsers in use globally.
- Accessible Modal Dialogs -- A11ycasts #19 (Rob Dodson) - A great video showing everything that must be considered when creating an accessible modal dialog.
- dialog = the easiest way to make a popup modal (Kevin Powell) - This video introduced the
<dialog>element to me, and it has a concise tutorial on how to implement and style it. - The Current State of Styling Scrollbars in CSS (2022 Update) (Chris Coyier) - This article was useful to learn how to style scrollbars in different browsers.
- Twitter - @JulioCinquina
- Frontend Mentor - @JulioCinquina