NFT preview card component



Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
View Challenge

Design Comparison




Accessibility Issues


HTML Issues

View Report

Alec Joseph Burio’s questions for the community

Looking at my Styles.css, how can I make my code shorter, efficient to read and understand? It may be a project recommended for a newbie, but I still had a hard time trying to code that overlay with the eye.

Community Feedback

Grace 17,420




Here's what I changed in browser (in a rush about to start work so sorry feedback is messy!)

.overlay img {
  note: does not need alt text;
  note: this would be much better as a pseudo element. It does not need to be in html;

.photo-container {
  /* width: 90%; */
  /* margin: 5% auto; */
  note: you should be using padding on the whole card, not margin here. I recommend to use rem, not % as you will end up getting unpredicable results.;

.footer p {
  /* margin-top: 0px; */
  margin: 0;
  note: Use a css reset at the start to remove browser specific styles like margins on elements. Take control of your styles.;

.card {
  /* width: 350px; */
  /* height: 600px; */
  /* align-items: center; */
  max-width: 18rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;

h1 {
  /* font-size: 22px; */
  font-size: 1.375rem;
  note: Its invalid html to have an anchor tag wrapping a heading element. Do it the other way around, anchor inside heading.;
  margin-bottom: 0.5rem;

body {
  /* font-size: 18px; */
  font-size: 1.125rem;
  line-height: 1.4;
  padding: 1rem;

.content-text {
  /* width: 300px; */
  /* height: 85px; */
  /* margin-bottom: 30px; */
  margin: 1.5rem 0;

.counter {
  /* width: 300px; */

.footer {
  /* margin-top: 15px; */
  /* width: 300px; */
  margin-top: 1rem;

p {
  margin: 0 0 1rem 0;


  • use a css reset at the start
  • Not everything needs to be a div
  • Note what properties like align-items do on a flex column
  • Try to use padding to stop content hitting edges (usually padding is in all directions, or one axis)
  • Try to use margin more consistently - usually it’s only needed in one direction, top or bottom, or sometimes on one axis eg vertical only)
  • Use rem! Anywhere you would otherwise use px, but extremely important not to use px for font sizes

I hope that helps, good luck


Give some feedback to @alecjoseph-dev about their solution...

Slack logo

Join our Slack community

Join over 80,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!