Persiapan HTML & CSS di Local

Environment(Windows)

Dalam artikel ini, Anda akan belajar cara membuat situs web menggunakan
HTML & CSS di komputer Anda sendiri, bukan di browser dengan Progate.

Pada umumnya, disebut local development ketika membuat dan melakukan

test sebuah website hanya menggunakan komputer milik Anda sendiri.
Persiapan yang diperlukan untuk itu disebut local environment setup.
Setelah Anda selesai mempersiapkan local development environment milik
Anda, Anda pun bisa mulai mengerjakan pembuatan website Anda dengan
HTML & CSS kapan pun dan di mana pun (bahkan tanpa sebuah koneksi
internet sekalipun)

Yang Anda perlukan:

• Sebuah komputer

• Keterampilan HTML & CSS dasar

(Menyelesaikan pelajaran HTML & CSS Study I di Progate juga sudah cukup)
Artikel ini ditujukan bagi pengguna Windows. Jika Anda menggunakan Mac,
silakan baca artikel ini.

1. Text Editor
Dua alat paling mendasar dalam mengembangkan situs web adalah text
editor dan browser. Kita akan mulai dengan memilih dan menyiapkan text
editor. Text editor (atau biasanya disebut "editor" saja) adalah tempat
serupa jendela di setiap pelajaran Progate untuk menulis kode. Anda
memerlukan editor untuk melakukan pemrograman apa pun, tidak hanya
HTML & CSS.

Layar pelajaran Progate

