Mau jadi front-end web developer ?

Saya udah belajar tentang web development kurang lebih sekitar 5 bulan. Sudah ada proyek yang lagi dikerjakan, dapat kerjaan jadi freelancer, dan sembari magang di sekolahkoding.com juga. Nah selama 5 bulan itu, saya udah mulai paham apa-apa saya sih yang harus dipejari kalau ingin menjadi front-end web developer. Kadang orang bingung, harus mulai dari mana sih ? belajar yang mana dulu sih? bahasa pemrograman apa sih yang perlu dipelajari ? Biarlah hanya saya yang bingung, teman-teman yang lain cukup ikuti aja pengalaman saya ini. Nah saya disini, akan menuliskan step-by-step apa saya yang sebaiknya dipelajari dari awal sampai nantinya bisa masuk ke dunia kerja di web development.

HTML,CSS dan JAVASCRIPT

Ini bahasa wajib yang harus dikuasai oleh seorang front-end web developer, tanpanya bagai sayur tanpa garam, kurang enak kurang sedap, hehehe. Html (hyper text markup language) adalah salah satu bahasa, yang menjadi struktur dasar sebuah website. kita menulis kalimat, Heading, Judul, dan struktur-struktur lainnya menggunakan HTML. Apabila website hanya ditulis dengan HTML saja, maka tampilan website akan menjadi ala kadarnya dan sangat tidak menarik. Oleh sebab itu, kita perlu CSS (Cascading Style Sheets) untuk memberi sentuhan tambahan pada website kita. CSS bisa membarikan warna, mengubah font tulisan, menambahkan border, dan lainnya agar website kita lebih “berwarna”. Yang terakhir adalah Javascript. Javascript merupakan bahasa pemrograman agar website lebih interaktif, misal kita klik pada bagian tertentu, makan akan muncul pop-up, kemudian warnanya berubah. Ibarat rumah, maka HTML adalah pondasi, susunan bata, dan atapnya. tanpa ada tambahan macam-macam aksesoris lainnya. Sedangkan CSS adalah aksesoris rumah, seperti keramik, cat dinding, ukiran-ukiran, yang menjadikan rumah lebih indah. Dan Javascript seperti halnya saklar lampu sehingga lampu bisa dinyala-matikan. Seperti Kran air, yang bisa mengatur kapan air harus mengalir dan harus berhenti. Dengan menguasai 3 point utama itu aja, saya jamin teman-teman sudah bisa membuat tampilan website yang menarik seperti apapun yang teman-teman inginkan, hanya saja waktu yang dibutuhkan untuk membuatnya pasti cukup lama, dan membutuhkan banyak pikiran. Diluar sana sudah banyak teknologi-teknologi lainnya yang akan mempermudah kita dalam bekerja. Sebagai web-developer kita itu harus malas, dalam artian apabila kita bisa mengerjakan dengan cara yang lebih mudah kenapa harus menggunakan cara yang lebih susah.

Chrome Developer Tools

Hampir setiap web browser memiliki developer tools tersendiri, hanya saja saya menyarankan kepada teman-teman untuk menggunakan Chrome, karena sangat andal, dan banyak yang menggunakannya. Selain untuk browsing Internet, Chrome juga memiliki developer tools yang bisa kita gunakan dalam rangka membantu kita membuat website dan melihat bagaimana website yang kita buat di”render” oleh web browser. Dev Tools, memiliki banyak fitur, beberapa contohnya, console untuk mencompile javascript file, membuka website dengan berbagai macam ukuran layar (responsive), dan banyak fitur-fitur lainnya yang bisa dibahas pada artikel tersendiri.

Jquery (Javascript Library)

Jquery merupakan Javascript library. Jquery ini memuat kumpulan fungsi-fungsi javascript yang nantinya bisa kita gunakan berulang kali ketika membuat website. Tanpa Jquery kita harus menulis satu-persatu fungsi yang kita butuhkan. Kembali ke prinsip dasar, web developer itu harus malas. Jquery ini sangat membantu kita dalam membuat kode javascript. Hampir semua web developer menggunakan Jquery, jangan jadi developer katrok yang ngga paham jquery, karena memang jquery ini sangat powerful.

Bootstrap (CSS framework)

