Skip to content

Latest commit

 

History

History
126 lines (105 loc) · 2.85 KB

lesson-03.md

File metadata and controls

126 lines (105 loc) · 2.85 KB
Raw

CODING MUM

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

LESSON 03: WEBSITE STRUCTURE

Objectives

  1. Peserta mengerti struktur website dibentuk dari HTML div, dibantu CSS float.
  2. Peserta mampu membuat baris dan kolom menggunakan HTML div dan CSS float.

Material

1. HTML dan CSS 1 Kolom

  • HTML index.html 
    <div class="parent">
  Ini div 1 kolom
</div>
  • CSS style.css 
    .parent {
  background-color: #ff0000;
  height: 200px;
  width: 100%;
}

2. HTML dan CSS 2 Kolom

  • HTML index.html 
    <div class="parent">
    <div class="child1">Ini section 1</div>
    <div class="child2">Ini section 2</div>
</div>
  • CSS style.css 
    .parent {
    background-color: aqua;
}
.child1 {
    background-color: brown;
    float: left;
    width: 20%;
}
.child2 {
    background-color: cornflowerblue;
    float: right;
    width: 80%;
}

3. HTML dan CSS 3 Kolom

  • HTML index.html 
    <div class="parent2">
    <div class="childa">Ini section 1</div>
    <div class="childb">Ini section 2</div>
    <div class="childc">Ini section 3</div>
</div>
  • CSS style.css 
    .parent2 {
    background-color: blueviolet;
    margin-top: 50px;
}
.childa {
    background-color: bisque;
    float: left;
    width: 33%;
}
.childb {
    background-color: chocolate;
    float: left;
    width: 34%;
}
.childc {
    background-color: cadetblue;
    float: left;
    width: 33%;
}

File

Download file for this lesson: lesson-03.zip

Latihan

  1. Peserta membuat 3 dan 4 kolom bagian website menggunakan HTML <div> dan CSS float.

Feedback

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

Referensi

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