Skill Wajib Dikuasai Front End Developer

Ditulis oleh Bang Den on
DeveloperFront End

frontenddeveloper

Daftar isi

Apakah kamu pernah mengunjungi suatu situs dan kamu tertarik dengan desainnya? Atau, kamu pernah bertanya-tanya bagaimana sih cara buatnya? Semua itu dikerjakan oleh Front End Developer.

Sesuai dengan namanya, Front End Developer yang bekerja di bagian depan pada sebuah web. Bisa juga disebut dengan front end development. Nah, semua yang ada di tampilan website itu adalah bagian dari jobdesk dari front end developer.

Apabila kamu tertarik menjadi seorang front end developer, ada beberapa hal yang harus kamu pelajari. Mulai dari bahasa pemrograman HTML, CSS, JavaScript, dan lainnya.

Melalui artikel ini, kamu akan belajar cara menjadi front end developer tahap basic. Saya juga akan membahas tugas dan skill front end developer. Yuk, mari kita simak pembahasannya melalui poin-poin berikut ini!

Apa Itu Front End Developers?

Front end developer merupakan sebutan untuk seorang pengembang website. Mereka mengemban tanggung jawab seperti merancang dan mengembangkan suatu aplikasi web dari sisi depan atau berhubungan langsung dengan pengguna.

Sebagai pengguna web, tampilan situs yang kamu lihat merupakan hasil dari pekerjaan front end developer. Mulai dari foto, animasi, video, sampai tata letak website yang terlihat rumit. Atau singkatnya, mereka itu mengembangkan sebuah aplikasi web yang dapat dilihat dan berinteraksi dengan para penggunanya.

Bagaimana dengan back end? Apa bedanya?

Apabila front end developer berhubungan langsung dengan sisi pengguna, maka sebaliknya back end developer bekerja di sisi belakang layar, seperti berhubungan dengan server. Salah satunya adalah mengelola database. Tanggung jawab back end developer ialah memastikan data dan website dapat diakses dengan baik dan lancar oleh penggunanya.

Lalu, bagaimana tugas sebagai front end developer? Apa saja sih yang mereka kerjakan disetiap harinya? Yuk, mari kita ulas secara singkat dan jelas di bawah ini.

Tugas Front End Developers

Tugas sebagai front end developer bisa dikatakan lumayan banyak. Scoopenya tidak harus dengan desain website. Ada beberapa hal yang harus diperlukan dan dimaksimalkan dalam pembuatan website. Gunanya sebagai meningkatkan experience dari penggunanya.

Apabila kamu ingin menjadi front end developer, kamu perlu mengetahui apa tugas-tugasnya yang yang harus dikerjakan terlebih dahulu. Hal ini berguna supaya kamu dapat memahami skill apa saja yang harus kamu kuasai.

Berikut ini adalah tugas utama sebagai front end developer.

1. Membuat Struktur dan Desain Website

Apakah kamu pernah milehat struktur suatu website yang tidak teratur atau terlihat berantakan? Atau mungkin desainnya yang kurang menarik dan gak enak dilihat?

Itulah tugas seorang front end developer ialah menghindari kesalahan tersebut. Front end developer harus menentukan struktur untuk sebuah website dengan baik dan terencana. Setelah itu, mereka juga mempunyai kewajiban untuk membuat desain website. Tentunya pembuatan desain website harus didasari dengan kaedah branding perusahaan atau sesuai dengan permintaan customer.

Apabila struktur dan desainnya kurang baik, maka hal tersebut dapat berpengaruh kepada aspek user experience.

2. Memaksimalkan User Experience (UX)

Mungkin kita mendapatkan pengalaman atau experience yang buruk saat berkunjung ke sebuah situ web. Misal:

  1. Ukuran font terlalu kecil, sehingga kita kesulitan saat membacanya.
  2. Pada menu navbar drop-down tidak berfungsi dengan semestinya ketika kita klik.
  3. Warna background tidak sesuai yang bisa membuat mata kita sakit atau warnanya hampir mirip dengan warna fontnya sehingga kita kesulitan untuk membaca.

Tiga poin dia atas juga pernah kamu alami. Hal tersbut tentu saja tidaklah menyenangkan, bukan? Inilah yang disebut dengan User Experience atau UX.

Seorang front end developer juga bertanggung jawab memaksimalkan aspek-aspek UX. Hal ini tentunya sangat berkaitan dengan pembahasan yang pertama; untuk menentukan rancangan struktur dan desain web dengan baik.

Perlu kamu ketahui juga, desain saja juga tidak cukup loh. Desain tidak cuman tentang keindahan. Desain perlu mendukung supaya website dapat berfungsi dengan baik dan semestinya. maka dari itu fungsionalitas dan estetika perlu diseimbangkan, supaya pengalaman penggunanya juga memuaskan.

3. Melakukan Optimasi Website

Apakah membangun suatu website saja sudah cukup?

Tentu saja tidak, perlu kamu ketahui website juga butuh untuk dioptimasi dan maintenance. Hal tersebut memiliki tujuan supaya website dapat diakses dengan cepat dan tidak ada malfungsi.

Optimasi sebuah website bisa dilakukan dengan metode SEO (Search Engine Optimization). Optimasi SEO bertujuan agar website tersebut dapat muncul di halaman mesin pencarian, seperti Google, Bing, Duckduck Go, Yandex, dll. Optimasi performa bertujuan supaya loading website cepat dan koenten yang dimiliki relevan.

Maka dari itu front end developer harus memperhatikan dengan baik mengenai copywriting yang akan ditambahkan di halaman website. Begitu juga dengan aspek ukuran animasi, foto, atau video yang mempunyai kemungkinan untuk menghambat waktu loading website.

Kira-kira dari ketiga poin yang ada di atas merupakan tugas utama dari seorang front end developer. Selain itu, mereka juga mempunyai tugas lainnya. Contohnya seperti berkolaborasi dengan back end developer untuk mengimplementasikan desain pada suatu aplikasi mobile web, melakukan sebuah testing diaspek usability, mengatasi sebuah bug, dan sebagainya.

Tugas-tugas yang kerjakan di atas tentunya harus didukung dengan skill yang mumpuni. Berikut ini adalah skill yang harus dikuasai oleh seorang front end developer.

Skill Wajib Dikuasai Front End Developer

1. HTML - Hyper Text Markup Language

HTML merupakan bahasa pemrograman yang paling dasar dan penting untuk sebuah pengembangan website. Bisa disebut, bahasa pemrograman HTML merupakan pondasi untuk membangun sebuah website.

Kode sederhana yang ada di html adlaah sebagai berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bangden.space</title>
</head>
<body>
    <h1>Halo Guys</h1>
</body>
</html>

Apabila kamu ingin melihat kode HTML di suatu website yang kamu kunjungi bisa tekan tombol CTRL + U di browser untuk melihat bagian View Page Source.

Itulah kode HTML, dengan menggunakan HTML, kamu dapat membuat sebuah halaman web yang kamu inginkan. Kamu juga dapat mengatur konten-konten apa saja yang ditampilkan. Contoh seperti tata letak heading dan paragrafnya.

2. CSS - Cascading Style Sheets

Apabila ada HTML maka harus ada CSS, kedua bahasa pemrograman ini seperti remeo and juliet yang tak pernah terpisahkan.

Bahasa pemrograman CSS tidak kalah pentingnya dengan bahasa pemrograman HTML. Struktur sebuah website yang telah dibuat menggunakan HTML dapat diperindah dengan menggunakan bahasa CSS.

CSS di sini berfungsi memberikan style. Contohnya memberikan warna, tata letak, ukuran font, ukuran foto dan sebagainya. Dengan begitu pengunjung akan semakin betah dan nyaman untuk mengunjungi website kamu.

Berikut adalah contoh sederahana kode CSS:

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

3. CSS preprocessor

Bahasa pemrograman CSS bukanalah bahasa yang bisa dikatakan sempurna. Meski bahasa ini esensial, ada beberapa fungsi yang tidak dapat dilakukan. Contoh seperti, tidak dapat melakukan operasi aritmatika dasar, fungsi, loop, atau mendefiniskan variabel.

Maka dari itu dibutuhkannya sebuah tool yang disebut dengan CSS preprocessor. Dengan tool satu ini, proses pembuatan kode CSS akan lebih mudah dan hemat waktu. CSS preprocessor akan menuliskan barisan kode yang bisa dibaca oleh CSS. Nantinya kode tersebut dapat berjalan di halaman website kamu.

Ada beberapa contoh CSS Preprocessor yaitu LESS, Stylus, dan SASS. Tetapi untuk saat ini yang populer dan sering digunakan ialah LESS dan SASS.

Contoh sederhana kode SASS:

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

4. CSS Framework

Kamu mau membaut desain website dengan mudah dan cepat?

CSS Framework merupakan solusi untuk mempersingkat pembuatan desain website. Dengan menggunakan framework, penulisan bari kode akan menjadi lebih cepat dan sederhana. Kamu tidak perlu menulis baris kode dari awal. Hal tersebut dikarenakan framework tersebut memiliki kode CSS yang sudah siap untuk digunakan atau bisa disebut dengan template. Baris kode yang disediakan oleh framework dapat digunakan untuk desain layout dan tema.

Ada banyak sekali pilihan CSS framework yang dapat kamu gunakan. Diantaranya ialah Bootstrap, Bulma, UI, Semantic,Skeleton, Materialize, Tachyons, UI Kit, Primer CSS, Ant Design, Miligram, fondation, Pure, dan Tailwind. Pastikan kamu memilih CSS framework sesuai dengan kebuthan website kamu. Kalau saya biasa menggunakan Bootstrap dan Tailwind untuk project website yang sedang saya kerjakan.

5. Javascript

Untuk membuat desain web menggunakan bahasa pemrograman HTML dan CSS sudah dibilang cukup dan dapat disajikan. Tetapi, website kamu terasa ada yang kurang dan terkesan membosankan. Hal tersebut dikarenakan website kamu menjadi kurang interaktif.

Solusi dari permasalahan di atas ialah menggunakan bahasa pemrograman Javascript. Dengan adanya Javascript webiste kamu akan menjadi lebih dinamis. Kamu bisa menambahkan fungsi untuk membuat efek animasi. Dengan hal tersebut, maka pengelaman pengguna juga akan memiliki nilai tambah.

Berikut contoh kode sederhana Javascript

// Program Menampilkan kata Halo Dunia
document.write('Halo Dunia!');

6. Javascript Framework

Javascript framework mempunyai fungsi yang sama dengan CSS framework. Kamu juga tidak usah menuliskan baris kode dari awal. Dengan ini proses pembuatan web menggunakan Javascript akan lebih efektif dan sederhana.

Ada beberapa pilihan untuk Javascript framework yang dapat kamu gunakan. Seperti Angular, Vue.JS, Next.JS, React, Gatsby.JS, Nuxt, Svelte, backbone, dan Ember. Tetapi, Javascript framework yang saat ini paling populer ialah React, Vue.JS, Next.JS, dan Gatsby.JS bahkan dapat menambah nilai tambah kamu saat melamar di perusahaan IT. Biasanya saya sering menggunakan React, Next.JS, dan Gatsby.JS untuk keperluan Javascript di project website yang saya kerjakan.

7. jQuery

Selain framework, Javascript juga mempunyai sebuah liberary. Salah satunya ialah jQuery.

Fungsi sebuah library mirip-mirip dengan framework. Pembuatan website kamu akan dibantu oleh elemen dan kode yang sudah ada di dalama library jQuery. Kamu bisa membuat fungsi countdownn ataupun menata penempatan ulang sebuah grid layout di website kamu secara otomatis.

Tentunya, proses pembuatan desain website akan menjadi lebih efisien dan mudah, kan?

8. Responsive atau Mobile Web Design

Apakah kamu pernah membuka salah satu website melalui smartphone dan ternyata website tersebut memiliki tampilan yang berbeda dengan tampilan yang ada PC Desktop? Inilah yang disebut dengan Responsive Design.

Sebagai seorang front end developer, hal ini sangatlah penting. Alasanya ialah karena jaman sekarang banyak pengguna yang mengakses website melalui smartphone.

Apabila website yang kamu buat tidak mendukung Responsive Design lalu dijalankan di smartphone, maka tampilanya akan berantakan atau tidak sesuai. Pengguna akan mengalami kesulitan untuk menjelajahi website kamu. Kamu harus tahu terlebih dahulu prinsip Responsive Design.

9. Git atau Version Control System

Disaat proses pembuatan kode, tentunya kamu tidak dapat terhindar dari kesalahan. Maka dari itu dibuatlah solusi yang bernama Version Control System (VCS), bukan VCS yang lainnya yah 😏.

Dengan adanya VCS, kamu bisa mengontrol perubahan apa saja yang sudah kamu buat. Apabila perubahan yang kamu lakukan menimbulkan masalah, kamu dapat dengan mudah untuk kembali ke versi sebelumnya dengan menggunakan VCS.

Salah satu VCS yang populer ialah Git. Git merupakan salah satu tool yang paling penting untuk seorang front end developer. Maka dari itu tidaklah heran apabila banyak sekali tutorial Git bertebaran di Internet. Partikan kamu juga mempelajarinya, ya!

10. Proses Testing dan Debugging

Untuk apa kita harus melakukan testing? Bukankah itu merupakan tugas dari Quality Assurance?

Memang benar, namun untuk seorang front end developer juga harus melakukan hal tersebut. Pada dasarnya, kamu perlu mengecek kembali hasil desain yang sudah kamu buat. Tujuannya ialah untuk menghindari error.

Lalu, bagaimana jika terjadi error dan sudah terlanjur muncul?

Di sinilah metode debugging dibutuhkan. Singkatnya, kamu perlu untuk menghapus sebuah bug dan mengatasi masalah yang muncul. Dengan begitu, website kamu bisa kembali berjalan dengan semestinya.

11. Optimasi Website

Masih ingatkan dengan istilah Search Engine Optimization? Itu ialah salah satu yang dapat dilakukan untuk mengoptimisasi website. Tujuannya supaya website yang kamu buat dapat bekerja dengan ringan dan cepat.

Selain SEO, seorang front end developer juga dapat melakukan optimisasi dengan cara lain. Seperti dengan memperhatikan dan mempertimbangkan setiap baris kode HTML, CSS, dan Javascript. Pastikan setiap baris kode tidaklah rumit dan selalu gunakan efisiensi.

Untuk melakukan optimisasi tersebut, kamu dapat menggunakan tool yang disediakan oleh Grunt dan Gulp.

12. Memahami Apa itu Browser Developer Tools

Sebuah website pasti harus diakses menggunakan browser. Karena dari itu, baris kode yang kamu buat harus bisa dibaca oleh browser tersebut. Supaya website dapat berjalan dengan baik.

Sebagai seorang front end developer, kamu tidak hanya mengatur sebuah tampilan pada website. Kamu memastikan juga untuk fungsi tersebut apakah sudah sesuai dengan kebutuhan pengguna. Secara otomatis, user experence akan bertambah.

Di dalam browser, kamu akan menemukan developer tools yang dapat kamu gunakan supaya website kamu berjalan dengan baik. Kamu juga harus paham setiap browser memiliki tools yang berbeda beda.

13. Mengerti Tentang Command Line

Disaat membuat website, biasanya kamu akan dibantu oleh GUI (Graphic User Interface). Tetapi, tidak semua developer tools menggunakan GUI. Maka dari itu fron end developer juga harus paham tentang command line.

Di sini, command line akan membantu kamu untuk mengatasi kekurangan dan keterbatasan yang dimiliki GUI. Dengan begitu, pembuatan website tidak akan terhambat.

Kesimpulan

Skill di atas ialah kompetensi yang perlu kamu miliki dan kuasai untuk menjadi seorang front end developer. Mulai dari bahasa HTML, CSS, Javascript, sampai pemahaman tentang command line.

Tetapi, kamu juga harus tetap memahami akan tugas-tugas yang dilakukan oleh seorang front end developer. Dengan begitum, skil yang kamu kuasai bisa membantu kamu mengerjakan sebuah project web design.

Salam Hormat

Bang Den

Comments