Tutorial CSS / Membangun Situs Web Responsif dengan HTML dan CSS

Anda dapat menggabungkan HTML semantik, variabel CSS bersama, navigasi Flexbox, dan tata letak kartu Grid untuk membangun situs web kecil yang responsif. Mulailah dengan konten yang mudah dibaca dan tata letak layar sempit yang dapat digunakan, kemudian tambahkan penyesuaian layar lebih lebar dan status interaksi yang terlihat.

Tentukan halaman dan kriteria keberhasilan

Tentukan konten dan perilaku halaman sebelum menata gaya. Pada layar sempit, navigasi membungkus ketika diperlukan dan kartu membentuk satu kolom. Ruang yang lebih tersedia memungkinkan dua atau tiga kolom. Batasi lebar membaca keseluruhan agar teks tidak menjadi terlalu panjang pada layar lebar.

Contoh ini adalah layar statis dan tidak ada tautan pada kartu itu sendiri. Menu pengenalan/kursus dan tautan navigasi besar berpindah ke bagian dari dokumen yang sama. Untuk memperluas daftar kursus aktual Anda, masukkan URL pos yang diverifikasi di judul kartu. Tidak perlu menambahkan formulir yang tidak digunakan atau animasi tak terbatas secara paksa untuk menyelesaikan latihan ini.

Siapkan berkas dan HTML semantik

Buat index.html dan style.css di lokasi yang sama dalam folder kosong. Saat membuat berkas, pastikan itu bukan index.html.txt karena ekstensi tersembunyi dan simpan sebagai UTF-8. Tag link di index.html mengarah ke style.css di folder yang sama. Tidak diperlukan instalasi atau build terpisah.

learning-site/
  index.html
  style.css

Pertama, simpan seluruh HTML di bawah ini ke index.html. Bahkan jika CSS kosong, judul, tautan, dan konten kartu harus dibaca secara berurutan. header adalah area kepala situs, nav adalah navigasi, main adalah konten utama, dan footer adalah footer. Tempatkan topik studi h2 dan kartu h3 di bawah h1 dalam dokumen. HTML ini adalah contoh file mandiri, jadi dipisahkan dari struktur halaman yang langsung terhubung ke body WordPress.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A Small Learning Site</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <a class="skip-link" href="#main">Skip to main content</a>
  <header class="site-header">
    <div class="container header-inner">
      <p class="site-name">Learning Notes</p>
      <nav aria-label="Main navigation">
        <a href="#intro">About</a><a href="#lessons">Lessons</a>
      </nav>
    </div>
  </header>
  <main id="main" tabindex="-1">
    <section id="intro" class="hero" aria-labelledby="intro-title">
      <div class="container">
        <h1 id="intro-title">Learn to Build Webpages Step by Step</h1>
        <p>Structure content with HTML and adapt its appearance with CSS.</p>
        <a class="button" href="#lessons">Explore the lessons</a>
      </div>
    </section>
    <section id="lessons" class="lessons container" aria-labelledby="lessons-title">
      <h2 id="lessons-title">Learning topics</h2>
      <ul class="card-grid" role="list">
        <li><article class="card"><h3>HTML structure</h3><p>Organize content with headings and paragraphs.</p></article></li>
        <li><article class="card"><h3>CSS styles</h3><p>Adjust colors, fonts, and spacing.</p></article></li>
        <li><article class="card"><h3>Responsive layout</h3><p>Arrange cards to fit the available width.</p></article></li>
      </ul>
    </section>
  </main>
  <footer class="site-footer"><div class="container"><p>Small learning site exercise</p></div></footer>
</body>
</html>

Jalan pintas ke teks utama terhubung ke ID dari main. tabindex="-1" memungkinkan main menerima fokus tanpa menambahkannya ke urutan tab normal. Ketuk menu atau jalan pintas untuk menavigasi ke bagian tersebut dan pastikan navigasi keyboard berlanjut dari konten utama. Untuk tujuan dan komposisi jalan pintas, silakan merujuk ke W3C teknik jalan pintas teks.

Tetapkan nilai bersama dan lebar konten

Mulailah style.css dengan bagian berikut. Memberi nama variabel warna berdasarkan perannya membuatnya lebih mudah untuk mengubah warna aksen yang sama. border-box menyertakan padding dan border dalam lebar yang ditentukan, menyederhanakan penentuan ukuran. Tetapkan tata letak dasar yang dapat menampung konten yang berkembang alih-alih menetapkan dimensi tetap di mana-mana. Sebelum mengubah nilai bersama, bedakan Variabel CSS: var(), Cakupan, Pewarisan, dan Cadangan.

