Table of Contents
Calculator: HTML & CSS
-
Calculator Setup
Jen introduces the calculator exercise and opens the project files from the zip file. -
Adding Buttons
Jen codes rows and a group of buttons into the calculator. -
Finishing Rows Exercise
Students are instructed to add the rest of the number button rows into the calculator as an exercise. -
Adding Math Buttons
Jen adds the math buttons into the calculator. -
Spanning Multiple Columns
Jen codes the buttons that span more than one column, demonstrating how to add multiple classes to an element. -
Styling the Calculator
Jen begins to add styling rules for the calculator, starting with the background and screen. -
Button Layout
Jen uses flexbox to create the button layout and then gives students an exercise of setting button background color. -
Button Color & Size
Jen modifies the color and size of the buttons to make them look better and fill space more adequately. -
Hover State & Flex-Basis
Jen makes use of hover and active states and uses flex-basis to allow buttons to span multiple columns. -
Calculator Q&A
Jen discusses class values that take advantage of style rules from multiple classes. -
Last-Child Selector
Jen introduces last-child, a handy pseudo-class that selects the last child of the parent.
