Dyandra Paramitha's

Read

0 Comments

Read More Add comment

Tugas 3: Website Warung Tegal

By Dyandra Paramitha

Read

0 Comments

Nama: Dyandra Paramitha Widyadhana

NRP: 05111940000119

Kelas: PWEB-B

Link Website: https://dydyandra.github.io/warung-tegal/

Link Source Code: https://github.com/dydyandra/warung-tegal

Introduction

Pada penugasan ke-3, kami diminta untuk menambahkan fitur dari website Warung Tegal yang sebelumnya telah dikerjakan saat kelas.

Isi dari Website Warung Tegal

Website yang sebelumnya hanya menampilkan halaman utama, sekarang dapat melihat list makanan yang disediakan, lokasi (menggunakan Google Map) dan juga halaman form kontak. Adapun di halaman utama ditambahkan slideshow/carousell yang menampilkan makanan-makanan Warung Tegal dan video yang di-embed dari Youtube. Pada halaman Lokasi, dapat melakukan zoom-in dan zoom-out pada Google Map, dan untuk halaman form kontak sendiri terdapat form dari HTML yang dapat diisi.

Tools Yang Digunakan:

Untuk membuat profile sendiri, saya menggunakan HTML, dan CSS.

HTML sebagai markup language digunakan untuk membuat struktur dan konten dari website CV tersebut. HTML yang saya gunakan yaitu HTML:5.

CSS digunakan untuk menentukan layout, style, serta keselarasan halaman website. Pada tugas kali ini saya menggunakan CSS berupa external CSS dikarenakan penggunaannya yang lumayan banyak untuk jenis tag/selector yang berbeda-beda, sehingga lebih efektif dan efisien menggunakan external CSS. Selain itu dengan external CSS, kode juga terlihat lebih mudah untuk dibaca dikarenakan terlihat rapi dan terstruktur.

JS untuk menambahkan animasi slider pada carousell sehingga bisa berubah gambar.

Untuk men-deploy, saya menggunakan Github Pages.

Penampilan Website

Source Code

Terdapat beberapa file Source Code yang akan dilink yaitu:

1. Halaman Utama : https://github.com/dydyandra/warung-tegal/blob/master/index.html

2. Halaman List Makanan : https://github.com/dydyandra/warung-tegal/blob/master/daftar.html

3. Halaman Lokasi : https://github.com/dydyandra/warung-tegal/blob/master/tentang.html

4. Halaman Kontak : https://github.com/dydyandra/warung-tegal/blob/master/kontak.html

5. External CSS yang digunakan: https://github.com/dydyandra/warung-tegal/blob/master/style.css

Contoh Source Code Halaman Utama:

Contoh Source Code External CSS:

Penutup

Dari tugas yang diberikan ini, saya berlatih cara menggunakan CSS secara lebih rapi, dan juga berbagai elemen baru dari HTML yang sebelumnya belum digunakan. Selain itu, saya juga berlatih menggunakan JS untuk memperkaya website yang telah dibuat.