/* Shared values and base styles */
:root {
  --ink: #183044;
  --accent: #166b92;
  --surface: #eef6fa;
  --line: #c9dbe4;
  --focus: #164f73;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: sans-serif; line-height: 1.6; }
a { color: var(--accent); text-underline-offset: .15em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.container { width: min(100% - 2rem, 68rem); margin-inline: auto; }
.container, .card { overflow-wrap: anywhere; }

Lebar wadah adalah yang lebih kecil dari “lebar yang tersedia dikurangi total 2rem untuk kedua sisi (biasanya 1rem pada setiap sisi)” dan 68rem. Memberikan margin kiri dan kanan untuk layar sempit dan lebar maksimum untuk layar lebar. auto untuk margin-inline memusatkan area. overflow-wrap: anywhere memungkinkan alamat atau pengenal panjang tanpa spasi dipenggal ke baris berikutnya jika diperlukan. Perlu dibuat perbedaan antara praktik yang hanya menambah panjang kalimat umum dan praktik yang menambahkan satu kata panjang.

Jika Anda menyegarkan pada tahap ini, warna, font default, dan lebar konten akan diterapkan, tetapi header dan kartu belum akan diatur secara rinci. Jika tidak ada perubahan sama sekali, periksa jalur file sebelum menambahkan bagian selanjutnya. Konsep ukuran fleksibel dan lebar maksimum terkait dengan Fluid CSS Layouts dengan min, max, dan clamp.

Bangun navigasi Flexbox dan jalur fokus

Tambahkan bagian berikut di bawah Aturan Umum dalam style.css: Penempatan antara nama situs dan menu diatur oleh header-inner, dan jarak di dalam menu diatur oleh nav. Dengan memisahkan celah antara kedua posisi tersebut, Anda dapat mengurangi kemungkinan perubahan jarak yang tidak disengaja antara tautan menu saat mengubah jarak seluruh header. Prinsip dasar arah sumbu dan penempatan item dapat ditemukan di Dasar-dasar Flexbox: Kontainer, Item, dan Sumbu.

/* Navigation and header */
.skip-link { position: absolute; left: 1rem; top: -6rem; padding: .5rem; background: white; }
.skip-link:focus { top: 1rem; z-index: 10; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1.5rem; padding-block: 1rem; }
.site-name { margin: 0; font-weight: 700; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }

flex-wrap menempatkan item pada baris berikutnya jika ruang tidak cukup. Memiliki menu dua baris pada layar sempit bukanlah kegagalan. Kriteria penilaian adalah apakah ada tumpang tindih, terpotong, atau tautan yang tidak dapat diklik. Pertahankan urutan HTML yang bermakna; jangan memakai order hanya untuk membalik tampilan sehingga urutannya bertentangan dengan navigasi keyboard.

Pintasan teks biasanya ditempatkan di luar layar atas dan dibuat terlihat ketika menerima fokus. Menyembunyikannya dengan display:none tidak mencapai tujuan yang sama karena bahkan tidak menerima fokus keyboard. Saat pertama kali menekan Tab, pintasan muncul, tekan Enter, dan pastikan tab berikutnya mengarah ke tautan besar di pengantar. Garis fokus gelap dipilih agar menonjol dari latar belakang putih dan pengantar.

Atur pengantar yang fleksibel dan keadaan tautan

Menambahkan bagian-bagian berikut melengkapi latar belakang pengantar, judul, dan tautan navigasi besar. Fungsi clamp pada ukuran judul menggabungkan batas minimum, nilai fleksibel, dan batas maksimum. Font tidak menjadi tak terbatas lebih besar saat lebar meningkat, dan pengaturan ukuran font, termasuk komponen rem, juga diperhitungkan. Pemeriksaan layar terpisah diperlukan untuk melihat apakah benar-benar mudah dibaca saat pengguna memperbesar.

/* Introduction and navigation link */
.hero { padding-block: clamp(3rem, 8vw, 6rem); background: var(--surface); }
.hero h1 { max-width: 18ch; margin-block: 0 1rem;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height: 1.25; }
.hero p { max-width: 50ch; }
.button { display: inline-block; margin-top: .5rem; padding: .7rem 1rem;
  border-radius: .4rem; background: var(--accent); color: white; text-decoration: none;
  transition: background-color 180ms ease; }
.button:hover { background: #104d6a; }

max-width: 18ch dari heading menggunakan lebar glyph "0" dari font; ini tidak menjamin 18 huruf per baris. line-height mengontrol baris heading yang dibungkus, sementara paragraf pengantar dibatasi hingga 50ch. Contoh ini menggunakan font sans-serif sistem dan tidak mengunduh font eksternal.

Untuk tautan yang lebih besar, gunakan a karena mereka membawa Anda ke bagian pelajaran dari dokumen yang sama. Jika tindakan mengubah keadaan tanpa berpindah halaman atau bagian, pertimbangkan elemen button. Hanya transisi warna latar belakang yang digunakan saat hover, dan tidak diperlukan gerakan dekoratif atau pembesaran. Status fokus dapat dikonfirmasi dengan outline umum.

Bangun kartu Grid yang dapat menampung konten

Tambahkan bagian berikut untuk melengkapi kartu kursus dan footer Anda. Hapus margin dan bullet default dari daftar, tetapi biarkan struktur ul dan li di HTML. Jika daftar dengan list-style: none berada di luar nav, mungkin tidak akan dikenali sebagai daftar di pohon aksesibilitas Safari. Dalam contoh, ul menentukan role="list" untuk menentukan peran daftar. Kondisi ini juga dapat ditemukan dalam daftar MDN deskripsi aksesibilitas. Urutan pembacaan HTML tidak berubah untuk pengaturan baris dan kolom di Grid.

/* Cards and footer */
.lessons { padding-block: 3rem; }
.lessons h2 { margin-block: 0 1.5rem; }
.card-grid { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem; margin: 0; padding: 0; list-style: none; }
.card-grid > li { min-width: 0; }
.card { height: 100%; padding: 1.5rem; border: 1px solid var(--line); border-radius: .5rem; }
.card h3 { margin-block: 0 .75rem; }
.card p { margin-block: 0; }
.site-footer { padding-block: 2rem; border-top: 1px solid var(--line); }
.site-footer p { margin: 0; }

CSS Grid: repeat, auto-fit, auto-fill, dan Areas menjelaskan cara mengulang kolom sesuai ruang yang tersedia, dan minmax() menentukan ukuran minimum dan ukuran yang dapat diperluas dari setiap kolom. Nilai minimum dari min(100%, 16rem) menyebabkan kartu menyusut ke lebar tersebut ketika induknya lebih sempit dari 16rem. Ruang kosong dibagi oleh 1fr, dan karena ada tiga kartu sebenarnya, menjadi lebih lebar tidak membuat kartu keempat. Lihat MDN fungsi repeat dan fungsi minmax.

Dalam kondisi ukuran teks tingkat atas adalah 16px dan lebar halaman yang tersedia sama dengan lebar viewport, lebar minimum kartu adalah 256px, jaraknya 16px, dan total margin kiri dan kanan adalah 32px. Anda membutuhkan setidaknya 560px ruang untuk dua kolom dan 832px untuk tiga kolom. Karena lebar scrollbar, lebar induk, dan ukuran font dapat berubah, lebar transisi nyata juga berubah, jadi jangan menghafalnya berdasarkan nama perangkat.

Tinggi kartu 100% adalah nilai yang mengisi tinggi item daftar pada baris yang sama. Ini bukan tinggi piksel tetap, sehingga baris dapat berkembang seiring bertambahnya deskripsi. Untuk mencegah kata-kata panjang memaksa keluar ukuran item Grid, atur min-width li ke 0 dan gunakan aturan pembungkusan baris kartu.

Tambahkan kondisi layar lebar dan gerakan berkurang

Tambahkan bagian ini di akhir style.css. Pada lebar setidaknya 64rem, latar belakang pengantar berubah menjadi gradasi. Grid tetap menentukan jumlah kolom kartu secara independen; media query ini tidak menentukan jumlah tersebut.

/* Conditional adjustments */
@media (min-width: 64rem) {
  .hero { background: linear-gradient(100deg, var(--surface), #fff); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}

Dalam kondisi gerakan berkurang, kami mengubah pengguliran menjadi pergerakan instan dan juga menghilangkan transisi warna latar belakang. Tujuan tautan, navigasi, fokus, dan kontennya tetap dipertahankan. Warna hover tetap berubah, tetapi langsung tanpa transisi. Penerapan aturan bersyarat terhubung ke Media Query CSS dan Breakpoint Berdasarkan Konten, dan pemeriksaan gerakan serta aksesibilitas terhubung ke Memeriksa CSS Responsif: Lebar, Zoom, dan Navigasi Keyboard.

Jalankan seluruh stylesheet

Ini adalah file yang menggabungkan semua aturan yang ditambahkan secara bertahap. Gunakan seluruh file ini untuk memeriksa urutan kode Anda atau mulai dari awal. Setelah menyimpannya di folder yang sama dengan index.html, buka index.html dengan browser dan segarkan.

/* Shared values and base styles */
:root {
  --ink: #183044;
  --accent: #166b92;
  --surface: #eef6fa;
  --line: #c9dbe4;
  --focus: #164f73;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: sans-serif; line-height: 1.6; }
a { color: var(--accent); text-underline-offset: .15em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.container { width: min(100% - 2rem, 68rem); margin-inline: auto; }
.container, .card { overflow-wrap: anywhere; }

/* Navigation and header */
.skip-link { position: absolute; left: 1rem; top: -6rem; padding: .5rem; background: white; }
.skip-link:focus { top: 1rem; z-index: 10; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1.5rem; padding-block: 1rem; }
.site-name { margin: 0; font-weight: 700; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Introduction and navigation link */
.hero { padding-block: clamp(3rem, 8vw, 6rem); background: var(--surface); }
.hero h1 { max-width: 18ch; margin-block: 0 1rem;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height: 1.25; }
.hero p { max-width: 50ch; }
.button { display: inline-block; margin-top: .5rem; padding: .7rem 1rem;
  border-radius: .4rem; background: var(--accent); color: white; text-decoration: none;
  transition: background-color 180ms ease; }
.button:hover { background: #104d6a; }

/* Cards and footer */
.lessons { padding-block: 3rem; }
.lessons h2 { margin-block: 0 1.5rem; }
.card-grid { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem; margin: 0; padding: 0; list-style: none; }
.card-grid > li { min-width: 0; }
.card { height: 100%; padding: 1.5rem; border: 1px solid var(--line); border-radius: .5rem; }
.card h3 { margin-block: 0 .75rem; }
.card p { margin-block: 0; }
.site-footer { padding-block: 2rem; border-top: 1px solid var(--line); }
.site-footer p { margin: 0; }

/* Conditional adjustments */
@media (min-width: 64rem) {
  .hero { background: linear-gradient(100deg, var(--surface), #fff); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}

Ubah nilai dan diagnosa masalah

1. Kurangi lebar layar sekitar 390px dan kemudian perlebar, sambil mempertahankan nilai asli. Untuk lebar kecil seharusnya ada satu kolom, untuk lebar besar seharusnya ada dua atau tiga kolom. Jika kondisi yang dijelaskan di atas sama, perbedaan antara 559px dan 560px serta 831px dan 832px juga dibandingkan.
2. Ubah hanya 16rem dari card-grid menjadi 20rem. Menambahkan lebih banyak kolom pada layar yang sama membutuhkan lebih banyak ruang. Setelah konfirmasi, kembalikan ke 16rem.
3. Ubah hanya 68rem dari container menjadi 50rem. Bahkan di layar yang lebih besar, lebar konten keseluruhan menjadi lebih sempit. Setelah konfirmasi, kembalikan ke 68rem.
4. Ubah hanya variabel --accent menjadi warna lain yang cukup gelap. Lihat apakah latar belakang tautan dan tombol berubah bersama dan kembalikan ke warna aslinya. Teks tombol putih dan indikator fokus juga harus dapat dibaca pada latar belakang baru.
5. Perluas deskripsi kartu menjadi beberapa kalimat. Pastikan kontennya tidak terpotong saat tinggi bertambah dan bahwa tinggi kartu dalam baris yang sama tertata. Setelah berlatih, kembalikan kalimat asli.
6. Masukkan string bahasa Inggris tanpa spasi ke dalam kartu. Dengan overflow-wrap: anywhere, string dapat dipenggal agar muat di dalam kartu. Hanya dengan sementara menghapus aturan pemisah baris itu dapat menyebabkan konten meluap. Setelah perbandingan, baik aturan maupun kalimat dikembalikan.
7. Pindah dengan Tab dan Shift+Tab dan tekan Enter untuk setiap tautan. Anda seharusnya dapat menavigasi ke pengantar dan topik studi tanpa perlu menggunakan mouse.
8. Reproduksi kondisi pengurangan gerakan. Navigasi melalui tautan harus tetap berfungsi dan pengguliran/transisi yang halus harus hilang. Setelah konfirmasi, kembalikan pengaturan reproduksi ke default.

Periksa bahwa navigasi, kartu, indikator fokus, dan paragraf tetap dapat dibaca ketika browser di-zoom atau pengaturan font berubah. Memperbesar ukuran font html secara sementara di DevTools menguji ukuran berbasis rem, tetapi berbeda dari zoom browser. Satu kondisi pengujian yang berhasil belum menjamin kegunaan di setiap kondisi zoom dan ukuran teks.

Pilih elemen bermasalah di Developer Tools untuk melihat lebar terhitung yang sebenarnya, selector, dan kolom Grid. Alih-alih menutupi masalah dengan memaksa semua pemisah baris atau menambahkan overflow:hidden pada body, perbaiki terlebih dahulu ukuran dan konten dari elemen yang meluap. Dengan memeriksa state dasar, state perubahan, dan state pemulihan untuk setiap kebutuhan, Anda bisa melangkah lebih jauh daripada hanya menyalin kode yang sudah jadi dan menerapkannya ke konten lain juga.