Here’s the code for the HTML and CSS I used for my calculator.

I didn’t work to make it really pretty, but it’s form and function is what we are after. I made box after box with flex. Remember that each div won’t take up any room unless you give it a space. The number buttons would just be numbers unless you give them a background color and padding or a height and width to create the button shape and size.

The screen won’t show up unless you similarly give it a background color and height and width.

I used flex to order the buttons into rows. I used flex-wrap to get them onto each next line. I gave the calculator a width to decide how many buttons would fit on each row.

I used flex to put the operator buttons next to the number buttons.

I added a box-shadow to give a 3D effect to the buttons. I then added a pseudo class of :active to take away the shadow when you clicked on a button.

In the next lesson, we’ll start making the buttons do things.

There is no video for this lesson.