Beginner · Level 3: CSS Fundamentals and LayoutBeginner35 menitBahasa Indonesia

Membuka Project di Code Editor

Pelajari cara membuka folder project dan mengedit file website statis di code editor.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Memahami kenapa folder project dibuka sebagai satu workspace
Membuka index.html dan style.css di code editor
Menghubungkan CSS ke HTML dengan link tag
Melakukan edit kecil dan menyimpan file

Code EditorLocal WorkflowHTMLCSS

Isi lesson

7 blok

1.
Buka folder, bukan hanya satu fileBelum selesaiWajib
2.
Resource code editorBelum selesaiOpsional
3.
HTML awalBelum selesaiWajib
4.
CSS awalBelum selesaiWajib
5.
Checklist local taskBelum selesaiWajib
6.
Style tidak munculBelum selesaiOpsional
7.
RingkasanBelum selesaiWajib

Buka folder, bukan hanya satu file

Wajib

Code editor membantu kamu melihat seluruh isi folder project. Di beginner path ini, contoh akan memakai Visual Studio Code karena umum dipakai dan ramah untuk project web kecil.

Code editor lain tetap boleh dipakai kalau kamu sudah nyaman, tetapi VS Code direkomendasikan agar langkah-langkah di lesson lebih mudah diikuti.

Membuka folder lebih nyaman daripada membuka index.html dan style.css satu per satu, karena kamu bisa berpindah file dengan jelas dan melihat apakah file berada di lokasi yang benar.

Di lesson ini, kamu akan menghubungkan HTML ke CSS. Kalau hubungan ini benar, perubahan di style.css akan terlihat saat index.html dibuka di browser.

Bagian ini memengaruhi progres lesson.

Resource resmi

Opsional

Resource code editor

Gunakan link resmi ini jika kamu belum punya code editor. VS Code direkomendasikan untuk mengikuti beginner path ini.

Visual Studio CodeDirekomendasikan

Download Visual Studio Code

Install VS Code untuk membuka folder project, mengedit index.html, dan mengedit style.css.

Download VS Code

Opsional, tidak menghambat penyelesaian lesson.

HTML awal

Wajib

html

<!doctype html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Website Statis Pertamaku</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="card">
      <h1>Website Statis Pertamaku</h1>
      <p>Ini project lokal pertama saya.</p>
    </main>
  </body>
</html>

Baris link rel="stylesheet" menghubungkan index.html ke style.css. Karena kedua file berada di folder yang sama, href cukup berisi style.css.

Bagian ini memengaruhi progres lesson.

CSS awal

Wajib

css

.card {
  max-width: 640px;
  padding: 24px;
  border: 1px solid #d4d4d8;
  box-sizing: border-box;
}

CSS ini memberi batas lebar, ruang dalam, border, dan box-sizing pada elemen dengan class card.

Bagian ini memengaruhi progres lesson.

Checklist local task

Wajib

Kerjakan di perangkat kamu:

Install atau buka code editor. Untuk path ini, VS Code direkomendasikan.
Buka folder project sebagai folder/workspace, bukan hanya satu file.
Isi index.html dengan struktur HTML dasar.
Tambahkan link ke style.css di dalam head.
Tambahkan style sederhana di style.css.
Simpan kedua file.

Kalau style belum terlihat nanti di browser, cek nama file, lokasi file, dan nilai href pada link stylesheet.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Opsional

Style tidak muncul

Masalah yang sering terjadi: file CSS belum disimpan, nama file berbeda, atau href tidak cocok dengan lokasi style.css. Untuk project ini, index.html dan style.css sebaiknya berada di folder yang sama dulu.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

Buka folder project sebagai workspace di code editor.
index.html menyimpan struktur halaman.
style.css menyimpan tampilan halaman.
link rel="stylesheet" menghubungkan HTML ke CSS.
Berikutnya kamu akan menjalankan index.html di browser.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Buka folder, bukan hanya satu file.

Memuat progres Review module