Calculator Project: HTML & CSS

Table of Contents

• 

  Calculator Setup

  00:00:00 - 00:03:13 Watch Lesson

  Jen introduces the calculator exercise and opens the project files from the zip file.
• 

  Adding Buttons

  00:03:14 - 00:13:16 Watch Lesson

  Jen codes rows and a group of buttons into the calculator.
• 

  Finishing Rows Exercise

  00:13:17 - 00:13:42 Watch Lesson

  Students are instructed to add the rest of the number button rows into the calculator as an exercise.
• 

  Adding Math Buttons

  00:13:43 - 00:17:26 Watch Lesson

  Jen adds the math buttons into the calculator.
• 

  Spanning Multiple Columns

  00:17:27 - 00:19:10 View Transcript

  Jen codes the buttons that span more than one column, demonstrating how to add multiple classes to an element.
• 

  Styling the Calculator

  00:19:11 - 00:25:43 View Transcript

  Jen begins to add styling rules for the calculator, starting with the background and screen.
• 

  Button Layout

  00:25:44 - 00:30:34 View Transcript

  Jen uses flexbox to create the button layout and then gives students an exercise of setting button background color.
• 

  Button Color & Size

  00:30:35 - 00:35:56 View Transcript

  Jen modifies the color and size of the buttons to make them look better and fill space more adequately.
• 

  Hover State & Flex-Basis

  00:35:57 - 00:40:49 View Transcript

  Jen makes use of hover and active states and uses flex-basis to allow buttons to span multiple columns.
• 

  Calculator Q&A

  00:40:50 - 00:42:06 View Transcript

  Jen discusses class values that take advantage of style rules from multiple classes.
• 

  Last-Child Selector

  00:42:07 - 00:46:47 View Transcript

  Jen introduces last-child, a handy pseudo-class that selects the last child of the parent.

• 

  HTML & CSS Final Thoughts

  00:46:48 - 00:48:28 View Transcript

  Jen gives some final thoughts about going further with HTML & CSS.