際際滷

際際滷Share a Scribd company logo
TUGAS 6-KU-0316(INDIVIDU)
REKAYASA WEB
NAMA : HIDAYATUL ICHWAN
NIM : 1311511529
UNIVERSITAS BUDILUHUR
Responsive Web Design
 Responsive Web Design adalah sebuah teknik yang
digunakan untuk membuat layout website menyesuaikan
diri dengan tampilan device pengunjung, baik ukuran
maupun orientasinya. Jadi tampilan yang berada di
desktop komputer dengan tampilan yang diakses melalu
SmartPhone misalnya, itu akan berbeda tampilannya.
Responsive Web Design Untuk mengetes tampilan yang
menggunakan teknik Responsive tersebut tidak harus
mengaksesnya melalui mobile device ataupun device
lainnya, namun cukup dengan meminimize browser saja
ke dalam ukuran mobile device yang diinginkan, kita
sudah dapat melihat tampilan website kita pada layar
mobile device.
Contoh web dengan karakter
Responsive Web Design.
Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529
Perbandingan framework yang telah
mengimplementasikan Responsive Web
Design
 Bootstrap
 Foundation
 Semantic-UI
 Less Framework 4
 MQFramework
 Golden Grid System
 Amazium
 Namun ada dua framework yang paling ternama saat ini,
yang paling banyak pengguna nya, yaitu Twitter
Bootstrap dan Foundation.
 Framework adalah kumpulan tools atau library untuk
membuat website dan aplikasi mobile. Paket Framework
termasuk file dan folder dari kode standar (HTML, CSS,
JS, dll) sebagai dasar untuk memulai membangun
sebuah situs website.
 Secara sepintas kita bisa melihat bootstrap sedikit
unggul dibanding foundation, misal nya bootstrap
tersedia dalam bentuk less dan sass, sedangkan
foundation hanya sass, dari segi komunitas juga
bootstrap lebih besar dibanding foundation.
 Bootstrap
 Bootstrap bisa dibilang cukup populer dikalangan
desainer web atau mobile karena kemudahan dalam
menggunakannya dan memiliki hasil yang menarik.
Front-end framework yang dibuat oleh Twitter ini adalah
framework yang dapat digunakan untuk membangun
website dinamis dengan menggunakan bahasa script
CSS.
 Dengan Bootstrap, para desainer bisa membuat
tampilan website yang responsif. Selain itu, para
desainer tidak perlu membuat CSS sendiri agar tampilan
web menarik karena kita hanya perlu memanggil class
yang tersedia di Bootstrap.
 Foundation
Framework bertenaga ini dapat digunakan oleh para
desainer web untuk membuat template pada website
yang modern. Fitur yang dimiliki Foundation ini sangat
kaya seperti yang dimiliki Bootstrap. Framework yang
satu ini biasanya digunakan para desainer web untuk
membuat template premium yang ada di market themes
seperti ThemeForest.
 Semantic-UI
Semantic-UI ini disebut-sebut sebagai pesaing ketat dari
Bootstrap karena framework yang satu ini memberikan
desain web yang sangat modern. Pada pembaruan
terbarunya Semantic-UI sudah terintegrasi dengan
Angular, Ember, dan Meteor sehingga sangat cocok
untuk digunakan pada proyek yang besar dan kompleks.
 Foundation
Framework bertenaga ini dapat digunakan oleh para
desainer web untuk membuat template pada website
yang modern. Fitur yang dimiliki Foundation ini sangat
kaya seperti yang dimiliki Bootstrap. Framework yang
satu ini biasanya digunakan para desainer web untuk
membuat template premium yang ada di market themes
seperti ThemeForest.
 Semantic-UI
Semantic-UI ini disebut-sebut sebagai pesaing ketat dari
Bootstrap karena framework yang satu ini memberikan
desain web yang sangat modern. Pada pembaruan
terbarunya Semantic-UI sudah terintegrasi dengan
Angular, Ember, dan Meteor sehingga sangat cocok
untuk digunakan pada proyek yang besar dan kompleks.

More Related Content

What's hot (9)

