We’re going to set up our HTML today, the framework for our project. We need to think about what’s going to be seen on the screen and what we need in place for that to happen. It’s a great idea to sketch out what you want the screen to look like.

I think of my screen in terms of box. I have a game box that has the words on the left as well as the cards. Then I have two boxes inside of that: the words on the left and then the card area. The card area has three boxes. The images of hearts and clubs, and so forth, are in yet another box.

I use flex to space out the word and card boxes. I use flex to place the three cards and draw boxes. I use flex column to space the words and the elements on the playing cards. Then I use flex to put the images on the cards.

Each box is a flex element to enable a flexible layout. That means whether on a big, medium, or small screen, the elements will spread out to fit the space. Flex is centering the suit images and the words in the card area.

Each box is a div in the code. I’ll use classes of flex and flex-column to set how I want each box to act. I will also have classes of player, number, and suit because those are things I have multiples of. I have two players, two cards, etc., so I will want them both to look and act the same way. I need IDs for the number and suit of each individual card and for each individual player on the left, so that I can write specific things into those places. I don’t want to write that each player has 24 cards, just that the first player has 24 cards. To do that, I need an ID for player one so that the number just goes where it belongs and no where else.

The other tool I use is <span> to write an element right in line with another. Since the numbers are going to be added later, they start as just a place holder using span and an ID.

You can watch this lesson.