Bootstrap merupakan salah satu CSS framework. Meskipun ada banyak CSS framework lainnya, saya hanya akan bahas satu saja agar temen-temen tidak bingung. Bootsrap merupakan salah satu yang paling banyak penggunanya, jadi akan memudahkan teman-teman dalam belajar, banyak tutorial yang tersedia, banyak pertanyaan yang berkaintan dengan Bootstrap sudah terjawab di internet sana. Jadi sebenernya, Tanpa atau menggunakan Bootstrap-pun temen-temen bisa membuat bisa membuat website tanpa ada perbedaan sedikitpun. Yang membedakan adalah waktu yang dibutuhkan untuk pembuatannya. Dengan menggunakan CSS framework, teman-teman bisa mempersingkan waktu pengerjaan pembuatan tampilan pada website temen-temen. Kita tidak perlu lagi reinviting the wheel, kita hanya tinggal menggunakan saya apa yang telah orang lain buat, makanya kita bisa bekerja lebih cepat.

RESPONSIVE DESIGN

Saat ini internet banyak diakses tidak hanya melalui Komputer Desktop, tetapi melalui berbagai macam perangkat, mulai dari Handphone, Tablet, Smart T, dan lain sebagainya. Dengan menggunakan responsive design, maka website kita bisa diakses melalui berbagai macam perangkat, dan tampilannya akan disesuaikan dengan besar layar dari perangkat tersebut sehingga tampilan tidak terlihat kacau dan acak-acakan. Untuk pelajaran lebih mendetail bisa lihat artikel saya disini https://sekolahkoding.com/forum/hal-hal-yang-perlu-diperhatikan-untuk-membuat-responsive-website dan disini https://sekolahkoding.com/forum/responsive-design-perbedaan-rem-em-vh-dan-vw

Vue.js (Javascript Framework)

Lagi-lagi, Javascript framework juga banyak banget, tapi karena saya merasa vue.js ini adalah yang paling simpel dan mudah dipelajari, maka saya rekomendasikan teman-teman untuk belajar vue.js sebagai framework javascript pertamanya. Framework ini akan memudahkan kita dalam membuat website. Coba kita artikan secara literal, maka framework berarti kerangka kerja. Nah, dengan framework ini, kita cuma tinggal isi kerangka yang telah disediakan oleh vue.js, sehingga hasil akhirnya akan diperoleh web app (website) yang kita inginkan.

Git (version Control)

Tanpa Git pun sebenernya ngga menjadi masalah, tapi akan jadi masalah kalau nantinya teman-temen bekerja dalam tim. Dengan menggunakan version control, pekerjaan akan lebih mudah diatur, tidak ada lagi satu kerjaan yang dikerjaan lebih dari satu orang. Apabila teman-teman melakukan kesalahan yang fatal, tinggal kembali ke versi sebelumnya. Ibarat teman-teman bermain playstation, maka Git ini berfungsi layaknya memory card yang mampu menyimpan kondisi website yang sedang kita kerjakan.

Sass (CSS preprocessor)

Sass ini merupakan CSS dengan kemampuan tambahan. Ibarat CSS adalah Manusia biasa, dan Sass adalah Superman. Banyak hal-hal yang teman-teman bisa lakukan menggunakan Sass tapi CSS belum bisa lakukan. Lagi-lagi fungsi utamanya adalah agar kita bisa bekerja lebih cepat, efektif, dan efisien. Untuk pemula bisa dilihat tulisan saya yang ini https://sekolahkoding.com/forum/belajar-sass-episode-1-apa-itu-sass

Command Line

Command Line akan menjadi teman baik seorang web developer, maka hukum mempelajarinya akan menjadi wajib. Mungkin tidak perlu terlalu mendalam, diawal hanya perlu sintax-sintax dasar dan seiring berjalannya waktu maka semakin banyak hal-hal yang bisa dipelajari.

Gulp

Gulp merupakan build tools / task runner yang fungsinya menjalankan pekerjaan-pekerjaan yang berulang, yang bisa diotomatisasi, sehingga kita tidak menghabiskan terlalu banyak waktu pada hal-hal yang remeh dan lebih fokus pada kodingnya saja. Contoh hal-hal yang bisa dilakukan secara otomatis adalah mengkompresi file-file dan gambar-gambar yang digunakan pada website kita, mengcompile Sass file menjadi CSS file. (website hanya bisa berjalan menggunakan CSS file). Untuk informasi lebih lengkap bisa dilihat ditulisan saya disini https://sekolahkoding.com/forum/belajar-sass-episode-1-apa-itu-sass

Kalau saja teman-teman memiliki kedisiplinan untuk mempelajari hal-hal diatas, maka saya yakin teman-teman sudah bisa membuat website, dan bahkan mendapat pekerjaan sebagai front-end web-developer. Saya harap teman-teman tidak hanya berhenti setelah membaca artikel ini, tetapi terus belajar di banyak sumber yang bisa di google, atau saya rekomendisikan untuk menonton video-video tutorial di sekolahkoding.com