Praktikum Minggu Ke-10: Konversi Mock Up Kedalam HTML (PART 2)

A. Tujuan
Mengubah Mock Up desain web menjadi html

B. Alat dan Bahan
Visual Studio Code
Bootstrap
Mock Up Desain Web

C. Dasar Teori
Visual Studio Code
Visual Studio Code adalah editor yang dikembangkan oleh Microsoft untuk Windows, Linux dan macOS. Ini termasuk dukungan untuk debugging, kontrol Git tertanam, penyorotan sintaks, penyelesaian kode cerdas, cuplikan, dan refactoring kode. Ini juga dapat disesuaikan, sehingga pengguna dapat mengubah tema editor, pintasan keyboard, dan preferensi. Ini gratis dan bersumber terbuka, meskipun unduhan resmi berada dibawah lisensi kepemilikan.
Kode Visual Studio didasarkan pada Electron, kerangka kerja yang digunakan untuk menyebarkan aplikasi Node.js untuk desktop yang berjalan pada mesin tata letak Blink. Meskipun menggunakan kerangka Electron, perangkat lunak tidak menggunakan Atom dan malah menggunakan komponen editor yang sama (nama kode "Monaco") yang digunakan dalam Visual Studio Team Services (sebelumnya disebut Visual Studio Online).
Dalam Survei Pengembang Stack Overflow 2018, Visual Studio Code menduduki peringkat alat lingkungan pengembang yang paling populer, dengan 34,9% dari 75.398 responden yang mengaku menggunakannya.
Bootstrap
Pengertian Bootstrap adalah library (pustaka / kumpulan fungsi-fungsi) dari Framework CSS yang dibuat khusus untuk bagian pengembangan fontend dari suatu website. Didalam library tersebut terdapat berbagai jenis file yang diantaranya HTML, CSS, dan Javascript. Hampir semua developer website menggunakan framework bootstrap agar memudahkan dan mempercepat pembuatan website. Karena semuanya sudah ada dalam frameworknya sehingga para develop / pengembang hanya tinggal membuat / menyisipkan class nya yang ingin dipakai seperti membuat tombol, grid navigasi dan lain sebagainya.

Bootstrap telah menyediakan kompulan aturan dan komponen class interface dasar sebagai modal dalam pembuatan web yang telah dirancang sangat baik untuk memberikan tampilan yang sangat menarik, bersih, ringan dan memudahkan bagi penggunanya. Dan penggunaan bootstrap ini kita juga diberikan keleluasan salama pengembangan website, anda bisa merubah dan menambah class sesuai dengan keinginan.

D. Tugas
Mengubah mock up ke dalam html

E. Hasil Praktikum
Link Google Drive : https://drive.google.com/open?id=12wneVa42J83pJB7kgOwOjooZ6uz36V-f
berikut adalah hasil tampilan web htmlnya:
Screenshot tampilan progress web

Disini kahirnya kami berhasil memasukkan gambar pada kategori special package, sebelumnya kami  memasangnya sebagai background, namun gambar tidak berhasil dipasang sehingga kami menemukan caranya yaitu dengan kode berikut:
 <p align="center">
                <img src="package1.PNG" class="img-rounded" alt="Cinque Terre">
              </p>

F. Kesimpulan
Bootstap adalah sebuah framework untuk website atau webapps yang berpusat untuk membantu pengerjaan frontend suatu web. Dengan framework CSS akan membuat website lebh menarik dan dapat dikerjakan dengan mudah tanpa harus dikerjakan dengan cara native.
Berbagi

Komentar

Postingan populer dari blog ini

Minggu 13 - Progress Animasi 3D logo 86

Praktikum Minggu 4 : Rangkuman Materi Desain Thinking

PRAKTIKUM 12: ANIMATICS (TAHAP 2)