Skip to content
Submitted 9 months ago

https://github.com/Papi84/frontened-parctice-13.09.2024/blob/main/styl

accessibility
Papi•280
@Papi84
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I’m most proud of how I effectively utilized HTML and CSS to create a visually appealing and responsive design. The project demonstrated my ability to implement modern web design principles and achieve a clean, user-friendly interface.

Next time, I would focus on enhancing cross-browser compatibility and optimizing performance. Additionally, I’d explore incorporating more advanced CSS features and JavaScript to add interactive elements, which could further improve the user experience.

What challenges did you encounter, and how did you overcome them?

One of the main challenges was achieving consistent styling across different browsers and devices. I tackled this by using CSS resets to standardize default styles and thoroughly testing the design on various platforms to ensure compatibility. Additionally, I faced difficulties with responsive design, particularly with complex layouts. To address this, I utilized media queries and flexible grid systems to adapt the layout effectively. These steps ensured a cohesive and accessible user experience across different environments.

What specific areas of your project would you like help with?

I would appreciate feedback on optimizing my CSS for better performance and scalability, particularly in handling complex layouts. Additionally, guidance on improving cross-browser compatibility and suggestions for integrating more advanced interactive features with JavaScript would be valuable. Any advice on refining my design for enhanced user experience and accessibility would also be greatly appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • Wendy•2,130
    @wendyhamel

    Hi there!

    This is a very nice solution to this challenge.

    Normalising your css is a very good idea. It lets you focus on the design, without the hastle of working out bugs in the different browsers.

    Your css code looks neat and your class names are discriptive. This makes your code easy to maintain. I would change a few names to make it more accurate: for example

    • the card-overlay name => it's not really an overlay of the card
    • and the double class name for card-day (with the addition :first-child) => this first one is not really the day

    But this is me looking really hard to find things to improve for you.

    You could work on the semantic HTML by using more discriptive HTML tags like <section> or <article> for the card.

    You asked for help with optimizing the CSS and cross-browser compatibility, or more interactive features with JavaScript. In the case of this challenge I would discurrage that. It is a simple card, and adding to much transitions and animations can distract or even irritate users. But in other projects it may be usefull. If I have the time to look for improvements on some of your other solutions, I will keep this in mind.

    Over all, a neat solution for this challenge. I like the responsiveness without the need for or use of media queries. This card does not need them and you used nice other solutions.

    Happy coding!

  • Papi•280
    @Papi84

    Thanks a lot @poissonfou

  • Emerson Lima•200
    @poissonfou

    Great work. Very smart to use the ::before pseudo-element to create the overlay!

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord