10 Skill yang Kamu Perlukan untuk Menjadi Front-End Developer

Jika kamu ingin berganti karir atau meningkatkan kemampuanmu di bidang karir yang sekarang,
tech skill adalah hal yang bisa kamu lakukan dengan cepat.

Selain tiga alasan utama seperti bayaran lebih besar, kerja kreatif, dan jadwal yang fleksibel, ada
banyak alasan lain mengapa bekerja di bidang teknologi sangat menarik.

Tapi apa maksudnya bekerja di bidang teknologi? Jika kamu ingin tahu lebih banyak tentang apa
saja bagian dari bidang teknologi, kamu bisa melihatnya di sini.

Sementara itu, artikel ini akan fokus membahas tentang front-end developer. Pekerjaan front-end
developer adalah membangun website menggunakan HTML, CSS, dan JavaScript. Front-end
developer adalah orang-orang yang membuat design dan mengembangkannya sampai sebuah
website dapat berjalan.

Mempelajari front-end development adalah cara yang paling cepat untuk berkarir di bidang
teknologi. Kamu akan mempunyai skill dasar yang spesifik sehingga membuatmu menarik bagi
perusahaan, tetapi skill tersebut juga cukup luas sehingga kamu tetap mempunyai banyak pilihan
pekerjaan. Percayalah, permintaan pekerjaan terhadap front-end developer sangat banyak.

Bagi sebagian orang, hal di atas sudah cukup untuk membuat mereka yakin untuk memulai
belajar coding. Tetapi akan lebih baik jika kamu dapat memvisualisasikan segala hal secara
spesifik sebelum kamu memulai sesuatu. Sebuah gambaran umum tentang skill apa saja yang
kamu butuhkan untuk menjadi seorang front-end developer tentu akan sangat membantu.

Melihat dari kualifikasi yang diinginkan perusahaan dalam iklan lowongan kerja, ada beberapa
skill yang umum disebutkan, diantaranya HTML, CSS, dan JavaScript. Kebanyakan dari kamu
pasti juga sudah tahu ketiga hal tersebut. Tetapi, bagaimana dengan hal-hal lain yang belum
banyak diketahui, seperti version control, platform, atau framework?
Kamu akan terbiasa dengan istilah-istilah di atas saat mulai belajar tech skill. Untuk
memudahkanmu, berikut 10 skill penting yang diperlukan setiap front-end developer.

1. HTML/CSS

Dua hal tersebut selalu ada dalam kualifikasi pekerjaan front-end developer.

Mari lihat dan pahami artinya:

HyperText Markup Language (HTML) adalah bahasa markup standar yang digunakan untuk
membuat halaman web. Bahasa markup adalah sebuah cara untuk membuat notes dalam
dokumen digital. HTML adalah hal paling dasar yang kamu butuhkan untuk mengembangkan
website.

Cascading Style Sheets (CSS) adalah bahasa pemograman yang digunakan untuk
mepresentasikan file HTML yang telah kamu buat. HTML berfungsi membangun fondasi dari
website kamu, sedangkan CSS digunakan untuk mengatur layout website, warna, font, dan
semua style lain.

Kedua bahasa pemograman ini adalah skill dasar yang sangat penting untuk seorang front-end
developer. Singkatnya, tanpa HTML dan CSS, tidak akan ada web development.

2. JavaScript/jQuery

Salah satu tool dasar lain untuk front-end development adalah JavaScript. JavaScript menentukan
fungsi-fungsi yang ada di dalam sebuah website.

Jika kamu hanya ingin membangun website yang sederhana, maka HTML dan CSS sudah cukup.
Tetapi jika kamu membutuhkan fitur interaktif seperti audio, video, game, atau animasi, maka
kamu membutuhkan JavaScript untuk mengimplementasikannya.
Di dalam JavaScript, terdapat library untuk bermacam plug-in dan extension yang dinamakan
dengan jQuery. jQuery membuat penggunaan JavaScript menjadi lebih cepat dan mudah.
Common task yang harus ditulis dalam berbaris-baris kode dalam JavaScript, dapat ditulis hanya
dengan satu baris kode menggunakan jQuery.

3. Framework CSS dan JavaScript

Bukankah CSS dan JavaScript sudah dibahas di atas?

Iya benar, tetapi perlu kamu ketahui bahwa CSS dan JavaScript merupakan sebuah bagian besar
dalam front-end development sehingga akan menjadi dasar dari skill-skill lain yang kamu
perlukan.

Framework dari CSS dan JavaScript adalah koleksi dari file CSS atau JavaScript yang membantu
kamu melakukan tugas tertentu melalui pembagian common functionality. Sebagai contoh, saat
kamu log in ke sebuah website atau mencari sebuah blog, kamu tidak mendapat teks dokumen
yang kosong, sebelumnya telah ada kode JavaScript di dalamnya.

Tiap framework mempunyai kelebihan dan kekurangannya masing-masing. Penting untuk

memilih framework yang tepat sesuai dengan tipe website yang akan kamu buat. Beberapa
framework JavaScript sangat baik untuk membuat interface yang kompleks, sedangkan
framework lainnya lebih baik digunakan saat kamu ingin membuat website yang lebih
minimalis.

Kamu juga dapat menggunakan beberapa framework secara bersamaan. Misalnya yang umum
dilakukan yaitu menggabungkan Bootstrap dengan AngularJS. Content website diatur oleh
Angular, sedangkan tampilan oleh Bootstrap.

Kamu akan selalu bekerja menggunakan CSS dan JavaScript, oleh karena itu, penguasaan atas
framework-framework yang ada, akan menjadikan kamu developer yang lebih efisien.

4. Preprocessor CSS
Satu skill lagi yang berkaitan dengan CSS!

Meskipun CSS adalah skill yang sangat esensial, namun terkadang banyak batasan di dalamnya.
Beberapa batasan tersebut adalah CSS tidak bisa mendefinisikan variabel, fungsi, atau
melakukan operasi aritmatika.

Hal di atas bisa menjadi masalah saat skala project semakin berkembang. Kamu akan merasa
menghabiskan banyak waktu untuk menulis baris-baris kode yang sebenarnya bisa dikerjakan
secara lebih singkat. Sama seperti framework CSS dan JavaScript, Preprocessor CSS adalah
sebuah tool yang akan membuat hidupmu sebagai developer lebih mudah dan fleksibel.

Beberapa contoh Preprocessor CSS adalah Sass, LESS, atau Stylus. Kamu bisa menulis atau
mengubah kode secara jauh lebih simpel. Kemudian preprocessor CSS tersebut akan mengubah
kode ke dalam bentuk CSS yang nantinya akan bekerja di website kamu.

Sebagai contoh, kamu ingin mengubah shade warna biru yang kamu gunakan di beberapa bagian
website. Menggunakan preprocessor CSS, kamu hanya perlu mengganti satu hex value
melainkan harus mengubahnya berkali-kali dalam kode CSS-mu.

5. Version Control/Git

Akhirnya sebuah skill tanpa HTML, CSS, atau JavaScript!

Kamu pasti telah mengalami banyak revisi setelah semua kerja keras dengan marking up
menggunakan HTML, styling dengan CSS, dan memprogram dengan JavaScript. Jika kemudian
ada yang salah saat kamu sedang menyelesaikan sebuah project, tentu kamu tidak ingin
mengulangnya dari awal lagi. Version control adalah sebuah proses melacak dan mengontrol
perubahan-perubahan kode kamu sehingga kamu tidak perlu mengulangi semuanya dari awal.
Salah satu software untuk melakukan version control adalah Git. Ini adalah tool untuk melacak
perubahan-perubahan yang telah kamu lakukan sehingga kamu bisa kembali ke versi kerja kamu
yang sebelumnya dan menemukan apa yang salah tanpa merusaknya. Ini adalah skill yang akan
sangat berguna bagi kamu dan calon perusahaanmu nanti.

6. Responsive Design

Apakah kamu masih ingat masa di mana membuka website hanya dapat dilakukan melalui PC?
Kebanyakan orang mungkin sudah lupa hal tersebut karena pada saat ini sangat banyak media
untuk membuka website. Dari PC dalam berbagai ukuran, handphone, dan tablet.

Pernahkah kamu menyadari bahwa website yang kamu buka menyesuaikan ukurannya sendiri
tanpa perlu kamu atur lagi? Ini dilakukan melalui responsive design. Memahami prinsip-prinsip
responsive design dan bagaimana mengimplementasikannya saat coding adalah kunci dari front-
end development.

Perlu diingat bahwa responsive design adalah bagian dari framework CSS, contohnya bootstrap.
Skill-skill tersebut saling berhubungan, dan kamu bisa mempelajarinya secara beriringan.

7. Testing/Debugging

Dari website lokal yang sangat sederhana sampai website untuk bank internasional, selalu tidak
lepas dari yang namanya bug. Agar website bisa berjalan dengan baik, maka kamu selalu harus
menghilangkan bug yang ada. Jadi, kemampuan untuk menemukan bug dan melakukan debug
adalah skill yang sangat esensial untuk front-end developer.

Ada beberapa metode untuk melakukan testing web development, yaitu functional testing dan
unit testing.

Functional testing melihat fungsionalitas bagian-bagian tertentu, apakah bagian tersebut sudah
melakukan apa yang kamu perintahkan dengan benar. Contohya adalah form atau database. Unit
testing adalah cara untuk menguji unit paling kecil dalam sebuah kode, yaitu unit-unit yang
hanya berfungsi untuk satu operasi saja.
Testing adalah bagian yang sangat penting dari proses front-end development. Untungnya ada
program yang bisa membantu mempercepat dan menyederhanakan proses testing, antara lain
Mocha dan Jasmine.

8. Browser Developer Tools

Pengunjung akan melihat website kamu melalui web browser. Bagaimana browser membaca
kode kamu akan berpengaruh besar terhadap kesuksesan website.

Sama seperti testing dan debugging di atas, semua web browser modern dilengkapi dengan
developer tools. Tool ini membantu kamu untuk melakukan test dan merapikan website secara
sepesifik di dalam browser tersebut.

Hal di atas akan bervariasi dari satu browser ke browser lainnya, tetapi umumnya terdiri dari
inspector dan console JavaScript. Inspector memungkinkan kamu untuk melihat bagaimana
HTML dan CSS terhubung dengan komponen-komponen di dalam browser. Kamu juga bisa
mengedit HTML dan CSS secara langsung di browser tersebut.

Sedangkan, console JavaScript memungkinkan kamu untuk melihat error yang terjadi ketika
browser menjalankan kode JavaScript.

9. Building dan Automation Tools/Web Performance

Kamu mungkin sudah menyadari bahwa HTML, CSS dan JavaScript adalah tiga alat utama
untuk front-end development. Dan kemudian, skill-skill lain adalah penunjang agar kamu dapat
memanfaatkan HTML, CSS, dan JavaScript secara lebih efisien. Begitu juga halnya dengan
automation tools dan web performance.

Kamu bisa membangun website secanggih apapun, tetapi jika peformanya kurang baik, maka
semua akan menjadi sia-sia. Peforma web adalah jumlah waktu yang diperlukan oleh website
kamu untuk loading. Jika kamu mengalami hal tersebut, ada beberapa cara yang dapat kamu
lakukan antara lain: optimalisasi gambar dan meminimalisir CSS dan JavaScript tanpa
mengganggu fungsinya.

Program-program yang dapat membantu kamu melakukan hal ini, antara lain: Grunt dan gulp.

10. Command Line

Salah satu hal yang bisa memperbagus tampilan website adalah penggunaan Graphic User
Interfaces (GUIs). Siapa yang mau mengklik baris kode di layar? Lebih menarik untuk melihat
dan klik menu yang interaktif.

GUI memang dapat sangat membantu untuk web development dan coding, serta mereka juga
mudah digunakan. Tetapi, GUI juga mempunyai batasan-batasan untuk beberapa aplikasi. Ada
saatnya di mana kamu tetap butuh untuk membuka sebuah terminal di komputermu agar dapat
menuliskan command line.

Meskipun sebagian besar kerjamu menggunakan GUI, kamu akan tetap dipercaya jika kamu
menguasai command line.

SOFT SKILL

Di luar hard skill yang disebutkan di atas, kamu juga tidak boleh melupakan soft skill seperti
komunikasi dan kemampuan bekerja di dalam tim. Soft skill ini sangat diperlukan baik di bidang
industri teknologi, maupun di semua bidang lainnya. Jangan lupa untuk selalu mengasah
profesionalitasmu seiring kamu menjalani karir di bidang yang paling inovatif ini!

https://medium.com/@makersinstitute/10-skill-yang-kamu-perlukan-untuk-menjadi-front-end-
developer-ec04b093e4e3