learn-co-curriculum / hs-intro-web-design-winning-hand

Winning Hand

Who all wouldn't love to win every single hand of poker they ever played? You could make it big in Vegas with that kind of luck! Because programming is our super power, we can guarantee we get a winning hand every single time by building out our winning hand. With that in our back pocket, we're good to go!

Step 1:

Open this lab in Nitrous

Step 2:

Take a look at the existing code base. We've already given you all the code to create the Ace of Diamonds. Besides just writing the HTML, we've even given you the CSS necessary to create the King, Queen, Jack and 10.

Step 3:

Get your HTML set up for your King. You'll want to mimic the same pattern of HTML used to create the Ace. From there, work through the HTML for the rest of the cards (Queen, Jack and 10). You'll want to change the id from ace to whatever card name you're creating, for example:

<div class="card" id="king">
      <h3>K</h3>
        <div class="center">
          <div id="diamond-narrow"></div>
        </div>
   </div>

Step 4: CSS

Get your styling situated by taking a look at css/style.css. You probably will want to mimic the styling used in the CSS from the id ace. Pay attention to the value of the left property in the CSS. If every card is positioned in the same place, then it's like stacking the cards on top of each other. The goal is to keep a distance of 5px between every single card.

Step 5: Done

In order to get credit for finishing this lab, in Nitrous, in terminal in the directory of this lab enter learn submit.

View Winning Hand on Learn.co and start learning to code for free.