lesson-04.md

CODING MUM

Home	Lesson 01	Lesson 02	Lesson 03	Lesson 04	Lesson 05	Lesson 06	Lesson 07	Presentation

---

LESSON 04: INTRO TO FRAMEWORK

---

Objectives

1. Peserta mengetahui framework sebagai alat bantu pemercepat pembuatan website.
2. Peserta mampu membangun website menggunakan framework Bootstrap.

---

Material

1. Preparation

• Download Bootstrap from http://getbootstrap.com/css/#grid
• Find and copy file bootstrap.css into your project's folder.

2. Container and Row sebagai parent dari kolom-kolom.

• Bootstrap 1 Kolom

  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        Satu kolom
      </div>
    </div>
  </div>

• Bootstrap 2 Kolom

  <div class="container">
    <div class="row">
      <div class="col-xs-6">
        Kolom 1
      </div>
      <div class="col-xs-6">
        Kolom 2
      </div>
    </div>
  </div>

• Bootstrap 3 Kolom

  <div class="container">
    <div class="row">
      <div class="col-xs-4">
        Kolom 1
      </div>
      <div class="col-xs-4">
        Kolom 2
      </div>
      <div class="col-xs-4">
        Kolom 3
      </div>
    </div>
  </div>

• Bootstrap 3 Kolom Kompleks

  <div class="container">
      <div class="row">
          <div class="col-xs-4 merah">
              <div class="anak1">
                  <h4>Anak 1</h4>
                  <p>Ini paragraf Ini paragraf Ini paragraf</p>
              </div>
          </div>
          <div class="col-xs-4 orange">
              <div class="row">
                  <div class="col-xs-12 orange">Cucu 1</div>
                  <div class="col-xs-12 ungu">Cucu 2</div>
              </div>
          </div>
          <div class="col-xs-4 hijau">
            <div class="row">
                <div class="col-xs-12 ungu">Cucu 1</div>
                <div class="col-xs-12 orange">
                    <div class="row">
                       <div class="col-xs-6 hijau">Cicit 1</div>
                       <div class="col-xs-6 merah">Cicit 2</div>
                    </div>
                </div>
            </div>
          </div>
      </div>
  </div>

2. CSS pembantu

• CSS style.css

  .merah {
      background-color: red;
  }
  .ungu {
      background-color: purple;
  }
  .hijau {
      background-color: green;
  }
  .orange {
      background-color: orange;
  }
  .hitam {
      background-color: black;
  }
  .anak1 {
      margin-left: 20px;
  }

---

File

Download file for this lesson: lesson-04.zip

---

Exercises

1. Peserta membuat 4 kolom menggunakan Bootstrap.

---

Feedback

1. Apa yang menjadi bottleneck dari lesson 04 ini?
2. Apa yang sebaiknya ditambah dan ditiadakan dari materi lesson 04 ini?

---

References

1. Bootstrap Official
2. Front-End Web UI Frameworks and Tools
3. Introduction to Bootstrap

---

Home	Lesson 01	Lesson 02	Lesson 03	Lesson 04	Lesson 05	Lesson 06	Lesson 07	Presentation