HTML & CSS Local Environment Setup (Windows)

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

Secara umum, membuat dan menguji situs web sepenuhnya menggunakan komputer sendiri disebut dengan pengembangan lokal. Konfigurasi yang diperlukan ini disebut dengan konfigurasi lingkungan lokal. Setelah mengonfigurasikan lingkungan pengembangan lokal, Anda dapat mulai membuat situs web sendiri dengan HTML & CSS kapan dan di mana saja (bahkan tanpa koneksi internet).

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. Editor Teks

Dua alat paling mendasar dalam mengembangkan situs web adalah editor teks dan browser. Kita akan mulai dengan memilih dan menyiapkan editor teks. Editor teks (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 banyak sekali editor yang tersedia. Di sini kita akan menggunakan Atom, editor gratis yang digunakan oleh banyak orang, mulai dari pengembang pemula hingga yang sudah profesional.
(Jika Anda sudah menginstal Atom, kita bisa melanjutkan ke halaman berikutnya)

Untuk menginstalnya, unduh Atom dari situs resminya di https://atom.io/ Situs resmi Atom

Setelah diinstal, buka Atom! Setelah file diklik, sebuah ikon bundar berwarna hijau akan muncul, seperti gambar berikut: 

Periksa

Apakah Anda dapat menginstal dan membuka Atom di komputer?

Selesai?

2. Konfigurasi 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 kode 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 Atom, 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 Atom 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.

Lalu buka folder ini menggunakan Atom. Pertama, buka Atom yang baru saja kita instal, di bawah ini, klik File di sebelah kiri dan klik Open Folder, lalu buka folder yang baru saja kita buat.

Kini gunakanlah Atom 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 Atom?

Selesai?

4. Membuat File HTML

Pertama, ayo kita buat file untuk menulis HTML. Klik kanan pada html_lesson di bar samping pada Atom (seperti yang ditunjukkan gambar) lalu klik New File di menu.

Sebuah formulir akan muncul di tengah layar. Ketik index.html, lalu tekan tombol Enter untuk membuat filenya. 

Setelahnya, file HTML sudah berhasil dibuat. File index.html akan ditampilkan di bar samping sebelah kiri. 

Jika Anda membuat file dengan nama yang salah, Anda dapat mengubahnya dengan mudah. Cukup klik kanan pada file di bar samping, dan pilih Rename untuk mengubah namanya. Ayo mulai menulis code dalam HTML di file index.html, salin & tempelkan code di bawah ini:

  
    
    
  
  
    

How to Make a Website with HTML & CSS on your Computer

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 titik biru di belakang nama file. Seperti gambar (kiri) di bawah ini, jika titik biru terlihat, artinya file belum disimpan. Namun di sebelah kanan, setelah Anda menyimpan file, tombol biru akan menghilang.

Jika belum terbiasa mengerjakan coding, umumnya orang lupa menyimpan file. Sering-seringlah menyimpannya!
Sekarang periksa hasilnya di browser Anda. Pada desktop, buka folder html_lesson, klik kanan pada file index.html dan pilih Google Chrome di menu Open With.

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 Atom, tambahkan code ini di bawah tag 

 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 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 memberi gaya pada HTML yang baru saja kita buat dengan code CSS.
Buat file baru, seperti ketika Anda membuat index.html, yaitu dengan mengeklik kanan folder html_lesson di bar samping, lalu memilih New File. Namai file stylesheet.css menggunakan formulir lalu tekan tombol Enter untuk mengonfirmasinya.
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  dalam index.html.

• 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

Periksa

Apakah situs web Anda terlihat seperti gambar di atas?

Selesai?

Sudah selesai! Anda sudah melakukan semua hal yang diperlukan untuk mulai membuat situs web dengan HTML & CSS di komputer sendiri! Proses ini terkadang disebut "konfigurasi pengembangan lokal." Kini Anda dapat mencoba mempraktikkan apa yang sudah Anda pelajari di Progate pada situs web sendiri!

from : https://progate.com/docs/html-env-win