Ada berbagai macam editor yang dapat kamu gunakan. Di sini kita akan
menggunakan Visual Studio Code(VSCode), editor gratis yang digunakan
oleh banyak orang mulai dari developer pemula hingga profesional.
(Jika kamu sudah menginstal VSCode, kamu dapat melanjutkan ke halaman
berikutnya.)
Untuk menginstal VSCode, unduh dari situs resmi mereka di
(https://code.visualstudio.com/).

Situs Resmi VSCode

Setelah diinstal, buka VSCode! Saat selesai, tampilan akan seperti ini:
 Periksa

Apakah Anda dapat menginstal dan membuka VSCode di komputer?

Selesai

2. Persiapan Browser
Selanjutnya, kita akan menyiapkan browser. Browser digunakan untuk
menampilkan dan menayangkan situs web, seperti yang (kemungkinan
besar) Anda gunakan untuk membaca artikel ini. Dalam pelajaran Progate,
Anda dapat melihat jendela di sisi kanan yang menampilkan hasil code
HTML & CSS Anda untuk ditinjau benar atau salahnya.

Layar pelajaran Progate

Di Windows, Internet Explorer atau Microsoft Edge mungkin diatur sebagai
browser web default. Browser ini sudah bagus, tetapi untuk artikel ini, kita
akan menginstal dan menggunakan Google Chrome. Jika belum, ayo kita
instal sekarang! Buka halaman resmi Chrome
(https://www.google.com/chrome/), lalu klik tombol unduh untuk
mengunduh Chrome.

Halaman Google Chrome resmi

Sama halnya dengan penginstalan VSCode, buka file setelah pengunduhan
selesai, lalu selesaikan langkah-langkah terakhir penginstalan. Lalu Anda
dapat membuka browser seperti pada gambar berikut.

Kini, Anda sudah memiliki semua alat yang diperlukan untuk membuat situs
web!

Periksa

Apakah Anda dapat menginstal dan membuka Google Chrome di komputer?

Selesai

3. Folder Kerja Anda

Mulai dari sini, ayo kita buat situs web asli menggunakan VSCode dan
Chrome. Pertama, kita perlu menyiapkan folder tempat file HTML dan CSS.
Seperti pada gambar di bawah, klik kanan pada desktop dan klik New >
Folder untuk membuat folder baru.

Kita namakan foldernya html_lesson.

Mari buka folder dalam VSCode dengan mengklik tombol Open Folder...
seperti yang tampak pada gambar dibawah ini:
Setelah membuka folder tersebut, Anda seharusnya dapat melihat hal-hal
seperti pada gambar dibawah ini.

Kini gunakanlah VSCode untuk membuka folder html_lesson. Lalu, coba kita
pelajari cara membuat file HTML dan CSS untuk membuat situs web.

Periksa

Apakah Anda membuka folder html_lesson di VSCode?

Selesai

4. Membuat File HTML

Pertama-tama, mari kita buat sebuah file menuliskan HTML. Klik ikon untuk
membuat file baru pada tab folder dalam sidebar seperti ditampakkan dalam
gambar VSCode dibawah ini.

Sebuah field input akan muncul agar Anda dapat menuliskan nama file .
Namai file ini dengan index.html lalu tekan Enter.
Sekarang, kamu sudah membuat file HTML. File index.html akan muncul di
sidebar kiri.

Jika Anda membuat file dengan nama yang salah, Anda dapat mengubahnya
dengan mudah. Cukup klik kanan pada file di sidebar, dan pilih Rename
untuk mengubah namanya.
Ayo mulai menulis code dalam HTML di file index.html, salin & tempelkan
code di bawah ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progate</title>
</head>
<body>
<h1 class="title">How to Make a Website with HTML & CSS on
your Computer</h1>
</body>
</html>
Progate menyimpan code yang Anda tulis secara otomatis, tapi ketika Anda
menggunakan editor di komputer sendiri, Anda bisa menyimpan file dengan
menekan tombol Ctrl bersamaan dengan tombol S (Ctrl + S).
Anda dapat memeriksa status tersimpan atau tidak dengan memeriksa
tanda titik di belakang nama file. Seperti gambar (kiri) di bawah ini, jika
tanda titik terlihat, artinya file belum disimpan. Namun di sebelah kanan,
setelah Anda menyimpan file, tanda titik akan menghilang.

Jika belum terbiasa mengerjakan coding, umumnya orang lupa menyimpan

file. Sering-seringlah menyimpannya!
Sekarang periksa hasilnya di browser Anda.
Kita terlebih dulu harus mendapatkan lokasi file-nya agar bisa dibuka
melalui browser. Pada VSCode, klik-kanan pada file index.html dan klik Copy
Path untuk mendapatkan lokasi file tersebut.

Buka browser Google Chrome, lalu path yang sudah sebelumnya ter-copy di
paste-kan kedalam address bar dan tekan Enter . Lokasi file bisa saja
bervariasi selain /html_lesson/index.html tergantung dimana Anda
menyimpan sebelumnya.
Apakah browser Chrome menampilkan halaman seperti yang di bawah ini?
Ini adalah tampilan file index.html di browser:

Coba edit file index.html. Kembali buka VSCode, tambahkan code ini di
bawah tag <h1> dalam file index.html:
<p>In this article you will learn to make a website with HTML
& CSS on your own computer instead of making it in the browser
with Progate.</p>

Setelah menambahkan code di atas, tekan Ctrl + S untuk menyimpan file.

Lalu, periksa hasilnya di browser Chrome. Buka halaman yang baru saja kita
buat, klik tombol muat ulang di kiri atas, lalu muat ulang halaman tersebut.
Jika Anda berhasil menyimpan file index.html, halaman yang sudah
diperbarui akan terlihat seperti gambar di bawah:

Periksa

Apakah halaman Anda terlihat seperti gambar di atas?

Selesai

5. Membuat File CSS

Selanjutnya, kita akan membuat file CSS untuk menyesuaikan HTML yang
kita buat dengan code CSS.
Buatlah file baru, seperti ketika membuat index.html , dengan mengklik ikon
file baru pada tab folder html_lesson dalam sidebar. Namai file tersebut
dengan stylesheet.css dan tekan Enter.
Tempelkan code di bawah ini ke file, lalu gunakan ⌘ + S untuk
menyimpannya.
.title {
color: #02ccba;
}

Dengan ini, kita berhasil membuat file CSS. Untuk menautkan stylesheet.css
dengan index.html, tambahkan code di bawah ke tag <head> dalam
index.html.
<link rel="stylesheet" href="stylesheet.css">

• Lupa cara menautkan CSS ke HTML

• Tidak tahu tempat untuk menuliskan code
Jika Anda mengalami masalah ini, periksa slide di bawah ini untuk
meninjaunya: HTML & CSS Study I "Struktur HTML (2)
Sekarang kita periksa lagi hasilnya. Sama seperti sebelumnya, muat ulang
halaman yang menampilkan dile HTML Anda di Chrome.

Seperti pada gambar di atas, jika warna teks header berubah hijau, artinya
file CSS berhasil dikaitkan dan dapat digunakan. Namun jika warna teks
header masih hitam, ada beberapa hal yang bisa menyebabkan hal ini.
Periksa semua hal ini untuk memperbaiki masalahnya:
• Nama stylesheet.css salah
• Tempat pembuatan file salah (seharusnya diletakkan di file html_lesson)
• Kesalahan code dalam index.html or stylesheet.css