Tahapan untuk Mulai Belajar Front-End Web Development - dibimbing.id

Shayne Talya

21 December 2022

1682

Image Banner

First impression calon konsumen terhadap suatu perusahaan sering kali muncul ketika mengunjungi website perusahaan tersebut. Oleh karena itu, penting untuk memastikan bahwa website memiliki tampilan yang menarik dan membuat pengguna nyaman berinteraksi di dalamnya. Hal ini terwujud melalui front-end web development yang baik. 


Mengingat sekarang dunia serba digital, hampir semua perusahaan pasti memiliki website untuk memperkenalkan produknya. Dengan demikian, karir di bidang front-end web development sangat diminati. Untuk berkarir di bidang ini, Sobat MinDi bisa mulai belajar dengan tahapan sebagai berikut.


Apa itu Front-End Web Development?


Sebelum masuk ke tahapan sederhana untuk mempelajari front-end web development, kita perlu tahu terlebih dahulu apa yang dimaksud dengan front-end web development.


Front-end atau kadang disebut client-side web development adalah pengembangan grafis antarmuka pengguna dari sebuah website melalui penggunaan HTML, CSS, dan JavaScript sehingga pengguna dapat berinteraksi dengan website tersebut. 


Tahapan Sederhana untuk Belajar Front-End Web Development


  1. Mempelajari Flowchart dan Pseudocode

Contoh Flowchart dan Pseudocode/

Contoh Flowchart dan Pseudocode/ Sumber : Chegg


Dalam pemrograman, algoritma didefinisikan sebagai metode yang terdiri dari langkah-langkah terstruktur untuk mencari solusi suatu masalah dengan bantuan komputer. Algoritma dapat disajikan dalam dua bentuk, yaitu flowchart (teknik visual) dan pseudocode


Flowchart adalah suatu diagram yang menggunakan simbol untuk menguraikan langkah-langkah dari stau proses secara berurutan. Simbol-simbol yang digunakan mempunyai bentuk yang beragam dengan arti masing-masing. Miisalnya, jajargenjang menunjukkan proses memasukkan atau mengeluarkan data (input/output).


Seorang programmer dianjurkan untuk membuat flowchart terlebih dulu untuk meningkatkan produktivitas programmer dan lebih cepat memperbaiki kesalahan sebelum menulis kode yang keliru. Selain itu, diagram ini sangat membantu kita dalam menyelesaikan suatu kasus secara step by step.


Pseudocode adalah bentuk penulisan algoritma menggunakan kode yang yang merupakan bahasa tiruan dari bahasa pemorgraman. Pseudocode yang disebut juga outline dari sebuah program komputer biasanya menggunakan Bahasa Inggris yang sederhana dan simbol atau sintaks dari suatu program, seperti ←. <, >, <=, >=, dll.


Sebelum mulai menulis kode, menguasai pseudocode penting untuk menjelaskan secara rinci mengenai apa yang harus dilakukan setiap baris dari sebuah kode yang akan dibuat, sehingga mempermudah fase penulisan kode bagi seorang programmer. Selain itu, ini akan melatih logika dalam pemrograman.


2. Mempelajari Algoritma Pemrograman Dasar dengan Javascript


JavaScript adalah bahasa pemrograman yang sering digunakan untuk mengembangkan website agar tampilannya dinamis dan interaktif dengan beragam desain antarmuka yang kreatif sesuai keinginan. Sobat MinDi harus menguasai konsep seperti loop, operator, fungsi, dan topik serupa lainnya untuk mengembangkan website.


Hampir semua bahasa pemrograman, seperti JavaScript pasti memiliki operator yang berfungsi untuk menetapkan dan membandingkan nilai. Dengan bantuan operator, Sobat MinDi juga bisa melakukan operasi aritmatika di JavaScript. Operator adalah simbol yang digunakan untuk melakukan operasi pada suatu nilai dan variabel.

Operator dalam JavaScript

Operator dalam JavaScript/ Sumber : Simple Snippets


Sekarang, yuk kita pahami 3 jenis operator yang paling umum digunakan.

  1. Operator Aritmatika


Seperti namanya, operator ini melakukan operasi aritmatika seperti penjumlahan, pengurangan, perkalian, pembagian, dll. 


  1. Operator Logika


Biasanya digunakan dalam conditional statement atau pernyataan bersyarat seperti if. Operator logika dapat berupa operator unary atau binary. Contoh operator logika, seperti logika AND (&&), logika OR (||), dan negasi/kebalikan (!).


  1. Operator Penugasan (Assignment)


Operator biner yang digunakan untuk menetapkan nilai ke variabel. Operator ini menetapkan nilai operan kanan ke operan kiri. Operator penugasan yang paling umum digunakan, yaitu =. Misalnya, x = y, dengan y adalah operan kanan dan nilainya ditetapkan ke x, operan kiri.




3. Mempelajari HTML


HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk membuat sebuah halaman website. Browser web dapat membaca file HTML dan membuatnya menjadi halaman web yang terlihat bahkan terdengar. 


Setiap halaman HTML pasti memiliki struktur dasar yang terdiri dari 4 bagian utama, yaitu tag DOCTYPE, tag html, tag head, dan tag body. Keempat bagian tersebut merupakan standar pada struktur global dokumen HTML yang ditetapkan oleh W3C (World Wide Web Consortium).


Struktur Dasar Sebuah Dokumen HTML

Struktur Dasar Sebuah Dokumen HTML/ Sumber : Lena Design


Nah, berikut penjelasan keempat tag tersebut.

  • Tag DOCTYPE 


Ditulis pada baris pertama dalam sebuah dokumen HTML. Tag ini merupakan sebuah deklarasi bahwa kode di bawah adalah dokumen HTML atau untuk memberitahu browser jenis dokumen HTML yang digunakan agar dapat menentukan perlakuan terhadap kode tersebut.


  • Tag html


Tag pembuka dan penutup dari keseluruhan sebuah dokumen HTML. Tag ini berfungsi sebagai root, artinya semua tag yang berada di dalam tag html merupakan gambaran dokumen HTML.


  • Tag head


Umumnya berisi elemen yang tidak tampak pada browser. Misalnya, memanggil CSS, memberikan informasi berupa penulis, judul dokumen, kata kunci pada dokumen, sampai mencakup tampilan deskripsi di hasil pencarian Google. 


  • Tag body


Kebalikan dari tag head, tag ini berisi elemen yang akan ditampilkan pada browser atau untuk membuat bagian isi website. Misalnya, memasukkan gambar, paragraf, dll.



4. Mempelajari CSS


Dalam front-end web development, CSS (Cascading Style Sheets) adalah suatu bahasa style sheet yang berperan untuk mendesain, membentuk, serta mengubah tampilan halaman sebuah website atau suatu dokumen yang ditulis dalam bahasa markup. 


Jenis-Jenis CSS Berdasarkan Penempatan


Jenis-Jenis CSS Berdasarkan Penempatan/ Sumber BitDegree Learn


Berdasarkan penempatan kodenya, CSS dibagi menjadi tiga jenis. Yuk, kita simak perbedaan ketiganya.

  • External CSS

Kode CSS yang diletakkan di luar dokumen HTML sebagai file .css. Dengan external style sheet, Sobat MinDi dapat mengubah tampilan keseluruhan halaman website yang kamu tentukan hanya dengan mengubah satu file saja. Ini sangat bergunka jika Sobat MinDi ingin mengubah tampilan beberapa halaman sekaligus.


  • Internal CSS

Kode CSS ini ditempatkan di bagian header file HTML. Kode ini berfungsi untuk menetapkan aturan CSS untuk halaman di bagian head dari sebuah dokumen HTML. Kode ini sangat membantu ketika Sobat MinDi ingin membuat tampilan halaman website berbeda dari tampilan halaman lainnya.


  • Inline CSS

Kode CSS ini dituliskan di dalam file HTML yang hanya akan mempengaruhi satu baris kode HTML. Kalau Sobat MinDi ingin membuat elemen HTML dengan format khusus di sebuah halaman, kode ini cocok digunakan. 


Setelah mengetahui tahapan sederhana untuk belajar front-end web development, Sobat MinDi jadi tahu mau mulai dari mana kan? 


Nah, buat Sobat MinDi yang tertarik untuk memperdalam dan memulai karir di bidang front-end web development, bisa belajar di bootcamp-nya Dibimbing nih! Kamu bakal dibimbing dari awal sampai mampu menguasai materi-materinya oleh para mentor yang ahli di bidangnya.


Bukan cuma teori, di setiap kelasnya akan langsung hands on dengan menyelesaikan beberapa studi kasus sehingga kamu akan mengerti praktiknya. Selain itu, akan ada kelas persiapan karir terkait CV dan profil LinkedIn. Paket komplit banget nggak sih?


Yuk, segera persiapkan #2023KarirMakinMahir bersama dengan Dibimbing.id!



Share

Author Image

Shayne Talya

Suka nulis dan masih banyak mau belajar

Hi!👋

Kalau kamu butuh bantuan,

hubungi kami via WhatsApp ya!