Tugas Pembelajaran CSS

Buat halaman HTML sederhana:

Buat file HTML yang berisi struktur dasar halaman (misalnya <html>, <head>, <body>, dan konten seperti <h1>, <p>, dan <ul>).
Tambahkan CSS internal di dalam tag <style> yang terletak di bagian <head>.

Contoh:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Web CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        p {
            color: #555;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>Selamat datang di CSS!</h1>
    <p>Ini adalah halaman pertama Anda dengan CSS.</p>
</body>
</html>

Tugas 1: Menambahkan CSS External

Pisahkan kode CSS dari HTML dengan memindahkan CSS ke dalam file terpisah dengan ekstensi .css dan link-kan file CSS tersebut ke dalam file HTML.
Misalnya, buat file style.css yang berisi CSS dan hubungkan dengan file HTML Anda menggunakan tag <link> di bagian <head>.

Bagian 2: Styling Dasar

Tugas 2: Styling Elemen HTML

Ubah warna latar belakang halaman menjadi biru muda (#e0f7fa).
Ganti warna teks paragraf menjadi hitam dan tambahkan padding 10px di sekitar teks.
Ganti warna latar belakang dari elemen heading (<h1>) menjadi hijau dan teksnya menjadi putih.

Contoh:

body {
    background-color: #e0f7fa;
}
p {
    color: black;
    padding: 10px;
}
h1 {
    background-color: green;
    color: white;
}

Tugas 3: Menggunakan Margin dan Padding

Atur margin atas dan bawah untuk elemen <h1> menjadi 20px.
Atur padding kiri dan kanan untuk elemen <p> menjadi 15px.
Berikan margin kiri dan kanan sebesar 30px pada seluruh halaman body.

Bagian 3: Penggunaan Selector dan Class

Tugas 4: Menambahkan Kelas dan ID

Tambahkan dua kelas baru: .highlight untuk teks yang ingin disorot dan .special untuk memberi gaya khusus pada elemen tertentu.
Tambahkan ID #banner pada elemen header dan atur warna latar belakangnya menjadi kuning.

Contoh:

<h1 id="banner">Selamat Datang!</h1>
<p class="highlight">Ini adalah teks yang disorot.</p>
<p class="special">Teks ini memiliki gaya khusus.</p>

#banner {
    background-color: yellow;
}
.highlight {
    color: red;
    font-weight: bold;
}
.special {
    font-size: 18px;
    color: blue;
}

Bagian 4: Layout dan Posisi

Tugas 5: Layout Dasar dengan Flexbox

Buat sebuah kontainer dengan tiga elemen di dalamnya, misalnya: tiga div untuk menampilkan kotak. Atur posisi mereka menggunakan Flexbox.
Setel elemen agar posisinya sejajar secara horizontal dan vertikal.

Contoh:

<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
</div>

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    text-align: center;
    line-height: 100px;
}

Bagian 5: Media Query dan Responsivitas

Tugas 6: Membuat Halaman Responsif

Gunakan media query untuk mengubah tampilan halaman agar responsif pada perangkat dengan lebar layar kecil (misalnya, layar ponsel dengan lebar di bawah 600px).
Atur lebar kotak menjadi 100% pada layar kecil, dan font menjadi lebih kecil.

Contoh:

@media (max-width: 600px) {
    .box {
        width: 100%;
        font-size: 12px;
    }
}

Bagian 6: Efek dan Animasi

Tugas 7: Animasi dengan CSS

Tambahkan animasi pada elemen kotak menggunakan @keyframes. Misalnya, buat kotak yang berubah warna secara perlahan dari merah ke biru.

Contoh:

@keyframes colorChange {
    0% { background-color: red; }
    100% { background-color: blue; }
}

.box {
    animation: colorChange 5s infinite alternate;
}

Penilaian:

Keakuratan: Cek apakah setiap tugas telah diselesaikan dengan benar sesuai instruksi.
Kreativitas: Cek bagaimana Anda menambahkan variasi dalam desain halaman dan penggunaan CSS.
Kesesuaian Layout: Pastikan tata letak responsif dan dapat menyesuaikan dengan ukuran layar.
Keterbacaan Kode: Pastikan kode HTML dan CSS mudah dibaca dan terorganisir dengan baik.

Batas Waktu Pengumpulan:

Tugas ini bisa dikerjakan dalam waktu satu minggu. Kirimkan hasilnya dalam bentuk file HTML dan CSS terpisah.

PreviousPengenalan CSS NextPengenalan Javascript Dan Dom

Last updated 4 months ago

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Halaman Web CSS</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; } h1 { color: #333; text-align: center; } p { color: #555; line-height: 1.6; } </style> </head> <body> <h1>Selamat datang di CSS!</h1> <p>Ini adalah halaman pertama Anda dengan CSS.</p> </body> </html>

.container { display: flex; justify-content: space-between; align-items: center; } .box { width: 100px; height: 100px; background-color: lightblue; text-align: center; line-height: 100px; }