AnnieCannons
Calculator Project: HTML & CSS
48 minutes
CC
Course Description
Learn how to create the structure and appearance for the HTML and CSS of the calculator on iOS devices in the first part of the calculator exercise.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
Close
Course Details
Published: September 5, 2019
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Calculator: HTML & CSS
Section Duration: 46 minutes
-
Jen introduces the calculator exercise and opens the project files from the zip file. -
Jen codes rows and a group of buttons into the calculator. -
Students are instructed to add the rest of the number button rows into the calculator as an exercise. -
Jen adds the math buttons into the calculator. -
Jen codes the buttons that span more than one column, demonstrating how to add multiple classes to an element. -
Jen begins to add styling rules for the calculator, starting with the background and screen. -
Jen uses flexbox to create the button layout and then gives students an exercise of setting button background color. -
Jen modifies the color and size of the buttons to make them look better and fill space more adequately. -
Jen makes use of hover and active states and uses flex-basis to allow buttons to span multiple columns. -
Jen discusses class values that take advantage of style rules from multiple classes. -
Jen introduces last-child, a handy pseudo-class that selects the last child of the parent.
Review
Section Duration: 1 minute
-
Jen gives some final thoughts about going further with HTML & CSS.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops