Persiapan HTML & CSS di Local Environment

Dalam artikel ini, kita akan belajar cara membuat website dengan HTML & CSS di komputermu sendiri, bukan di dalam browser menggunakan Progate.

Umumnya, jika kamu membuat dan menge-tes website hanya menggunakan komputermu sendiri, aktivitas itu disebut dengan local development. Persiapan yang diperlukan disebut persiapan environment local. Setelah menyiapkan environment local development, kamu dapat memulai pembuatan situs webmu sendiri dengan HTML & CSS di mana saja dan kapan saja (bahkan tanpa koneksi internet).

Yang diperlukan:

• Komputer
• Keterampilan HTML & CSS dasar
  (Menyelesaikan pelajaran Progate HTML & CSS Study I sudah cukup)

Artikel ini ditujukan bagi pengguna Mac. Jika kamu menggunakan Windows, bacalah artikel ini.

1. Text Editor

Dua tool paling penting untuk mengembangkan website adalah text editor dan browser. Kita akan mulai dengan memilih dan menyiapkan text editor. Text editor (atau cukup "editor") adalah jendela di pusat setiap pelajaran Progate di mana kamu menuliskan code. Kamu memerlukan editor untuk melakukan pemrograman apa pun, bukan hanya HTML & CSS.

Layar pelajaran Progate

Ada berbagai macam editor yang dapat kamu gunakan. Di sini kita akan menggunakan Atom, editor gratis yang digunakan oleh banyak orang mulai dari developer pemula hingga profesional.
(Jika kamu sudah menginstal Atom, kamu dapat melanjutkan ke halaman berikutnya.)