Tugas individu pertemuan 06 (19042016)
Tugas individu pertemuan 06 (19042016)Tugas individu pertemuan 06 (19042016)
Tugas individu pertemuan 06 (19042016)
Novia Indahsari
Tugas rekayasa web
Tugas rekayasa webTugas rekayasa web
Tugas rekayasa web
Muhamad Fahrul Azis
e-bussinies
e-bussiniese-bussinies
e-bussinies
Newbie Masih
Belajar Server Side Rendering Yuk! - Dimas Maulana Dwi Saputra
Belajar Server Side Rendering Yuk! - Dimas Maulana Dwi SaputraBelajar Server Side Rendering Yuk! - Dimas Maulana Dwi Saputra
Belajar Server Side Rendering Yuk! - Dimas Maulana Dwi Saputra
DicodingEvent
05 rw
05 rw05 rw
05 rw
Basiroh M.Kom
Mendandani Blog dengan Widget
Mendandani Blog dengan WidgetMendandani Blog dengan Widget
Mendandani Blog dengan Widget
Yulef Dian
Framework 1411510744 azhar krisna pratama
Framework 1411510744 azhar krisna pratamaFramework 1411510744 azhar krisna pratama
Framework 1411510744 azhar krisna pratama
Azhar Krisna
Tutorial WordPress: Kenapa Memilih WordPress?
Tutorial WordPress: Kenapa Memilih WordPress?Tutorial WordPress: Kenapa Memilih WordPress?
Tutorial WordPress: Kenapa Memilih WordPress?
Medidu
Cms
CmsCms
Cms
Zulfadli Latunia
Tugas individu pertemuan 06 (19042016)
Tugas individu pertemuan 06 (19042016)Tugas individu pertemuan 06 (19042016)
Tugas individu pertemuan 06 (19042016)
Novia Indahsari
Belajar Server Side Rendering Yuk! - Dimas Maulana Dwi Saputra
Belajar Server Side Rendering Yuk! - Dimas Maulana Dwi SaputraBelajar Server Side Rendering Yuk! - Dimas Maulana Dwi Saputra
Belajar Server Side Rendering Yuk! - Dimas Maulana Dwi Saputra
DicodingEvent
Mendandani Blog dengan Widget
Mendandani Blog dengan WidgetMendandani Blog dengan Widget
Mendandani Blog dengan Widget
Yulef Dian
Framework 1411510744 azhar krisna pratama
Framework 1411510744 azhar krisna pratamaFramework 1411510744 azhar krisna pratama
Framework 1411510744 azhar krisna pratama
Azhar Krisna
Tutorial WordPress: Kenapa Memilih WordPress?
Tutorial WordPress: Kenapa Memilih WordPress?Tutorial WordPress: Kenapa Memilih WordPress?
Tutorial WordPress: Kenapa Memilih WordPress?
Medidu

Viewers also liked (16)

Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529
Iich-oNe Hidayat
Fgv 2012-oab-exame-de-ordem-unificado-viii-segunda-fase-direito-civil-provaFgv 2012-oab-exame-de-ordem-unificado-viii-segunda-fase-direito-civil-prova
Fgv 2012-oab-exame-de-ordem-unificado-viii-segunda-fase-direito-civil-prova
Patricia Silva
10 tips incentive-infographic
10 tips incentive-infographic10 tips incentive-infographic
10 tips incentive-infographic
Incentive Inc
了了侶僚竜 亮竜留僚略竜 凌 僚劉凌 虜亮凌,.留僚留粒旅凌了凌
了了侶僚竜 亮竜留僚略竜 凌 僚劉凌 虜亮凌,.留僚留粒旅凌了凌了了侶僚竜 亮竜留僚略竜 凌 僚劉凌 虜亮凌,.留僚留粒旅凌了凌
了了侶僚竜 亮竜留僚略竜 凌 僚劉凌 虜亮凌,.留僚留粒旅凌了凌
Iliana Kouvatsou
Diapositivas del blogger saludDiapositivas del blogger salud
Diapositivas del blogger salud
hugett881
Capsicum farming (爐爛爐÷爐爐爛爐萎爐伍ぞ爐爛 爐爛爐む)
Capsicum farming (爐爛爐÷爐爐爛爐萎爐伍ぞ爐爛 爐爛爐む)Capsicum farming (爐爛爐÷爐爐爛爐萎爐伍ぞ爐爛 爐爛爐む)
Capsicum farming (爐爛爐÷爐爐爛爐萎爐伍ぞ爐爛 爐爛爐む)
Lokendra Badu
Open-Prod : Fonctionnalit辿s StocksOpen-Prod : Fonctionnalit辿s Stocks
Open-Prod : Fonctionnalit辿s Stocks
Objectif-PI
Open-Prod: Fonctionnalti辿s PartenairesOpen-Prod: Fonctionnalti辿s Partenaires
Open-Prod: Fonctionnalti辿s Partenaires
Objectif-PI
Open-Prod : Fonctionnalit辿s VenteOpen-Prod : Fonctionnalit辿s Vente
Open-Prod : Fonctionnalit辿s Vente
Objectif-PI
CSITF Chinese Shanghai International Technology Fair Schedule
CSITF Chinese Shanghai International Technology Fair ScheduleCSITF Chinese Shanghai International Technology Fair Schedule
CSITF Chinese Shanghai International Technology Fair Schedule
Agi
Project loon
Project loonProject loon
Project loon
manishKmuar
Convocatoria orales abril_bisConvocatoria orales abril_bis
Convocatoria orales abril_bis
egonzalezlara
丼仂 仆仂于仂亞仂 于 仂仄舒舒 亳 亳仆仄亠仆舒 亳亠从舒
丼仂 仆仂于仂亞仂 于 仂仄舒舒 亳 亳仆仄亠仆舒 亳亠从舒丼仂 仆仂于仂亞仂 于 仂仄舒舒 亳 亳仆仄亠仆舒 亳亠从舒
丼仂 仆仂于仂亞仂 于 仂仄舒舒 亳 亳仆仄亠仆舒 亳亠从舒
i-Media 亠从仍舒仄仆仂亠 舒亞亠仆于仂
  Oeuvres de napol辿on bonaparte iii-v clan9 empire dragon hussard arm辿e imper...  Oeuvres de napol辿on bonaparte iii-v clan9 empire dragon hussard arm辿e imper...
