BELAJAR

MEMBANGUN
WEBSITE
UNTUK MEMULAI KARIR SEBAGAI
SOFTWARE DEVELOPER
TRAINER PROFILE
Halo, nama saya Rakhmat Kurnia, saya biasa dipanggil dengan
nama kecil saya: Riki.

Saya adalah seorang yang memiliki rasa curious yang tinggi dan
menyukai aktifitas problem solving. Saya menjalankan beberapa
bisnis, mengajar mata kuliah pemrograman di UNTARA, dan
training bahasa pemrograman (Java, Javascript, PHP, Node,
HTML5, Net Core), Produktifitas Office (Microsoft dan Google), dan
juga multimedia

Saat ini saya menjabat sebagai owner jasaprogram.com, dan juga

merupakan CTO di PT. Meraki Sinergia Internasional

Rakhmat Kurnia
Trainer & IT Specialist
https://www.linkedin.com/in/riki-kurnia/
18
WEBSITE
RESPONSIF /
RESPONSIVE
WEBSITE
RESPONSIVE WEBSITE
Responsive web design atau desain web responsif adalah sebuah teknik atau metode bagi web designer untuk
membuat suatu layout website yang dapat menyesuaikan diri sesuai dengan ukuran layar pengguna.

Baik dari ukuran huruf, user interface, gambar dan tata letak akan menyesuaikan dengan lebar layar dan resolusi
device yang digunakan.

Tiga Prinsip responsive website adalah:

Fluid Grid
Memiliki ukuran responsif yang biasanya dinotasikan dengan persentase, rem, atau em
Media Query
Media query memungkinkan website untuk dapat mengambil data mengenai ukuran layar
yang digunakan untuk menampilkan konten
Responsive Media
Menggunakan ukuran persen dalam panjang sebuah media (Misal 100%)
CONTOH DESAIN WEBSITE RESPONSIF
19
MEDIA QUERY
DALAM CSS
RESPONSIVE WEBSITE
Media query merupakan modul CSS yang berguna membuat layout kita responsive dengan menyesuaikan
tampilan berdasarkan ukuran layar perangkat.

Terkadang tampilan yang sudah kita desain dengan sedemikian rupa bisa kacau jika ditampilkan pada tampilan
mobile. Dengan media query kita dapat menyelesaikan masalah ini dengan menentukan aturan ukuran dan tata
letak elemen dengan kondisi-kondisi tertentu

Contoh penulisan media query

<style>
@media (max-width: 480px) {
p {
font-size: 16px;
}
}
</style>
PEMBAGIAN BESAR MEDIA QUERY
Untuk menyesuaikan tiap device tentunya sangat tidak mungkin dan merepotkan karena standarisasi ukuran layar
tidak ditentukan dalam proses pembuatan sebuah device. Untuk itu kita dapat mengelompokan beberapa jenis
ukuran layar dengan ketentuan sebagai berikut:

/* Layar sangat kecil (Handphone) */

@media only screen and (max-width: 600px) {...}

/* Layar kecil (Tablet kondisi portrait, dan Phablet) */

@media only screen and (min-width: 600px) {...}

/* Layar Medium (Tablet landscape) */

@media only screen and (min-width: 768px) {...}

/* Layar besar (Laptop, PC Monitor) */

@media only screen and (min-width: 992px) {...}

/* Layar sangat besar (Laptop gaming besar, TV) */

@media only screen and (min-width: 1200px) {...}
20
MOBILE FIRST
WEBSITE
MOBILE FIRST PARADIGM
Paradigma mobile first adalah langkah memprioritaskan desain produk layar HP. Hal ini penting terutama di
Indonesia, karena beberapa faktor berikut:

• Banyaknya pengguna HP di Indonesia (95,4%)

• Menjaga pengalaman akses di HP yang maksimal
• SEO yang maksimal

Contoh penulisan CSS Mobile First:

/* Atur ukuran mobile terlebih dahulu */

.gambar-atas {
width:100%;
}
/* Baru atur ukuran gambar di laptop / pc */
@media only screen and (min-width: 768px) {
.gambar-atas {
width:33%;
}
}
PRAKTEK
MENJADIKAN
WEBSITE
RESPONSIF
21
DISPLAY FLEX &
FLEXBOX DALAM
CSS
 CSS FLEXBOX
Flexbox atau Flexible Box merupakan sebuah mode pengaturan atau konsep layout pada CSS yang digunakan
untuk mengatur elemen atau container beserta item didalamnya pada halaman web. Metode ini sangatlah efektif
untuk diterapkan pada layout responsive, karena jauh lebih mudah untuk memposisikan sebuah konten

Contoh mode flexbox Dapat diatur layoutnya dengan mudah Atau wrapping dengan flex wrap
contohnya dengan property flex-direction
<div class="container">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</div>
22
PRAKTEK FLEX
PADA WEBSITE
23
FRAMEWORK
BOOTSTRAP
BOOTSTRAP FRAMEWORK
Bootstrap adalah framework HTML, CSS, dan JavaScript yang berfungsi untuk mendesain website responsif
dengan mudah dan cepat. Bootstrap memiliki beberapa komponen dan kelas yang siap dipakai dalam
membangun website.
24
MENGINSTALL
BOOTSTRAP
MENGINSTALL BOOTSTRAP
Menginstall bootstrap sangatlah mudah, untuk instalasi secara online, kita hanya perlu menyematkan file css dan
javascript dari bootstrap di dalam tag head (CSS) dan sebelum close body (javascript). Untuk menambahkan fitur
lain seperti icon dapat menyematkan css icon pada tag head HTML.
25
MENGGUNAKAN
KELAS
BOOTSTRAP
MENGGUNAKAN KELAS BOOTSTRAP
Bootstrap memiliki kelas bawaan yang sangat banyak, kita akan mencoba satu-persatu kelas yang umum di
gunakan sambil melakukan praktek, salah satu contoh kelas disini adalah tombol atau button.

Untuk menggunakan kelas button pada bootstrap, kita hanya perlu menambah kelas btn dan btn-jenis pada
elemen button yang sudah ada. Contoh:

<button type="button">Tombol Default</button>

Tambahkan kelas btn dan btn-primary

<button type="button" class="btn btn-primary">Tombol Bootstrap</button>

Maka desain tombol akan berubah

BEBERAPA CONTOH BOOTSTRAP CLASS
• container: Berlaku sebagai elemen pembungkus, biasa dipakai membungkus row
• row : Berlaku sebagai baris pembungkus dalam elemen. Row biasanya dibungkus dengan container
• p: Kelas yang mengatur seluruh padding, memiliki variasi seperti px, py, ps, pe, pt, pb
• m: Kelas yang mengatur margin, memiliki variasi seperti mx, my, ms, me, mt, mb
• img-fluid: membuat ukuran panjang gambar / video hanya memenuhi pembungkus
• w-100: Membuat elemen memiliki panjang 100%
• fs: Mengatur ukuran font
• fw: Mengatur tebal font
• d: Mengatur display, memiliki variasi seperti: d-block, d-flex, d-inline-block
• text: Mengatur text, memiliki variasi: text-center, text-left, text-justify, text-right dan warna text
• bg: Mengatur warna latar belakang
• btn: Mengatur tampilan tombol

Class tampilan pada bootstrap: primary, secondary, success, danger, warning, info, light, dark
26
PRAKTEK
MENGUBAH
LAYOUT WEBSITE
DENGAN
BOOTSTRAP