Untuk menginstal Atom, unduh dari situs resmi mereka di (https://atom.io/).
Situs Resmi Atom

Periksa file yang diunduh di Finder. 

Setelah mengeklik file, ikon bulat hijau akan muncul seperti gambar di bawah ini: 

Klik dua kali ikon ini untuk membuka Atom. Mungkin akan memerlukan waktu saat pertama kali membukanya. Saat selesai, tampilan akan seperti ini:

Periksa

Apakah kamu berhasil menginstal dan membuka Atom di komputermu?

Selesai

2. Persiapan Browser

Selanjutnya, lakukan persiapan browser. Browser digunakan untuk melihat dan menampilkan website, seperti yang kamu gunakan untuk melihat artikel ini. Dalam pelajaran Progate, ada jendela di sisi kanan untuk menampilkan hasil code HTML & CSS sehingga kamu bisa memeriksanya apakah sudah benar. Layar pelajaran Progate

Safari adalah browser default untuk MacOS atau iPhone. Default browser seperti Safari dapat digunakan, tapi kali ini kita akan menggunakan browser Google Chrome, jadi instal Google Chrome terlebih dulu di halaman resmi Chrome (https://www.google.com/chrome/) , lalu klik tombol unduh biru di bagian tengah layar. Halaman resmi Google Chrome

Seperti yang kita lakukan dengan Atom, setelah download selesai, buka file, dan selesaikan langkah menginstal program. Kemudian, kamu bisa membuka browser seperti gambar di bawah ini. 

Sekarang, kamu memiliki tool yang diperlukan untuk membuat website!

Periksa

Apakah kamu berhasil menginstal dan membuka Google Chrome di komputermu?

Selesai

3. Folder Kerja

Setelah ini, mari buat website asli menggunakan Atom dan Chrome. Pertama, siapkan folder untuk mengumpulkan file HTML & CSS.
Seperti gambar di bawah ini, klik-kanan pada desktop lalu klik New Folder untuk membuat folder baru dengan nama html_lesson. 

Mari buka folder ini dengan Atom. Pertama, buka Atom yang sudah di-instal, seperti video berikut, klik File di sebelah kiri dan klik Open, kemudian buka folder yang baru saja kita buat. 

Sejauh ini, kita sudah menggunakan Atom untuk membuka folder html_lesson. Sekarang, mari mulai belajar cara membuat file HTML & CSS, dan membuat website dengan coding.

Periksa

Apakah kamu sudah buka folder html_lesson di Atom?

Selesai

4. Membuat File HTML

Pertama, buat file untuk menulis HTML. Klik kanan html_lesson di sidebar Atom (seperti di gambar) lalu klik New File pada menu.

Akan muncul formulir di tengah layar. Ketik index.html, dan tekan tombol enter untuk membuat file. 

Sekarang, kamu sudah membuat file HTML. File index.html akan muncul di sidebar kiri. 

Jika kamu membuat file dengan nama yang salah, kamu bisa merubahnya dengan mudah. Cukup klik-kanan pada file di sidebar, lalu pilih Rename untuk mengganti nama.
Lakukan coding dalam HTML pada file index.html, copy & paste code di bawah ini:

  
    
    
  
  
    

How to Make a Website With HTML & CSS in your Computer

Progate akan otomatis menyimpan code setelah ditulis, tapi jika kamu menggunakan editor di komputermu sendiri, tekan Command (⌘) dengan tombol S untuk menyimpan file (⌘ + S).

Kamu bisa memeriksa status yang disimpan melalui titik biru di belakang nama file. Seperti gambar (kiri) di bawah ini, jika terdapat titik biru artinya file belum disimpan, tapi di sebelah kanan, setelah file disimpan, titik biru akan hilang. 

Jika belum terbiasa dengan coding, umumnya kamu akan lupa menyimpan file. Jadi lebih baik sering-sering disimpan. Sekarang, periksa hasilnya di browsermu. Di desktop, buka folder html_lesson, klik-kanan file index.html dan pilih Google Chrome dalam menu Open With.

Apakah kamu melihat halaman seperti di bawah ini di browser Chrome-mu? File index.html seharusnya tampak seperti ini di browser: 

Sekarang, coba edit file index.html. Kembali ke Atom, tambahkan code ini di bawah label 

 dalam file index.html:

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

Setelah menambahkan kode di atas, tekan ⌘ + S untuk menyimpan file. Lalu periksa hasilnya di browser Chrome-mu. Buka halaman yang baru saja dibuat, klik tombol refresh di kiri atas untuk memuat ulang halaman.

Jika file index.html berhasil disimpan, halaman yang diperbarui akan tampak seperti gambar berikut: 

Periksa

Apakah halamanmu tampak seperti gambar halaman 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 saat membuat index.html, klik-kanan folder html_lesson di sidebar, lalu pilih New File. Beri nama file stylesheet.css menggunakan formulir lalu tekan tombol enter untuk mengonfirmasi.
Tempel code di bawah ini ke dalam file, gunakan ⌘ + s untuk menyimpannya.

.title {
  color: #02ccba;
}

Dengan ini, file CSS selesai dibuat. Untuk menautkan stylesheet.css ke index.html, tambahkan code di bawah ini ke label  dalam index.html.

• Lupa cara menautkan CSS ke HTML
• Tidak tahu tempat menulis code
Jika kamu mengalami hal-hal diatas, periksa slide di bawah ini untuk meninjau ulang pelajaran Studi HTML & CSS I "Struktur HTML (2)

Sekarang mari periksa kembali hasilnya. Seperti yang kamu lakukan sebelumnya, muat ulang halaman yang berisikan hasil coding di Chrome.

Seperti gambar di atas, jika warna teks header berubah hijau, artinya file CSS berhasil ditautkan dan berfungsi. Tapi jika warna teks header tetap hitam, ada beberapa kemungkinan penyebabnya.
Periksa semua hal berikut untuk mencoba memperbaiki masalahnya:
• Salah nama stylesheet.css
• File ada di tempat yang salah (seharusnya berada di folder html_lesson )
• Kesalahan dalam code (periksa kedua file: index.html dan stylesheet.css)

Periksa

Apakah tampilan situs webmu sudah seperti gambar website di atas?

Selesai

Selesai! Kamu sudah selesai mempelajari hal-hal yang diperlukan untuk membuat website dengan HTML & CSS di komputermu sendiri! Terkadang proses ini disebut dengan "persiapan local development". Sekarang kamu dapat langsung menggunakan hal yang kamu pelajari di Progate di situs webmu sendiri, selamat mencoba!

Bagikan ke teman-teman Anda!