ETS PWEB B

 EVALUASI TENGAH SEMESTER PEMROGRAMAN WEB

Wildan Fauzy Maulana Hasyim

5025221044

PWEB-B

 

1.     Jelaskan apa yang dimaksud dengan web responsive? Bagaimana cara membangunnya?

Jawab :

Web Responsive merupakan suatu pendekatan dalam mendesain dan mengembangkan suatu situs web dengan tujuan untuk memastikan web dapat menyesuaikan tampilannya dengan baik pada berbagai perangkat dan resolusi layar. Penyesuaian tampilan web juga termasuk dengan penyesuaian elemen seperti teks, gambar, dan tata letak agar terlihat dan berfungsi dengan baik. Web dapat dibuat responsive dengan menggunakan Java Script, namun agar mempermudah para Web Developer, terdapat beberapa Frame Work yang dapat membantu untuk membuat web responsive dalam waktu yang lebih singkat.

Adapaun tahapan untuk membangun Web yang Responsive adalah :

·       Mendifinisikan Meta Tag untuk desain yang Responsive

Biasanya Browser akan mengatur skala halaman html sesuai lebar viewport. Untuk merubah ulnag, kita dapat menggunakan meta tag viewport sehingga menonaltifkan skala awal. Meta tag juga dapat digunakan untuk Char. Berikut adalah contoh meta tag yang saya gunakan pada html Website pernikahan :

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

·       Menentukan Struktur HTML

Struktur yang dimaksud adalah struktur seperti header, footer, navbar, dan lebar masing-masing bagian. Berikut adalah contoh yang saya gunakan pada website yang sama :

body {

    font-size: 1.2rem;

    font-family: 'Work Sans', sans-serif;

    min-height: 4000px;

}

 

·       Memasukkan media Query pada CSS

Media Query akan memerintahkan browser untuk menyesuaikan tampilan layar, dengan kata lain dapat membuat website responsive. Kita akan membuat sebuah percabangan dimana pada ukuran tertentu, maka website akan menentukan ukuran dan lebar akan di resize sesuai dengan script yang dimasukkan, Berikut adalah contoh media Query yang saya gunakan dalam membuat website yang responsive :

/* Mobile Phone */

@media (max-width: 576px) {

    html{

        font-size: 60%;

    }

    .simply-countdown > .simply-section {

        padding : 45px;

        margin: 3px;

    }

    .timeline li .timeline-image {

        width: 80px;

        height: 80px;  

    }

    .timeline li .timeline-panel {

        width: 70%;

        transform: translateX(-20px);

    }

}

 

2.     Buatlah screenshot dari aplikasi yang telah dikerjakan, kemudian buat link ke tugas source codenya.

Jawab :

Pembuatan CV :

 

Source Code terdapat pada : SourceCodeCV

Web Kursus:

Source Code terdapat pada : SouceCodeKursus

Web Berita :

Source Code terdapat pada : SourceCodeBerita

Web Responsive : 

Source Code terdapat pada : SourceCodeFormValidasi

Login Page dengan Bootstrap :

Source Code terdapat pada : https://github.com/Luszark005/Login-RegisterwithBoostrap

Website Pernikahan :

Source Code terdapat pada : SourceCodeWebsiteNikahan

Berikut adalah link webnya : https://luszark005.github.io/Tugas-Web-Undangan-Pernikahan/#home

3. Sebuah perusahaan  ingin membuat aplikasi web untuk portal berita. Fungsi aplikasi untuk display berita terbaru, pengelompokan kategori, lowongan pekerjaan, informasi iklan atau event kegiatan. Selain itu tersedia juga form untuk pembaca memasukkan artikel atau opini yang ingin dimuat di portal berita. Desainkan front end website perpustakaan.

Desain Front End Website saya buat dalam Canva yang dapat diakses pada link berikut :

DesainCanva

4. Implementasikan desainmu dan buat dokumentasi.

Jawab :

Berikut adalah cuplikan implementasi Website Berita yang dibuat :

Berikut adalah SourceCode dari Website tersebut : SurceCodeETS

5. Berikut Adalah Video Presentasi mengenai Web dan Source Code yang diupload di Youtube :
LinkYoutubeETSPweb