Laporan Praktikum Pertemuan 4

LAPORAN PRAKTIKUM
Nama Matakuliah : WEB DESIGN

SKS :2
Pertemuan ke :4
Materi : FLUID LAYOUT DAN FLEXBOX
Nama Mahasiswa : DELVIN
NPM : 231510014
FLUID LAYOUT DAN FLEXBOX
Fluid Layout dan Flexbox adalah dua teknik yang digunakan dalam desain dan pengembangan web untuk
menciptakan tata letak yang responsif dan fleksibel.
Fluid Layout:
 Fluid layout mengacu pada desain tata letak web yang menggunakan unit pengukuran yang
relatif, seperti persen, daripada unit pengukuran absolut seperti piksel. Ini memungkinkan
elemen-elemen di halaman web untuk menyesuaikan ukurannya sesuai dengan lebar layar atau
elemen kontainer induknya.
 Keuntungan: Hal ini memungkinkan situs web untuk menyesuaikan diri dengan berbagai ukuran
layar dan perangkat, termasuk desktop, tablet, dan ponsel cerdas.
 Contoh: Menggunakan persentase untuk mengatur lebar elemen, sehingga akan menyesuaikan
diri dengan lebar tampilan pengguna.
Flexbox:
 Flexbox adalah sebuah modul CSS yang menyediakan cara untuk mengatur, menyusun, dan
mendistribusikan elemen di dalam kontainer, bahkan ketika ukurannya berubah atau tidak
diketahui.
 Keuntungan: Memungkinkan pengembang untuk membuat tata letak yang lebih kompleks dan
dinamis dengan memanfaatkan alur item dan kontainer yang fleksibel.
 Contoh: Membuat daftar elemen sejajar atau menumpuk secara vertikal dalam kontainer, dan
menyesuaikan ukuran atau penempatan relatif satu sama lain berdasarkan aturan Flexbox.
Perbandingan:
 Fluid Layout lebih umum digunakan untuk menyesuaikan elemen dengan ukuran layar atau
kontainer tertentu. Ini adalah pendekatan yang paling umum digunakan dalam responsif web
design.
 Flexbox, di sisi lain, adalah teknik yang lebih khusus untuk mengatur elemen di dalam sebuah
kontainer. Ini memberikan kontrol yang lebih besar terhadap susunan elemen, terutama dalam
situasi yang lebih kompleks.
 Penting untuk dicatat bahwa kedua teknik ini seringkali digunakan bersama-sama. Misalnya,
Anda dapat menggunakan Flexbox untuk mengatur elemen di dalam suatu area, dan
menggunakan unit pengukuran relatif (seperti persen) untuk memastikan bahwa area tersebut
dapat beradaptasi dengan berbagai ukuran layar.
Implementasi Fluid Pada Layout Web
Layout yang akan dirancang
Kode Program:
<!DOCTYPE html>
<html>
<head>
<title>Implementasi Fluid</title>
<style>
.CenterMe {
background-color: indigo; color: #ebebeb;
font-family: "Oswald", sans-serif; font-size: 2rem;
text-transform: uppercase; height: 200px;
display: flex; align-items: center;
justify-content: center;
}
.Header {
width: 100%;
height: 130px;
background-color: #038c5a;
}
.WrapMiddle {
width: 100%;
font-size: 0;
}
.Left {
height: 625px;
width: 20.83%;
background-color: #03a66a;
display: inline-block;
}
.Middle {
height: 625px;
width: 68.75%;
background-color: #bbbf90;
}
.Right {
height: 625px;
width: 10.41%;
}
.Footer {
height: 200px;
width: 100%;
background-color: #025059;
}
.Left {
height: 625px;
position: absolute;
left: -200px;
width: 200px;
font-size: 0.9rem;
transition: transform 0.3s;
}
@media (min-width: 40rem) {
.Left {
width: 20.83%;
left: 0;
position: relative;
}
}
</style>
</head>
<body>
<div class="Wrap">
<header class="Header"></header>
<div class="WrapMiddle">
<aside class="Left"></aside>
<main class="Middle"></main>
<aside class="Right"></aside>
</div>
<footer class="Footer"></footer>
</div>
</body>
</html>
Implmentasi Flexbox
1. Buat kerangkat HTML, ganti title manjadi “
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Implementaasi-Flexbox</title>
</head>
<body>
</body>
</html>
2. Pada body tambahkan
<body>
<div class="CenterMe">Hello, I'm centered with Flexbox!</div>
</body>
Maka hasilnya
3. Tambahkan CSS pada dibawah title
.CenterMe {
background-color: indigo;
color: #ebebeb;
font-family: "Oswald", sans-serif;
font-size: 2rem;
text-transform: uppercase;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
Maka hasilnya
4. Untuk membuat menu tambahkan kode berikut di bagia body
<div class="container">
<a href="#" class="item">Home</a>
<a href="#" class="item">About Us</a>
<a href="#" class="item">Products</a>
<a href="#" class="item">Policy</a>
<a href="#" class="last-item">Contact Us</a>
</div>
Maka tampilan webnya adalah
5. Untuk mempercantik tampilan menunya tambahkan css berikut dibawah .CenterMe

Maka hasilnya :
6. Untuk membuat Vertical list tambahkan kode CSS di bagian style

Maka hasilnya :
7. Untuk membuat Flexbox Alignment Properties tambahkan kode di bagian bawah html
Maka hasilnya :
8. Lalu tambahkan kode CSS di bagian style
Maka hasilnya :

Laporan Praktikum Pertemuan 4

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Laporan Praktikum Pertemuan 4

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIKUM

Nama Matakuliah : WEB DESIGN

FLUID LAYOUT DAN FLEXBOX

Implementasi Fluid Pada Layout Web

Layout yang akan dirancang

1. Buat kerangkat HTML, ganti title manjadi “

2. Pada body tambahkan

3. Tambahkan CSS pada dibawah title

Maka tampilan webnya adalah

5. Untuk mempercantik tampilan menunya tambahkan css berikut dibawah .CenterMe

6. Untuk membuat Vertical list tambahkan kode CSS di bagian style

Anda mungkin juga menyukai