Learning Outcome

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

• use Google's "Material Design Lite" and and have a better design

  • you will still have a CSS file to organize some elements

Review

• CSS files

Lesson

• this is not a design art course

  • CSS is an art and science

  • let's let someone else do the heavy lifting

    • and get huge design benefits of integrated mobile design!

• go over Google's "Material Design Lite"

  • 3 line, huge savings 😊:

    • <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

    • and

    • <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

      • we will still have a CSS file, but just to organize the placement of elements, not doing all the design and color stuff

  • go over "color customizing"

  • go over "MDL layout"

  • go over "components"

Daily Assignment

• we will start a new GitHub assignment now that we are using MDL.

• create a web page by accepting this Assignment, with the following requirements:

  • 1 html file with the following MDL components

    • 1 text field

    • 1 button

• Follow the instructions on the Readme.md file to test your page right in CodeSpaces

Extra

• create an "index2.html" file, with the following requirements:

  • 1 html file with the following MDL components

    • a different MDL color scheme

    • list

    • slider

• add this to your submitted work