Buku Pegangan Peserta
Kelas Pelatihan Untuk Membuat Website
Pembuatan Website
(Front – End)
Mengenal Design thinking dan
Bootstrap
Chapter 3 3
Design thinking dan
Bootstrap
· Mengenal Design thinking
· Mengenal Bootstrap
· Menghubungkan bootstrap dengan html
Property of PT Clevio
Coding atau pemrograman, adalah aktifitas menciptakan program
computer. Menurut Bill Gates, pendiri Microsoft, “belajar menulis
program itu memperluas daya piker, membantu kita berpikir lebih
baik, menciptakan cara berpikir yang bermanfaat disemua bidang.
Berangkat dari motivasi bermain game, siswa-siswi Clevio Coder
Camp diajak menciptakan games/aplikasi yang baik dan
bermanfaat bagi orang lain.
Property of PT Clevio 4
Mengenal Design Thinking
Design Thinking
Pengertian
Design thinking adalah proses memecahkan masalah
menggunakan pendekatan solusi praktis dan kreatif yakni
dengan menekankan pendekatan dari sisi user.
Property of PT Clevio 5
5 Skema Design Thinking
1 Empathize
Peduli akan kebutuhan costumer baik itu keinginan
maupun masalah costumer yang dapat kita gunakan
sebagai prospek.
Property of PT Clevio 6
2. Define
Tahap dimana setelah pengumpulan informasi ditahap empati,
melakukan analisa untuk menentukan point apa yang bisa kita
bantu dengan menemukan solusi.
3. Ideate
Tahap dimana kita mengumpulkan ide untuk mencari solusi
yang sudah ditentukan dari tahap define. Beserta dengan cara
untuk menghindari resiko atau masalah dikemudian hari.
Property of PT Clevio 7
4. Prototype
Tahap untuk kita menerbitkan produk atau hasil karya percobaan
untuk menyelidiki agar dapat mengurangi atau mencari kekurangan
dan masalah yang ada.
5. Test
Tahap lanjutan dari tahap Prototype, dimana kita melakukan
pengujian dan evaluasi untuk penyempurnaan atau perubahan
sebelum diterbitkan secara global.
Property of PT Clevio 8
Mengenal Bootstrap
Bootstrap
Pengertian
Bootstrap adalah Front-End Framework, yang berfungsi untuk
mempercepat, mempermudah kita dalam pembuatan desain
website, Bootstrap juga berfungsi agar web yang kita buat
menjadi lebih responsive, bootstrap juga sudah termasuk HTML &
CSS.
Property of PT Clevio 9
Apa itu responsive web?
Pengertian
Responsive Web Design, adalah sebuah fitur yang dimana
membuat tampilan Website sesuai dengan berbagai Device (Hp,
Laptop, dll).
Property of PT Clevio 10
Menghubungkan Bootstrap dengan html
Tutorial
1 Buka browser lalu buka
website
https://getbootstrap.com/.
2 Klik get started
Property of PT Clevio 11
3 Copy link CSS dan JS.
Property of PT Clevio 12
4 Paste link CSS dan JS, diantara tag html <head> </head>.
Property of PT Clevio 13
Mengenal perbedaan Container dan Container-fluid
Pengertian
Container digunakan untuk mengelompokkan konten pada
Website dengan baik dan mudah, dan Container memiliki 2 Class
yaitu:
Property of PT Clevio 14
1 Container
Membantu dalam menentukan lebar container.
Property of PT Clevio 15
2. Container-Fluid
Menyediakan lebar container secara penuh dalam tampilan
Website.
Property of PT Clevio 16
Contoh penulisan
1 Container
Property of PT Clevio 17
2. Container-fluid
Property of PT Clevio 18
Bootstrap Responsive Container
Ukuran Container
A. Pengertian
Agar Container dapat bertampilan Responsive, dapat
menggunakan class seperti .container-sm| md| lg| xl.
Property of PT Clevio 19
Bootstrap Card
Pengertian
Card, digunakan adalah bordered box dengan padding di sekeliling konten.
Termasuk untuk Header, Content, dan Footer, untuk contoh lain dari Bootstrap
Cardkunjungi web https://getbootstrap.com/docs/4.0/components/card/ lalu pilih
Card yang ingin digunakan dengan cara Copy paste.
Property of PT Clevio 20
Contoh Script HTML Card
Property of PT Clevio 21
Contoh Script CSS Card
Property of PT Clevio 22
Bootstrap Form
Pengertian
Form, digunakan untuk meng-input data diri, seperti: Nama, Email,
Password, Tanggal, untuk contoh lain dari Bootstrap Form kunjungi
web, https://getbootstrap.com/docs/4.0/components/forms/ pilih
form yang ingin digunakan dengan cara Copy paste.
Property of PT Clevio 23
Attribut Form 24
1 Form-group
Berfungsi untuk mengelompokkan satu form input.
2 Label
Berfungsi untuk memberi nama setiap form.
3 Input type
Berfungsi untuk memberikan tipe form yang akan di isi
4 Placeholder
Berfungsi untuk memberikan teks pada form input..
5 Id
Berfungsi untuk memberikan identifikasi pada suatu form input.
Property of PT Clevio
Contoh Script Form
Property of PT Clevio 25
Bootstrap Table (row&column)
Pengertian
Jika dilesson sebelumnya kita sudah belajar membuat table
menggunakan th, tr, td, sekarang kita akan belajar membuat table
menggunakan Bootstrap (row dan column) agar table yang
dihasilkan lebih responsive, untuk menggunakan table Bootstrap
kunjung website https://getbootstrap.com/docs/4.1/content/tables/
pilih dan Copy paste table yang ingin digunakan.
Property of PT Clevio 26
Contoh Row & Column
Property of PT Clevio 27
Row & Column
Batas maksimal kolom pada sebuah tampilan website
adalah 12, jadi jika kita ingin membuat 3 kolom
medium maka 12 : 3 yaitu 4 kita gunakan “col-md-4”.
Contoh
Property of PT Clevio 28
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
E-Book 3 | Web Development
- 1 - 28
Pages: