Hal Mendasar Tutorial Web Pemula, Ini mungkin terlihat jelas, tetapi saya akan tetap mengatakannya: Pada intinya, pengembangan web adalah tentang membangun situs web. Situs web dapat berupa situs satu halaman yang sederhana, atau bisa juga aplikasi web yang sangat rumit. Jika Anda dapat melihatnya di web dalam browser, itu ada hubungannya dengan pengembangan web.

Berikut ini penjelasan sederhana tentang cara kerja situs web di internet:

1. Situs web pada dasarnya adalah sekelompok file yang disimpan di komputer yang disebut server.
2. Server adalah komputer yang digunakan untuk meng-host situs web, yang berarti bahwa mereka menyimpan file situs web. Server ini terhubung ke jaringan raksasa yang disebut World Wide Web (untuk menggunakan istilah 90-an), atau Internet.
3. Browser adalah program yang Anda jalankan di komputer Anda. Mereka memuat file situs web melalui koneksi internet Anda. Komputer Anda juga dikenal sebagai klien, yang terhubung ke server.

3 komponen yang membentuk setiap situs web

Seperti yang disebutkan di atas, situs web terdiri dari file, terutama file HTML, CSS, dan JavaScript.

Mari kita lihat lebih dekat masing-masing:

1. HTML atau HyperText Markup Language

HTML adalah dasar dari semua situs web. Ini adalah jenis file utama yang dimuat di browser Anda saat Anda melihat situs web.

Anda benar-benar dapat membuat situs web yang sangat sangat dasar hanya menggunakan HTML dan tidak ada jenis file lainnya.

Ini tidak akan terlihat sangat menarik, tetapi itu adalah minimum yang Anda butuhkan untuk situs web untuk menjadi situs web.

2. CSS atau Cascading Style Sheets

Tanpa CSS, situs web akan terlihat secara estetis sebagai dokumen Word.

Dengan CSS, Anda dapat menambahkan warna dari semua jenis, font yang menarik, dan tata letak situs web dengan cara apa pun yang Anda inginkan.

Anda bahkan dapat menambahkan animasi dan menggambar bentuk menggunakan CSS yang lebih canggih.

3. JavaScript

JavaScript adalah bahasa pemrograman yang memungkinkan Anda berinteraksi dengan elemen di situs web dan memanipulasinya.

Sementara CSS menambahkan gaya ke HTML, JavaScript menambah interaktivitas dan membuat situs web lebih dinamis.

Misalnya, Anda dapat menggunakan JavaScript untuk menggulir ke bagian atas halaman saat Anda mengklik tombol, atau untuk membuat slideshow dengan tombol untuk menavigasi gambar.

Untuk bekerja dengan file HTML, CSS, dan JavaScript, Anda harus menggunakan program di komputer Anda yang disebut editor kode.

Yang membawa kita ke titik berikutnya:

Editor kode mana yang harus Anda gunakan?

Ini adalah pertanyaan yang sangat umum, terutama jika Anda baru memulai Hal Mendasar Tutorial Web Pemula.

Editor kode terbaik untuk Anda akan sangat bergantung pada jenis kode yang Anda tulis.

Jika Anda melakukan terutama HTML, CSS, dan JavaScript, Anda dapat menulis kode di Windows Notepad atau TextEdit untuk Mac jika Anda menginginkannya.

Tapi apa kesenangannya?

Program editor kode seperti Sublime atau VS Code hadir dengan banyak fitur yang memudahkan pengkodean.

Mereka memungkinkan Anda untuk memasukkan beberapa baris teks ke kanan atau kiri, dan dapat menyorot teks dengan cara yang berbeda tergantung pada bahasa apa file itu berada.

Untuk bahasa back-end (kita akan membahasnya di bagian selanjutnya) Anda memerlukan editor kode yang lebih kuat yang disebut IDE (Integrated Development Environment). IDE memiliki fitur yang memungkinkan Anda untuk mendebug dan mengkompilasi (memproses) kode Anda.

Berikut adalah beberapa editor kode populer:

• Visual Studio Code: Versi ringan dari Visual Studio ini, IDE utama Microsoft, baru berumur beberapa tahun tetapi sangat populer, karena kecepatannya, kemudahan penggunaan, dan fitur-fitur canggih. VS Code adalah editor pilihan pribadi saya, jadi saya mungkin agak bias.
• Atom: Dibuat oleh GitHub dan diiklankan sebagai “editor teks yang dapat diretas”, Atom adalah editor yang sangat dicintai. Salah satu kekuatan utamanya adalah customizability-nya. Anda dapat menginstal paket dan tema yang akan menambah fitur ke program.
• Sublime: Program yang sangat populer yang telah ada selama beberapa waktu. Seperti Atom, Anda dapat menginstal paket dan tema, dan juga memiliki kinerja yang cepat. Tidak seperti dua editor lainnya, lisensi Sublime berharga $ 70 (tetapi gratis untuk dicoba).

  Saya menyarankan Anda untuk mencoba beberapa atau semua editor ini, untuk kepentingan perbandingan. Kemudian pilih satu dan tempel, pelajari fitur dan tombol pintasannya.

Kontrol versi

Sekarang Anda memiliki editor kode Anda, dan Anda mulai menulis kode. Namun apa yang terjadi jika Anda membuat kesalahan dalam kode Anda, dan Anda harus membatalkan semua perubahan kode Anda sebelum kesalahan itu terjadi?

Dan menekan Ctrl-Z untuk membatalkan jutaan kali tidak berhasil untuk Anda. Apa yang kamu kerjakan?

Jawabannya, adalah kontrol versi!

Kontrol versi seperti menyimpan poin untuk file kode Anda.

Jika Anda berpikir Anda mungkin akan membuat beberapa perubahan kode yang dapat merusak segalanya, Anda dapat membuat titik simpan baru (disebut komit).

Kemudian jika Anda merusak situs web Anda, Anda dapat mengembalikan kode Anda ke keadaan sebelumnya.

Ini bisa menjadi penyelamat hidup jika Anda pernah membuat kesalahan yang sangat perlu Anda batalkan.

Kontrol versi terdengar bagus! Bagaimana cara kerjanya?

Menggunakan sistem kontrol versi (VCS) melibatkan penyimpanan file kode Anda dan seluruh riwayat perubahan dalam apa yang disebut repositori.

Biasanya Anda akan menggunakan satu repositori per situs web atau proyek.

Kemudian Anda menyimpan repositori Anda secara online di tempat yang dikenal sebagai repositori pusat, dan juga menyimpan sebuah versi di komputer Anda di repositori lokal.

Ketika Anda membuat perubahan pada komputer Anda, Anda dapat membuat commit dan kemudian mendorongnya ke repositori pusat.

Proses ini memungkinkan Anda memiliki beberapa orang yang bekerja pada kumpulan kode yang sama, bahkan mengubah file yang sama.

Git adalah VCS paling populer saat ini

Sistem kontrol versi utama saat ini adalah Git. Pesaing utamanya adalah Subversion (SVN), sistem yang lebih lama.

Tetapi sebagian besar coding bootcamps dan tutorial akan menggunakan Git, jadi itulah yang saya sarankan agar Anda pelajari.

Sekarang, saat kami mulai menjelaskan bahasa dan kerangka kerja aktual yang digunakan, kami akan menggunakan istilah yang mungkin Anda temui: front end dan back end.

Bagian depan adalah tentang bagaimana situs web terlihat, secara visual.

Ujung depan (atau sisi-klien) mengacu pada apa yang dimuat oleh peramban pengguna, juga disebut klien.

Ini akan menjadi HTML dan CSS yang kita mulai bicarakan. JavaScript pada mulanya hanya bahasa front-end, tetapi saat ini Anda dapat menggunakan JavaScript sebagai bahasa sisi server Anda, atau back-end, juga.

Pekerjaan front-end sangat berkaitan dengan membuat situs web terlihat bagus.

Selain itu, juga melibatkan pembuatan situs yang berperilaku dengan cara yang masuk akal bagi pengguna (juga disebut UX atau pengalaman pengguna).

Jika Anda menikmati tweaking CSS Anda untuk memastikan situs tersebut sempurna, dan menambahkan animasi JavaScript halus yang membantu pengguna, maka Anda mungkin akan menikmati pengembangan front-end.

Bagian belakang adalah tentang fungsi dan memastikan semuanya berfungsi.

Sementara ujung depan adalah tentang penampilan dan perilaku visual dari situs web, bagian belakang adalah tentang mendapatkan segalanya untuk bekerja di belakang layar.

Jika Anda bekerja dalam pengembangan back-end, Anda akan melakukan tugas seperti menangani permintaan ke server dan basis data.

Beberapa contoh pekerjaan back-end akan menyimpan data ketika seseorang mengisi formulir di halaman kontak, atau mengambil data untuk menampilkan posting blog dalam kategori tertentu yang diminta oleh pengguna.

Pekerjaan back-end juga dapat melibatkan pengaturan situs web di server, penanganan penanganan, dan pengaturan database SQL.

Jika gagasan menyiapkan semua bagian fungsional dari situs web kedengarannya menyenangkan bagi Anda, Anda dapat menikmati pekerjaan back-end!

Menempatkan kedua sisi bersama

Nama front-end dan back-end muncul karena front-end adalah apa yang bisa Anda lihat di browser Anda.

Dan bagian belakang adalah bagian yang tidak dapat Anda lihat, tetapi menangani banyak pengangkatan dan fungsi berat yang membantu front-end.

Anda dapat berpikir tentang front-end sebagai etalase bisnis, satu-satunya bagian yang akan dilihat sebagian besar pelanggan. Bagian belakangnya seperti pusat manufaktur, distribusi, dan operasi yang membantu toko berjalan.

Keduanya berfungsi terpisah yang sama pentingnya.

Front end, back end, atau tumpukan penuh?
Dalam pengembangan web, Anda dapat fokus hanya pada bagian depan, atau hanya bagian belakang. Atau Anda dapat menangani keduanya, yang disebut pengembangan stack penuh.

Apa yang Anda pilih untuk fokus pada terutama harus bergantung pada dua hal:

1. Preferensi pribadi Anda: Tidak semua orang menyukai bagian depan dan belakang.
2. Ketersediaan pekerjaan: Jelajahi daftar pekerjaan lokal Anda dan terlibat dengan pertemuan pengkodean lokal untuk mengetahui jenis pekerjaan apa yang ada.

Perlu disebutkan bahwa jika Anda menikmati bagian depan dan belakang, menjadi pengembang tumpukan penuh akan membuat Anda lebih berharga.

Masuk akal – semakin banyak teknologi yang dapat Anda kerjakan, semakin banyak tugas yang dapat Anda lakukan.

Stack Overflow dilaporkan dalam survei pengguna 2017 mereka yang 63,7% diidentifikasi sebagai full-stack, 24,4% sebagai back-end, dan 11,9% sebagai pengembang front-end.

Namun sekali lagi, ini akan sangat bergantung pada perusahaan. Beberapa perusahaan mungkin menggunakan pengembang tumpukan penuh, di mana yang lain membelah bagian belakang dan depan.

Beberapa juga memiliki pengembang front-end yang menjadi desain, di mana pengembang akan mendesain dan membangun ujung depan aplikasi. Itulah sedikit mengenai Hal Mendasar Tutorial Web Pemula. Bersambung ke Bagian 2: Membuat keterampilan front-end Anda bersinar.