Oeuvres de napol辿on bonaparte iii-v clan9 empire dragon hussard arm辿e imper...
freemens
Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa web
rizkyripai
Alain de benoist les idees a l'endroit (clan9 europe nouvelle droite national...Alain de benoist les idees a l'endroit (clan9 europe nouvelle droite national...
Alain de benoist les idees a l'endroit (clan9 europe nouvelle droite national...
freemens
Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529
Iich-oNe Hidayat
Fgv 2012-oab-exame-de-ordem-unificado-viii-segunda-fase-direito-civil-provaFgv 2012-oab-exame-de-ordem-unificado-viii-segunda-fase-direito-civil-prova
Fgv 2012-oab-exame-de-ordem-unificado-viii-segunda-fase-direito-civil-prova
Patricia Silva
10 tips incentive-infographic
10 tips incentive-infographic10 tips incentive-infographic
10 tips incentive-infographic
Incentive Inc
了了侶僚竜 亮竜留僚略竜 凌 僚劉凌 虜亮凌,.留僚留粒旅凌了凌
了了侶僚竜 亮竜留僚略竜 凌 僚劉凌 虜亮凌,.留僚留粒旅凌了凌了了侶僚竜 亮竜留僚略竜 凌 僚劉凌 虜亮凌,.留僚留粒旅凌了凌
了了侶僚竜 亮竜留僚略竜 凌 僚劉凌 虜亮凌,.留僚留粒旅凌了凌
Iliana Kouvatsou
Diapositivas del blogger saludDiapositivas del blogger salud
Diapositivas del blogger salud
hugett881
Capsicum farming (爐爛爐÷爐爐爛爐萎爐伍ぞ爐爛 爐爛爐む)
Capsicum farming (爐爛爐÷爐爐爛爐萎爐伍ぞ爐爛 爐爛爐む)Capsicum farming (爐爛爐÷爐爐爛爐萎爐伍ぞ爐爛 爐爛爐む)
Capsicum farming (爐爛爐÷爐爐爛爐萎爐伍ぞ爐爛 爐爛爐む)
Lokendra Badu
Open-Prod : Fonctionnalit辿s StocksOpen-Prod : Fonctionnalit辿s Stocks
Open-Prod : Fonctionnalit辿s Stocks
Objectif-PI
Open-Prod: Fonctionnalti辿s PartenairesOpen-Prod: Fonctionnalti辿s Partenaires
Open-Prod: Fonctionnalti辿s Partenaires
Objectif-PI
Open-Prod : Fonctionnalit辿s VenteOpen-Prod : Fonctionnalit辿s Vente
Open-Prod : Fonctionnalit辿s Vente
Objectif-PI
CSITF Chinese Shanghai International Technology Fair Schedule
CSITF Chinese Shanghai International Technology Fair ScheduleCSITF Chinese Shanghai International Technology Fair Schedule
CSITF Chinese Shanghai International Technology Fair Schedule
Agi
Convocatoria orales abril_bisConvocatoria orales abril_bis
Convocatoria orales abril_bis
egonzalezlara
  Oeuvres de napol辿on bonaparte iii-v clan9 empire dragon hussard arm辿e imper...  Oeuvres de napol辿on bonaparte iii-v clan9 empire dragon hussard arm辿e imper...
Oeuvres de napol辿on bonaparte iii-v clan9 empire dragon hussard arm辿e imper...
freemens
Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa web
rizkyripai
Alain de benoist les idees a l'endroit (clan9 europe nouvelle droite national...Alain de benoist les idees a l'endroit (clan9 europe nouvelle droite national...
Alain de benoist les idees a l'endroit (clan9 europe nouvelle droite national...
freemens

Similar to Tugas 6 ku 0316 1311511529 (20)

Tugas6.rekweb
Tugas6.rekwebTugas6.rekweb
Tugas6.rekweb
Ummi khairani
Tugas 6 rekayasa web 1312510231 rostarina
Tugas 6 rekayasa web 1312510231 rostarinaTugas 6 rekayasa web 1312510231 rostarina
Tugas 6 rekayasa web 1312510231 rostarina
osta92
Tugas rekayasa web 6
Tugas rekayasa web 6Tugas rekayasa web 6
Tugas rekayasa web 6
art david
Tugas 6 rekweb 0316
Tugas 6 rekweb 0316Tugas 6 rekweb 0316
Tugas 6 rekweb 0316
alchdila boyda kuasa
Bab 1 pengantar desain web
Bab 1   pengantar desain webBab 1   pengantar desain web
Bab 1 pengantar desain web
YUSRA FERNANDO
Technical Aspects of Website and Information System Development _Training "IN...
Technical Aspects of Website and Information System Development _Training "IN...Technical Aspects of Website and Information System Development _Training "IN...
Technical Aspects of Website and Information System Development _Training "IN...
Kanaidi ken
Sesi 2 - Pemanfaatan Framework Bootstrap.pptx
Sesi 2 - Pemanfaatan Framework Bootstrap.pptxSesi 2 - Pemanfaatan Framework Bootstrap.pptx
Sesi 2 - Pemanfaatan Framework Bootstrap.pptx
ivanwahyur79
Tugas 6 rekayasa web
Tugas 6  rekayasa webTugas 6  rekayasa web
Tugas 6 rekayasa web
Aditya Indraprasti
Rekayasa web
Rekayasa webRekayasa web
Rekayasa web
Elisanendes
Kelompok 3.pptx
Kelompok 3.pptxKelompok 3.pptx
Kelompok 3.pptx
2141006JESSICAALTHEA
Tugas 6 rekayasa web
Tugas 6  rekayasa webTugas 6  rekayasa web
Tugas 6 rekayasa web
Gilbert Abednego
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
DeniHidayat46
Frame work php
Frame work phpFrame work php
Frame work php
Devindha Permatasari
Pengenalan dreamweaver
Pengenalan dreamweaverPengenalan dreamweaver
Pengenalan dreamweaver
imanprasetyo
Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa web
muhamad arsyan
Tugas 6 rekweb
Tugas 6 rekwebTugas 6 rekweb
Tugas 6 rekweb
yuyun kuratu
Materi 10-rekayasa-web-tahapan-proyek
Materi 10-rekayasa-web-tahapan-proyekMateri 10-rekayasa-web-tahapan-proyek
Materi 10-rekayasa-web-tahapan-proyek
Yan Bali
Pertemuan 3 Modelling Web Aplication.pptx
Pertemuan 3 Modelling Web Aplication.pptxPertemuan 3 Modelling Web Aplication.pptx
Pertemuan 3 Modelling Web Aplication.pptx
fauzandika
Teknologi Website yang menjelaskan tentang dasar - dasar website
Teknologi Website yang menjelaskan tentang dasar - dasar  websiteTeknologi Website yang menjelaskan tentang dasar - dasar  website
Teknologi Website yang menjelaskan tentang dasar - dasar website
sulhan24
THE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL B
THE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL BTHE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL B
THE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL B
SyahraniAdrianty
Tugas 6 rekayasa web 1312510231 rostarina
Tugas 6 rekayasa web 1312510231 rostarinaTugas 6 rekayasa web 1312510231 rostarina
Tugas 6 rekayasa web 1312510231 rostarina
osta92
Tugas rekayasa web 6
Tugas rekayasa web 6Tugas rekayasa web 6
Tugas rekayasa web 6
art david
Bab 1 pengantar desain web
Bab 1   pengantar desain webBab 1   pengantar desain web
Bab 1 pengantar desain web
YUSRA FERNANDO
Technical Aspects of Website and Information System Development _Training "IN...
Technical Aspects of Website and Information System Development _Training "IN...Technical Aspects of Website and Information System Development _Training "IN...
Technical Aspects of Website and Information System Development _Training "IN...
Kanaidi ken
Sesi 2 - Pemanfaatan Framework Bootstrap.pptx
Sesi 2 - Pemanfaatan Framework Bootstrap.pptxSesi 2 - Pemanfaatan Framework Bootstrap.pptx
Sesi 2 - Pemanfaatan Framework Bootstrap.pptx
ivanwahyur79
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
DeniHidayat46
Pengenalan dreamweaver
Pengenalan dreamweaverPengenalan dreamweaver
Pengenalan dreamweaver
imanprasetyo
Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa web
muhamad arsyan
Materi 10-rekayasa-web-tahapan-proyek
Materi 10-rekayasa-web-tahapan-proyekMateri 10-rekayasa-web-tahapan-proyek
Materi 10-rekayasa-web-tahapan-proyek
Yan Bali
Pertemuan 3 Modelling Web Aplication.pptx
Pertemuan 3 Modelling Web Aplication.pptxPertemuan 3 Modelling Web Aplication.pptx
Pertemuan 3 Modelling Web Aplication.pptx
fauzandika
Teknologi Website yang menjelaskan tentang dasar - dasar website
Teknologi Website yang menjelaskan tentang dasar - dasar  websiteTeknologi Website yang menjelaskan tentang dasar - dasar  website
Teknologi Website yang menjelaskan tentang dasar - dasar website
sulhan24
THE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL B
THE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL BTHE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL B
THE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL B
SyahraniAdrianty

More from Iich-oNe Hidayat (9)

Tugas 8 ku - 0316 1311511529
Tugas 8   ku - 0316 1311511529Tugas 8   ku - 0316 1311511529
Tugas 8 ku - 0316 1311511529
Iich-oNe Hidayat
Tugas 7 ku 0316 1311511529
Tugas 7   ku 0316 1311511529Tugas 7   ku 0316 1311511529
Tugas 7 ku 0316 1311511529
Iich-oNe Hidayat
Tugas 7 ku 0316 1311511529
Tugas 7   ku 0316 1311511529Tugas 7   ku 0316 1311511529
Tugas 7 ku 0316 1311511529
Iich-oNe Hidayat
Tugas 5 ku 0316
Tugas 5   ku 0316Tugas 5   ku 0316
Tugas 5 ku 0316
Iich-oNe Hidayat
Tugas 4 ku 0316
Tugas 4   ku 0316Tugas 4   ku 0316
Tugas 4 ku 0316
Iich-oNe Hidayat
Tugas 3 0316
Tugas 3  0316Tugas 3  0316
Tugas 3 0316
Iich-oNe Hidayat
Tugas 2 0316
Tugas 2  0316Tugas 2  0316
Tugas 2 0316
Iich-oNe Hidayat
Tugas rekayasa web
Tugas rekayasa webTugas rekayasa web
Tugas rekayasa web
Iich-oNe Hidayat
Tugas rekayasa web
Tugas rekayasa webTugas rekayasa web
Tugas rekayasa web
Iich-oNe Hidayat

Recently uploaded (20)

kebijakan pelayanan transfusi darah hematologi
kebijakan pelayanan transfusi darah hematologikebijakan pelayanan transfusi darah hematologi
kebijakan pelayanan transfusi darah hematologi
SofiaArdani
Pengumpulan data- Askeb komunitas-Pertemuan 10
Pengumpulan data- Askeb komunitas-Pertemuan 10Pengumpulan data- Askeb komunitas-Pertemuan 10
Pengumpulan data- Askeb komunitas-Pertemuan 10
AyiDamayani
Pertemuan 01. Pendahuluan Statistika Informatika
Pertemuan 01. Pendahuluan Statistika InformatikaPertemuan 01. Pendahuluan Statistika Informatika
Pertemuan 01. Pendahuluan Statistika Informatika
AsepSaepulrohman4
RPT PSV (2).docxUNTU RUJUKAN GURU TAHUN 2025
RPT PSV (2).docxUNTU RUJUKAN GURU TAHUN 2025RPT PSV (2).docxUNTU RUJUKAN GURU TAHUN 2025
RPT PSV (2).docxUNTU RUJUKAN GURU TAHUN 2025
ROBIATUL29
Pergub No. 59 Tahun 2023 - RP3KP PROV NTB 2023-2043.pdf
Pergub No. 59 Tahun 2023 - RP3KP PROV NTB 2023-2043.pdfPergub No. 59 Tahun 2023 - RP3KP PROV NTB 2023-2043.pdf
Pergub No. 59 Tahun 2023 - RP3KP PROV NTB 2023-2043.pdf
WEST NUSA TENGGARA
Topik 1 - Memahami Konsep Literasi Dasar.pptx
Topik 1 - Memahami Konsep Literasi Dasar.pptxTopik 1 - Memahami Konsep Literasi Dasar.pptx
Topik 1 - Memahami Konsep Literasi Dasar.pptx
SyamsuRiwal2
TADABUR SURAH AL WAQIAH.pptxddddddddddddddddddd
TADABUR SURAH AL WAQIAH.pptxdddddddddddddddddddTADABUR SURAH AL WAQIAH.pptxddddddddddddddddddd
TADABUR SURAH AL WAQIAH.pptxddddddddddddddddddd
wan hanif wan ahmad
TAKLIMAT PENGURUSAN DAN PENDAFTARAN TAHUN SATU.pptx
TAKLIMAT PENGURUSAN DAN PENDAFTARAN TAHUN SATU.pptxTAKLIMAT PENGURUSAN DAN PENDAFTARAN TAHUN SATU.pptx
TAKLIMAT PENGURUSAN DAN PENDAFTARAN TAHUN SATU.pptx
helvy3
kimia farmasi mengenai materi kimia dalam
kimia farmasi mengenai materi kimia dalamkimia farmasi mengenai materi kimia dalam
kimia farmasi mengenai materi kimia dalam
dessyratnasari13
MATERI KE 3 BACAAN MAD (PANJANG) TAHSIN 2025
MATERI KE 3 BACAAN MAD (PANJANG) TAHSIN 2025MATERI KE 3 BACAAN MAD (PANJANG) TAHSIN 2025
MATERI KE 3 BACAAN MAD (PANJANG) TAHSIN 2025
BangZiel
SOP ASESMEN MADRASAH 2025 KEMENTERIAN AGAMA
SOP ASESMEN MADRASAH  2025 KEMENTERIAN AGAMASOP ASESMEN MADRASAH  2025 KEMENTERIAN AGAMA
SOP ASESMEN MADRASAH 2025 KEMENTERIAN AGAMA
ZulfikarRidwan2
Menggambar Objek Tumbuhan dengan memperhatikan proporsi
Menggambar Objek Tumbuhan dengan memperhatikan proporsiMenggambar Objek Tumbuhan dengan memperhatikan proporsi
Menggambar Objek Tumbuhan dengan memperhatikan proporsi
suandi01
Scenario Planning Bonus Demografi 2045 Menuju Satu Abad Indonesia Emas
Scenario Planning Bonus Demografi 2045 Menuju Satu Abad Indonesia EmasScenario Planning Bonus Demografi 2045 Menuju Satu Abad Indonesia Emas
Scenario Planning Bonus Demografi 2045 Menuju Satu Abad Indonesia Emas
Dadang Solihin
1 Auditing II-Power Point AUDIT SIKLUS PENJUALAN DAN PENAGIHAN: PENGUJIAN PEN...
1 Auditing II-Power Point AUDIT SIKLUS PENJUALAN DAN PENAGIHAN: PENGUJIAN PEN...1 Auditing II-Power Point AUDIT SIKLUS PENJUALAN DAN PENAGIHAN: PENGUJIAN PEN...
1 Auditing II-Power Point AUDIT SIKLUS PENJUALAN DAN PENAGIHAN: PENGUJIAN PEN...
nhkfadhilah
5. Program Semester Mapel Bahasa Indonesia.docx
5. Program Semester Mapel Bahasa Indonesia.docx5. Program Semester Mapel Bahasa Indonesia.docx
5. Program Semester Mapel Bahasa Indonesia.docx
KhusnulAzizah4
Materi Seminar Agar Ramadhan Tetap Produktif 2025.pdf
Materi Seminar Agar Ramadhan Tetap Produktif 2025.pdfMateri Seminar Agar Ramadhan Tetap Produktif 2025.pdf
Materi Seminar Agar Ramadhan Tetap Produktif 2025.pdf
Namin AB Ibnu Solihin
PERFECT SMK 6 - Strategi Pelaksanaan.pptx
PERFECT SMK 6 - Strategi Pelaksanaan.pptxPERFECT SMK 6 - Strategi Pelaksanaan.pptx
PERFECT SMK 6 - Strategi Pelaksanaan.pptx
Fajar Baskoro
BANGSA DAN KARAKTERISTIK TERNAK KAMBING.docx
BANGSA DAN KARAKTERISTIK TERNAK KAMBING.docxBANGSA DAN KARAKTERISTIK TERNAK KAMBING.docx
BANGSA DAN KARAKTERISTIK TERNAK KAMBING.docx
AzuraAgusnasya
T2 - Demonstrasi Kontekstual Kelompok- PSE.pptx
T2 - Demonstrasi Kontekstual Kelompok- PSE.pptxT2 - Demonstrasi Kontekstual Kelompok- PSE.pptx
T2 - Demonstrasi Kontekstual Kelompok- PSE.pptx
muhammadzaki112001
Introduction to Building Maintenance & Preventive Maintenance _Training *Proa...
Introduction to Building Maintenance & Preventive Maintenance _Training *Proa...Introduction to Building Maintenance & Preventive Maintenance _Training *Proa...
Introduction to Building Maintenance & Preventive Maintenance _Training *Proa...
Kanaidi ken
kebijakan pelayanan transfusi darah hematologi
kebijakan pelayanan transfusi darah hematologikebijakan pelayanan transfusi darah hematologi
kebijakan pelayanan transfusi darah hematologi
SofiaArdani
Pengumpulan data- Askeb komunitas-Pertemuan 10
Pengumpulan data- Askeb komunitas-Pertemuan 10Pengumpulan data- Askeb komunitas-Pertemuan 10
Pengumpulan data- Askeb komunitas-Pertemuan 10
AyiDamayani
Pertemuan 01. Pendahuluan Statistika Informatika
Pertemuan 01. Pendahuluan Statistika InformatikaPertemuan 01. Pendahuluan Statistika Informatika
Pertemuan 01. Pendahuluan Statistika Informatika
AsepSaepulrohman4
RPT PSV (2).docxUNTU RUJUKAN GURU TAHUN 2025
RPT PSV (2).docxUNTU RUJUKAN GURU TAHUN 2025RPT PSV (2).docxUNTU RUJUKAN GURU TAHUN 2025
RPT PSV (2).docxUNTU RUJUKAN GURU TAHUN 2025
ROBIATUL29
Pergub No. 59 Tahun 2023 - RP3KP PROV NTB 2023-2043.pdf
Pergub No. 59 Tahun 2023 - RP3KP PROV NTB 2023-2043.pdfPergub No. 59 Tahun 2023 - RP3KP PROV NTB 2023-2043.pdf
Pergub No. 59 Tahun 2023 - RP3KP PROV NTB 2023-2043.pdf
WEST NUSA TENGGARA
Topik 1 - Memahami Konsep Literasi Dasar.pptx
Topik 1 - Memahami Konsep Literasi Dasar.pptxTopik 1 - Memahami Konsep Literasi Dasar.pptx
Topik 1 - Memahami Konsep Literasi Dasar.pptx
SyamsuRiwal2
TADABUR SURAH AL WAQIAH.pptxddddddddddddddddddd
TADABUR SURAH AL WAQIAH.pptxdddddddddddddddddddTADABUR SURAH AL WAQIAH.pptxddddddddddddddddddd
TADABUR SURAH AL WAQIAH.pptxddddddddddddddddddd
wan hanif wan ahmad
TAKLIMAT PENGURUSAN DAN PENDAFTARAN TAHUN SATU.pptx
TAKLIMAT PENGURUSAN DAN PENDAFTARAN TAHUN SATU.pptxTAKLIMAT PENGURUSAN DAN PENDAFTARAN TAHUN SATU.pptx
TAKLIMAT PENGURUSAN DAN PENDAFTARAN TAHUN SATU.pptx
helvy3
kimia farmasi mengenai materi kimia dalam
kimia farmasi mengenai materi kimia dalamkimia farmasi mengenai materi kimia dalam
kimia farmasi mengenai materi kimia dalam
dessyratnasari13
MATERI KE 3 BACAAN MAD (PANJANG) TAHSIN 2025
MATERI KE 3 BACAAN MAD (PANJANG) TAHSIN 2025MATERI KE 3 BACAAN MAD (PANJANG) TAHSIN 2025
MATERI KE 3 BACAAN MAD (PANJANG) TAHSIN 2025
BangZiel
SOP ASESMEN MADRASAH 2025 KEMENTERIAN AGAMA
SOP ASESMEN MADRASAH  2025 KEMENTERIAN AGAMASOP ASESMEN MADRASAH  2025 KEMENTERIAN AGAMA
SOP ASESMEN MADRASAH 2025 KEMENTERIAN AGAMA
ZulfikarRidwan2
Menggambar Objek Tumbuhan dengan memperhatikan proporsi
Menggambar Objek Tumbuhan dengan memperhatikan proporsiMenggambar Objek Tumbuhan dengan memperhatikan proporsi
Menggambar Objek Tumbuhan dengan memperhatikan proporsi
suandi01
Scenario Planning Bonus Demografi 2045 Menuju Satu Abad Indonesia Emas
Scenario Planning Bonus Demografi 2045 Menuju Satu Abad Indonesia EmasScenario Planning Bonus Demografi 2045 Menuju Satu Abad Indonesia Emas
Scenario Planning Bonus Demografi 2045 Menuju Satu Abad Indonesia Emas
Dadang Solihin
1 Auditing II-Power Point AUDIT SIKLUS PENJUALAN DAN PENAGIHAN: PENGUJIAN PEN...
1 Auditing II-Power Point AUDIT SIKLUS PENJUALAN DAN PENAGIHAN: PENGUJIAN PEN...1 Auditing II-Power Point AUDIT SIKLUS PENJUALAN DAN PENAGIHAN: PENGUJIAN PEN...
1 Auditing II-Power Point AUDIT SIKLUS PENJUALAN DAN PENAGIHAN: PENGUJIAN PEN...
nhkfadhilah
5. Program Semester Mapel Bahasa Indonesia.docx
5. Program Semester Mapel Bahasa Indonesia.docx5. Program Semester Mapel Bahasa Indonesia.docx
5. Program Semester Mapel Bahasa Indonesia.docx
KhusnulAzizah4
Materi Seminar Agar Ramadhan Tetap Produktif 2025.pdf
Materi Seminar Agar Ramadhan Tetap Produktif 2025.pdfMateri Seminar Agar Ramadhan Tetap Produktif 2025.pdf
Materi Seminar Agar Ramadhan Tetap Produktif 2025.pdf
Namin AB Ibnu Solihin
PERFECT SMK 6 - Strategi Pelaksanaan.pptx
PERFECT SMK 6 - Strategi Pelaksanaan.pptxPERFECT SMK 6 - Strategi Pelaksanaan.pptx
PERFECT SMK 6 - Strategi Pelaksanaan.pptx
Fajar Baskoro
BANGSA DAN KARAKTERISTIK TERNAK KAMBING.docx
BANGSA DAN KARAKTERISTIK TERNAK KAMBING.docxBANGSA DAN KARAKTERISTIK TERNAK KAMBING.docx
BANGSA DAN KARAKTERISTIK TERNAK KAMBING.docx
AzuraAgusnasya
T2 - Demonstrasi Kontekstual Kelompok- PSE.pptx
T2 - Demonstrasi Kontekstual Kelompok- PSE.pptxT2 - Demonstrasi Kontekstual Kelompok- PSE.pptx
T2 - Demonstrasi Kontekstual Kelompok- PSE.pptx
muhammadzaki112001
Introduction to Building Maintenance & Preventive Maintenance _Training *Proa...
Introduction to Building Maintenance & Preventive Maintenance _Training *Proa...Introduction to Building Maintenance & Preventive Maintenance _Training *Proa...
Introduction to Building Maintenance & Preventive Maintenance _Training *Proa...
Kanaidi ken

Tugas 6 ku 0316 1311511529

  • 1. TUGAS 6-KU-0316(INDIVIDU) REKAYASA WEB NAMA : HIDAYATUL ICHWAN NIM : 1311511529 UNIVERSITAS BUDILUHUR
  • 2. Responsive Web Design Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya. Jadi tampilan yang berada di desktop komputer dengan tampilan yang diakses melalu SmartPhone misalnya, itu akan berbeda tampilannya. Responsive Web Design Untuk mengetes tampilan yang menggunakan teknik Responsive tersebut tidak harus mengaksesnya melalui mobile device ataupun device lainnya, namun cukup dengan meminimize browser saja ke dalam ukuran mobile device yang diinginkan, kita sudah dapat melihat tampilan website kita pada layar mobile device.
  • 3. Contoh web dengan karakter Responsive Web Design.
  • 6. Perbandingan framework yang telah mengimplementasikan Responsive Web Design Bootstrap Foundation Semantic-UI Less Framework 4 MQFramework Golden Grid System Amazium
  • 7. Namun ada dua framework yang paling ternama saat ini, yang paling banyak pengguna nya, yaitu Twitter Bootstrap dan Foundation. Framework adalah kumpulan tools atau library untuk membuat website dan aplikasi mobile. Paket Framework termasuk file dan folder dari kode standar (HTML, CSS, JS, dll) sebagai dasar untuk memulai membangun sebuah situs website. Secara sepintas kita bisa melihat bootstrap sedikit unggul dibanding foundation, misal nya bootstrap tersedia dalam bentuk less dan sass, sedangkan foundation hanya sass, dari segi komunitas juga bootstrap lebih besar dibanding foundation.
  • 8. Bootstrap Bootstrap bisa dibilang cukup populer dikalangan desainer web atau mobile karena kemudahan dalam menggunakannya dan memiliki hasil yang menarik. Front-end framework yang dibuat oleh Twitter ini adalah framework yang dapat digunakan untuk membangun website dinamis dengan menggunakan bahasa script CSS. Dengan Bootstrap, para desainer bisa membuat tampilan website yang responsif. Selain itu, para desainer tidak perlu membuat CSS sendiri agar tampilan web menarik karena kita hanya perlu memanggil class yang tersedia di Bootstrap.
  • 9. Foundation Framework bertenaga ini dapat digunakan oleh para desainer web untuk membuat template pada website yang modern. Fitur yang dimiliki Foundation ini sangat kaya seperti yang dimiliki Bootstrap. Framework yang satu ini biasanya digunakan para desainer web untuk membuat template premium yang ada di market themes seperti ThemeForest. Semantic-UI Semantic-UI ini disebut-sebut sebagai pesaing ketat dari Bootstrap karena framework yang satu ini memberikan desain web yang sangat modern. Pada pembaruan terbarunya Semantic-UI sudah terintegrasi dengan Angular, Ember, dan Meteor sehingga sangat cocok untuk digunakan pada proyek yang besar dan kompleks.
  • 10. Foundation Framework bertenaga ini dapat digunakan oleh para desainer web untuk membuat template pada website yang modern. Fitur yang dimiliki Foundation ini sangat kaya seperti yang dimiliki Bootstrap. Framework yang satu ini biasanya digunakan para desainer web untuk membuat template premium yang ada di market themes seperti ThemeForest. Semantic-UI Semantic-UI ini disebut-sebut sebagai pesaing ketat dari Bootstrap karena framework yang satu ini memberikan desain web yang sangat modern. Pada pembaruan terbarunya Semantic-UI sudah terintegrasi dengan Angular, Ember, dan Meteor sehingga sangat cocok untuk digunakan pada proyek yang besar dan kompleks.