Skip to content

Latest commit

 

History

History
83 lines (66 loc) · 2.37 KB

lesson-05.md

File metadata and controls

83 lines (66 loc) · 2.37 KB

CODING MUM

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

LESSON 05: FRAMEWORK LANJUTAN

Objectives

  1. Peserta mengerti konsep website responsive.
  2. Peserta mampu menggunakan class pada Bootstrap untuk mobile, tablet, desktop dan large screen.

Materi

1. Class Responsive

  • Extra small devices Phones (<768px) 
    <div class="col-xs-6">
  Ini untuk Phones
</div>
  • Small devices Tablets (≥768px) 
    <div class="col-sm-6">
  Ini untuk Tablets
</div>
  • Medium devices Desktops (≥992px) 
    <div class="col-md-6">
  Ini untuk Desktops
</div>
  • Large devices Desktops (≥1200px) 
    <div class="col-lg-6">
  Ini untuk Large Screen
</div>
  • Digabung semua 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
  Ini gabungan semua
</div>

Latihan

  1. Buat halaman yang responsive ketika dibuka pada Phone, Tablet, Desktop dan Large Screen.

Feedback

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

Referensi

  1. Bootstrap Grid
  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