Objectives

1. Describe material design and it's relationship to Materialize
2. Implement Materialize in a project.
3. Use Materialize to layout a web page.
4. Use Materialize components in your web page.

Material Design

vs.

Materialize

What is Material Design anyway?

https://www.youtube.com/watch?v=rrT6v5sOwJg

What is Materialize then?

What is Materialize then?

I'm glad you asked!

What is Materialize then?

I'm glad you asked!

http://materializecss.com/

Take the next 6 minutes to read about http://materializecss.com/

and answer the 2 questions:

What is Materialize in regard to Material Design?

How do I use Materialize?

If you aren't taking notes already,

please do so for this!

Reading Exercise!

GREAT 3-2-1!

Discuss this with your neighbor:

What are 3 things you learned about materialize?

What are 2 things you connected with materialize as you were reading?

What is 1 question you still have?

Objectives

1. Describe material design and it's relationship to Materialize
2. Implement Materialize in a project.
3. Use Materialize to layout a web page.
4. Use Materialize components in your web page.

Objectives

1. Describe material design and it's relationship to Materialize
2. Implement Materialize in a project.
3. Use Materialize to layout a web page.
4. Use Materialize components in your web page.

Steps to set up Materialize with CDNs

1. set up the HTML file
2. Link the CSS framework files 
3. Link the JS framework files
4. Make sure everything is connected by testing it!

Steps to implement Materialize with CDNs

1. set up the HTML file
2. Link the CSS framework files 
3. Link the JS framework files
4. Make sure everything is connected by testing it!

OK! Time to connect Materialize!

Fork and clone this repo and connect it to materialize: https://github.com/lionel-lints/dom-practice-site

Objectives

1. Describe material design and it's relationship to Materialize
2. Implement Materialize in a project.
3. Use Materialize to layout a web page.
4. Use Materialize components in your web page.

Objectives

1. Describe material design and it's relationship to Materialize
2. Implement Materialize in a project.
3. Practice with Materialize to layout a web page and add components.

Layouts:

grids, flex, and more!

Layouts:

Subtitle

Objectives

1. Describe material design and it's relationship to Materialize
2. Implement Materialize in a project.
3. Use Materialize to layout a web page.
4. Use Materialize components in your web page.

Objectives

1. Something
2. Something Else
3. Some other thing

Revisiting Post It!

Time for a CFU!

Reflect

Show how to use Something Else on your whiteboards

How do we use Something Else with Something?

This technique is called Everybody Writes

Take Note:

Something Else:

1. Do Something
2. Do Another Thing
3. One More Thing
4. These Are The Steps
5. I have Named The Steps

This technique is called Name The Steps

Anytime you Name The Steps, make them write it with BOARD = PAPER

Objectives

1. Something
2. Something Else
3. Some other thing

Check Your Understanding

1. Pull up Something
2. Use Something Else
3. Try Some Other Thing
4. Check your work and refactor

This technique is called Name The Steps

They should write it down, the BOARD = PAPER techique