Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT display page using HTML and CSS

@ARMoretech

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Mateusz 390

@MatPawluk

Posted

Congratulations on sharing this project! 🎉👏

  1. Semantic Structure: The overall structure seems fine with appropriate HTML5 semantics.
  2. Accessibility: Alt attributes on images are helpful for accessibility. Ensure they accurately describe the image content for screen readers.
  3. Spacing and Indentation: Consistent indentation makes the code readable and maintainable.
  4. Link Attributes: Check if the links (href) for the challenge and the coder are accurate and working.
  5. Meta Tags: Meta tags for charset and viewport are correctly set.
  1. Selectors and Styling: The selectors used are straightforward, targeting classes and elements. Consider using more descriptive class names for better readability and understanding.
  2. Colors: The color choices seem appropriate, though using named variables or CSS custom properties might enhance maintainability.
  3. Layout and Positioning: Consider using more modern layout techniques like Flexbox or Grid for better responsiveness and positioning control. The current code uses percentages which might cause issues in responsive design.
  4. Style Repetition: There's some repetition in the CSS properties that could be consolidated to make the code more concise.
  5. Commenting: Adding comments to explain complex styling or sections could improve code maintainability.
  1. Responsive Design: Ensure the design is responsive across different devices by using media queries or more responsive units (like %, vw, vh).
  2. Consolidation: Look for opportunities to consolidate repeated styles.
  3. Naming Conventions: Consider using more descriptive class names for better readability and understanding.
  4. CSS Methodology: Think about adopting a CSS methodology like BEM (Block Element Modifier) or SMACSS (Scalable and Modular Architecture for CSS) for better structure and scalability.

Overall, the code works and creates a basic NFT preview card component. To enhance it further, consider implementing the suggestions mentioned above for improved readability, maintainability, and responsiveness.

Marked as helpful

0

@ARMoretech

Posted

Thanks for the observation@MatPawluk

1

Please log in to post a comment

Log in with GitHub
Discord logo

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