Lesson 14: Project – User Jamila
Halo Coders Muda Masa Depan! š
Final Output Web Page
Coba perhatikan baik-baik gambar websiteĀ “Wild Guardian”Ā di atas. Keren banget, kan? Sebuah halaman website ini bukan cuma sekadar tampilan biasa, tapi ini adalah misi kita untuk ngenalin hewan-hewan langka yang butuh perlindungan ke seluruh dunia maya.
Tapi masalahnya… website ini baru ada desain gambarnya doang! Nah, di sinilah Bapak butuh bantuanĀ skillĀ dewa kalian.
š„ TANTANGAN HARI INI: “The Wild Coding Quest!” š„
Misi kalian adalah mengubah gambar statis di atas menjadi website sungguhan yang bisa di-klik dan di-scroll, murni cuma pakai “sihir” HTML dan CSS!
Bapak tantang kalian untuk bikin tampilannyaĀ semirip mungkinĀ dengan gambar tersebut. Sebelum kalian bukaĀ text editorĀ (VS Code, Sublime, Code.org dll), coba pasang mata detektif kalian dan perhatikanĀ clueĀ berikut ini:
- Zona Warna Alam š²:Ā Perhatikan pembagian warnanya. Ada bagianĀ HeaderĀ (atas) danĀ FooterĀ (bawah) yang pakai warna hijau gelap dengan teks putih di tengah. Terus ada bagian tengah yang warnanya hijau krem lembut. Gimana tuh cara ngaturnya di CSS?
- Jurus Daftar Rapi š:Ā Di bagian tengah, ada daftar yang pakai titik (bullet) dan ada yang pakai angka. Hayoo.. masih ingat bedanya tagĀ <ol>Ā samaĀ <ul>Ā di HTML? Jangan lupa kasih ikon kecil di sebelah judulnya ya!
- Level Bos: Galeri Kartu š¼ļø:Ā Ini dia ujian utamanya! Kalian harus bikin 6 “kartu” hewan yang berjejer rapi jadi 3 kolom dan 2 baris. Setiap kartu punya garis pinggir (border) hijau, foto yang ukurannya pas, judul berwarna biru yang tebal, dan teks di tengah.Ā Hint tingkat dewa: Gunakan jurus andalan kalian, entah ituĀ FlexboxĀ atauĀ CSS GridĀ buat bikin mereka baris dengan rapi!
Aturan Main:
- Dilarang pakaiĀ templateĀ atauĀ frameworkĀ (seperti Bootstrap dll). Murni HTML dan CSS buatan tangan kalian sendiri!
- Kalau awal-awal tampilannya berantakan, posisinya lari-larian,Ā jangan panik!Ā Itu wajar.Ā ProgrammerĀ sejati pantang menyerah sebelum nemuĀ bug-nya di mana.
Gimana? Berani terima tantangan ini? Siapkan keyboard kalian, tarik napas panjang, dan mari wujudkan Wild Guardian jadi nyata!
Siapa yang kodenya paling rapi dan tampilannya paling mirip, bakal dapet predikat “Master Coder” hari ini! Let’s goooo! šš»
Before
Header
Code CSS + HTML
/* Untuk mempercantik tampilan Judul Utama dan Sub Judul */
.header {
background-color: #003E1F;
color: white;
font-size: 16px;
text-align: center;
padding: 20px;
}
<!-- Ini untuk Judul dan Sub Judul -->
<div class="header">
<h1>Wild Guardian</h1>
<p>Welcome to a journey through the eyes of those seldom seen. This website is dedicated to showcasing the beauty of endangered species around the globe.</p>
<p>Our goal is to educate and inspire action towards conservation efforts.</p>
</div>
Feature
Code CSS + HTML
/* Ini untuk membuat tampilan Feature */
.featured {
background-color: #EEF1BD;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
<!-- Ini adalah wadah untuk bagian featured -->
<div class="featured">
<!-- Wadah untuk content di species list -->
<div class="content">
<h2>š Featured Species</h2>
<ul>
<li>Amur Leopard</li>
<li>Sumatran Elephant</li>
<li>Mountain Gorilla</li>
</ul>
</div>
Content
Code CSS
/* Ini untuk wadah featured container */
.content {
width: 40%;
}
Gallery
Code CSS + HTML
/* Ini untuk membuat tampilan seperti galeri */
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 20px;
}
<h2>š¼ļø Gallery</h2>
<div class="gallery">
<!-- animal card - the amur leopard -->
<div class="animal-card">
<img src="amur_leopard.jpg" alt="Amur Leopard">
<h3>Amur Leopard</h3>
<p>Status: Critically Endangered</p>
<p>Population: more than 84 individuals</p>
</div>
Animal Info Card
/* Ini untuk membuat tampilan seperti card untuk setiap hewan*/
.animal-card {
background-color: #FAF9F9;
width: 250px;
height: 300px;
display: flex;
flex-direction: column;
text-align: center;
border: 2px solid #003E1F;
margin: 10px;
padding: 10px;
}
<div class="animal-card">
<img src="amur_leopard.jpg" alt="Amur Leopard">
<h3>Amur Leopard</h3>
<p>Status: Critically Endangered</p>
<p>Population: more than 84 individuals</p>
</div>
Paragraph Info Card
/* ini untuk buat tampilan keterangan disetiap card galeri */
.animal-card p {
margin-top: 0px;
margin-bottom: 5px;
padding-top: 0px;
}
Footer
/* Ini untuk membuat tampilan footer*/
.footer {
background-color: #003E1F;
color: white;
text-align: center;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
<!-- Ini HTML Footer -->
<div class="footer">
<p>images and facts courtesy of World Wildlife Fund <br /> www.worldwildlife.org</p>
</div>
