Unit #3-01

Learning Outcome

At the end of this lesson, you will be able to:

• create a Storyboard for your program

Review

• nil

Lesson

• before you can code properly, you need to know what your program layout will look like

  • go over what a Storyboard is

    • each time the screen changes drastically, create a new cell

  • from Dreamworks museum presentation see image carousel below: ↓

• we will be using Draw.io

  • you can use it right inside GitHub using VSCode

    • add in Draw.io extension, into VSCode

    • use the "Basic" templates

    • DO NOT take a screenshot , always export as PNG and insert it

Daily Assignment

• create a web page that will do the following:

  • that calculates the area of a trapezoid, 

  • see screenshots below: ↓

        <form action="#">

          Base B:

          <div class="mdl-textfield mdl-js-textfield">

            <input

              class="mdl-textfield__input"

              type="text"

              pattern="-?[0-9]*(\.[0-9]+)?"

              id="base-b"

              aria-label="Base B"

            />

            <label class="mdl-textfield__label" for="base-b"></label>

            <span class="mdl-textfield__error">Input is not a number!</span>

          </div>

          mm

        </form>

Extra

• create the above program in the terminal