Build a Page of Playing Cards — feels like the certification project shouldn't be this strict on structure

I Built This
,
1 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Playing Cards</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <main id="playing-cards">
    <div class="outer-wrapper">
    <div class="deck left-side">
      <div class="cardplaceholder">
        <div class="card">
          <div class="left">
            <div>A</div>
            <div>♠</div>
            </div>
          <div class="middle">
            <div>♠</div>
            </div>
          <div class="right">
            <div class="flipped">A</div>
            <div class="flipped">♠</div>
          </div>
        </div>
      </div>
    </div>
    <div class="deck right-side">
        <div class="cardplaceholder">
        <div class="card">
          <div class="left">
            <div>2</div>
            <div>♣</div>
          </div>
          <div class="middle">
            <div>♣</div>
            <div class="flipped">♣</div>
          </div>
          <div class="right">
            <div class="flipped">2</div>
            <div class="flipped">♣</div>
          </div>
        </div>
      </div>
      <div class="cardplaceholder">
        <div class="card red">
          <div class="left">
            <div>3</div>
            <div>♥</div>
          </div>
          <div class="middle">
            <div>♥</div>
            <div>♥</div>
            <div class="flipped">♥</div>
          </div>
          <div class="right">
            <div class="flipped">3</div>
            <div class="flipped">♥</div>
          </div>
        </div>
      </div>
      <div class="cardplaceholder">
        <div class="card">
          <div class="left">
            <div>4</div>
            <div>♣</div>
          </div>
          <div class="middle">
          <div class="middle-section">
            <div>♣</div>
            <div>♣</div>
          </div>
          <div class="middle-section">
            <div class="flipped">♣</div>
            <div class="flipped">♣</div>
          </div>
          </div>
          <div class="right">
            <div class="flipped">4</div>
            <div class="flipped">♣</div>
          </div>
        </div>
      </div>
      <div class="cardplaceholder">
        <div class="card red">
          <div class="left">
            <div>5</div>
            <div>♦</div>
          </div>
          <div class="middle">
          <div class="middle-section">
            <div>♦</div>
            <div>♦</div>
          </div>
            <div>♦</div>
          <div class="middle-section">
            <div>♦</div>
            <div>♦</div>
          </div>
          </div>
          <div class="right">
            <div class="flipped">5</div>
            <div>♦</div>
          </div>
        </div>
      </div>
    </div>
    </div>
  </main>
</body>

</html>

body {
  background: radial-gradient(circle, #0d7a2e 10%, #075a1f 50%, #043f14 100%);
}

.outer-wrapper {
  display: flex;
  flex-wrap: nowrap;
  width: auto;
  justify-content: space-around;
  gap:150px;
  margin:75px;
}

.deck {
  display: flex;
  gap: 10px;
}

.cardplaceholder {
  width: 220px;
  height: 300px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items:center;
}

.card {
  width: 200px;
  user-select:none;
  height: 280px;
  border: 2px solid black;
  border-radius: 5px;
  background-color: white;
  display: flex;
  justify-content: space-between;
}

.left {
  font-size: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 5px ;
}

.middle {
  font-size: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.middle-section {
  display:flex;
  justify-content:space-between;
}

.right {
   font-size: 2rem;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  padding: 5px ;
}

.flipped {
  transform: rotate(180deg);
}

.red {
  color:red;
}

image
image1920×1042 96.4 KB

Hey everyone,

I’ve been working on the “Build a Page of Playing Cards” project for the certification, and I wanted to share how I approached it and get some opinions on something that’s been bugging me.

made this for the certification project.for the first time was actually feeling that sense of achievement (if your developer /programmer you know what I’m talking about) made this on the theme of Win7 Microsoft Solitaire …cuz every project literally says in the start “Build an app that is functionally similar to this example project. Try [not to copy] the example project, give it your own personal style.” when you go your way and build something you find out its not getting accepted. hmm…

what personal style with this much restriction means…
you can have background color of your choice?

My honest frustration is: shouldn’t a certification project be a bit more flexible about how someone builds toward the visual/functional result, as long as the end result works and demonstrates the skills being tested? It feels like the checker is testing for one very specific way of building this, rather than testing whether I actually understand flexbox, layout, and CSS fundamentals — which I clearly do, since I built something more complex than what’s asked, just structured differently.

Has anyone else run into this? Is there a reason these projects are checked this strictly rather than testing skill more broadly? And practically speaking — is my best move here to just build a second, simpler version that matches their expected structure exactly just to pass the checker, even though I already understand the concepts?

2

there isn’t human availability to evaluate each project, so we need to rely on strictly checking you follow the user stories via programmatic testing. You can share your project in I Built This and get human feedback on it.

it depends if your aim is the certification or not, if it’s not you built a great project, go forward. if you aim for it, this is one of the required certification projects so you need to create something that passes the tests

2 Likes
3

i have been learn to my self and i kind of find it difficult doing that needs so help