10 Tips Belajar Coding Terlengkap untuk Pemula

 

Apa Sih Pentingnya Belajar Coding?

Keuntungan yang bisa Anda raih dengan belajar coding adalah sebagai berikut:

• Mengasah kemampuan problem solving dan logika;
• Meningkatkan pemahaman proses dan kreativitas;
• Menciptakan sesuatu yang bermanfaat;
• Prospek karir sebagai programmer cerah;
• Peluang penghasilan tinggi;
• Bisa bekerja dari mana saja secara remote.

Menarik sekali, bukan? Jadi, jika Anda punya ketertarikan untuk bekerja di dunia programming, sebaiknya Anda belajar coding mulai dari sekarang.

10 Tips Belajar Coding untuk Pemula

Berikut adalah beberapa tips yang bisa Anda praktikkan agar bisa belajar coding dengan mudah:

1. Kenali jenis-jenis developer;
2. Ketahui perbedaan bahasa pemrograman;
3. Pahami konsep dasar coding;
4. Mulai dengan HTML
5. Coba buat desain dengan CSS atau SCSS;
6. Lanjut ke JavaScript;
7. Pelajari PHP;
8. Perluas kemampuan coding;
9. Terus upgrade skill coding;
10. Ciptakan program yang solutif.

Ingin tahu penjelasan detailnya? Yuk simak satu per satu!

1. Kenali Jenis-Jenis Developer

Pertama, sebaiknya Anda tahu dulu jenis-jenis developer alias orang yang mengembangkan website/apps. Pasalnya, coding untuk setiap tipe developer bisa jadi berbeda.

Berikut beberapa jenis developer:

• Front-end developer: bertanggung jawab mengembangkan website dari sisi tampilan dengan menggunakan HTML, CSS, JavaScript, dll.
• Back-end developer: bertugas mengatur bagian belakang website/apps. Seperti: server, penerimaan data dari front end, dan lain-lain.
• Full-stack developer: gabungan dari keduanya, harus mengurusi front-end sampai dengan back-end. 

Lalu, manakah yang paling cocok untuk Anda?

Jawabannya, tergantung minat Anda. Kalau lebih suka mendekorasi tampilan, perdalam lah wawasan tentang front-end. Namun jika Anda lebih berminat membangun logika sistem, back-end adalah pilihan tepat.

Nah kalau Anda tertarik keduanya, terjun menjadi full-stack developer juga bisa, lho. Anda bisa memulai dengan membaca artikel apa itu web development dari kami.

2. Ketahui Perbedaan Bahasa Pemrograman

Banyak orang mengira semua yang dipakai untuk membuat website/apps adalah bahasa pemrograman. Padahal, belum tentu, lho.

Meskipun sama-sama digunakan untuk berkomunikasi dengan komputer, ada berbagai tipe bahasa:

• Bahasa markup:  bahasa komputer yang terdiri dari sekumpulan kode untuk mengatur struktur dan bagaimana informasi ditampilkan;
• Bahasa style sheet: bahasa komputer untuk menata presentasi konten. Mulai dari layout, font, warna, dll;
• Bahasa Script: serangkaian perintah komputer yang bisa dieksekusi secara otomatis;
• Bahasa pemrograman: bahasa komputer yang terdiri dari serangkaian aturan (string) untuk menghasilkan output tertentu. Khususnya mengembangkan website, software, apps, dll.

Biar makin jelas, coba cek kelompok dari masing-masing bahasa:

Markup Language	Pengertian
HTML (Hypertext Markup Language)	Bahasa markup untuk membuat struktur halaman website.
XML (Extensible Markup Language)	Bahasa markup untuk menyederhanakan proses penyimpanan dan pengiriman data antarserver.
XHTML (Extensible Hypertext Markup Language)	Kombinasi antara HTML dengan XML, dengan aturan yang lebih ketat dan rapi.
KML (Keyhole Markup Language)	Bahasa untuk visualisasi data geospatial.
MathML (Mathematical Markup Language)	Bahasa markup untuk mendeskripsikan notasi matematika.

Style Sheet Language	Pengertian
CSS (Cascading Style Sheet)	Bahasa markup yang menyederhanakan proses pembuatan website dengan mengatur elemen yang tertulis di bahasa markup.
SCSS (Sassy Cascading Style Sheet)	Sintaks terbaru dari SASS (Syntactically Awesome Style Sheets). SASS sendiri adalah preprocessor CSS, yaitu sebuah program untuk mengolah data menggunakan syntax tertentu dengan output CSS.

Scripting Language	Pengertian
JavaScript	Bahasa script untuk membuat situs dengan konten website yang dinamis.
PHP	Bahasa script server side scripting untuk menjalankan instruksi pemrograman saat proses runtime.
Ruby	Bahasa script object-oriented yang berfungsi melakukan web development (front-end dan back-end) secara ringkas.
Python	Bahasa script untuk membangun server website, mengembangkan software, game, sistem berbasis web, dll.
Perl	Bahasa script yang biasanya berfungsi mengolah report dan manipulasi teks pada website.

Bahasa Pemrograman	Pengertian
Java	Bahasa pemrograman yang biasa digunakan untuk mengembangkan bagian back-end dari software, aplikasi Android, dan juga website.
SQL	Bahasa untuk memodifikasi data serta mengambilnya dari database.
C	Bahasa pemrograman yang menjadi basic dari bahasa lainnya. Digunakan untuk mengembangkan sistem operasi, database, compiler, dll.
C#	Bahasa pemrograman modern berorientasi objek untuk membangun apps yang aman.
C++	Bahasa untuk membuat berbagai aplikasi. Misalnya, aplikasi pengolah gambar, software gadget, game, hingga sistem operasi baru.
Golang	Kerangka kerja untuk mengembangkan aplikasi website, back end, dan REST API.
R	Bahasa untuk melakukan komputasi statistik dan grafik.
Objective-C	Bahasa yang berorientasi pada objek yang awalnya digunakan oleh Apple untuk mengembangkan perangkatnya.
Swift	Bahasa pengantar untuk pengembang Mac dan iOS, serta menjadi platform utama Apple.
Matlab (Matrix Laboratory)	Program untuk melakukan analisis juga komputasi numerik.
TypeScript	Bahasa pemrograman yang dibangun berdasarkan JavaScript. Terdapat tambahan fitur strong-typing & konsep pemrograman OOP klasik (class, interface).
VBA	Kombinasi yang antara Visual Basic Editor dengan Visual Basic untuk mendesain dan membangun program dalam aplikasi Microsoft Office.

Sekarang, jangan ketukar lagi ya mengartikan bahasa pemrograman serta fungsinya masing-masing. Masuk lebih dalam, berikutnya Anda akan belajar memahami konsep coding dasar.

3. Pahami Konsep Dasar Coding

Meskipun bahasa programming itu macam-macam, Anda tetap bisa kok mempelajari semuanya.

Untungnya, ada konsep yang menjadi tulang punggung seluruh bahasa komputer. Memahami konsep ini, belajar coding akan jauh lebih mudah. Bahkan ketika Anda bertransisi ke bahasa lainnya:

• Variable: wadah penyimpanan dengan nama yang mewakili tipe data tertentu. Misalnya, tipe data string yang diwakili dengan variabel $value;

• Control structure: blok atau grup yang berisi variabel dan perintah tertentu. Saat suatu baris code ditulis, komputer akan membaca dan mencari perintah mana yang perlu dilakukan;

• Data structure: metode tertentu untuk menyimpan hingga mengolah data atau variabel secara efisien. Misalnya, developer hanya perlu membuat satu variabel untuk menampung seluruh data (List), daripada satu variabel untuk satu data;

• Syntax: seperangkat aturan yang mengatur bagaimana ejaan suatu perintah atau bahasa dapat diterjemahkan oleh komputer. Misalnya, menggunakan <>, ( ), @, dsb;

• Tools: program komputer yang Anda perlukan untuk membangun hingga mengeksekusi kode. Misalnya: Android Studio, Atom by Github, dll.

Kalau Anda belum terlalu mengerti penerapan kelima konsep di atas, tidak masalah. Pada bagian Contoh Coding nanti, Anda akan melihat penerapan coding dari beberapa bahasa pemrograman.

Tapi sebelum ke sana, mari pelajari bahasa komputer yang paling simple: HTML.

4. Mulai dengan HTML

Tips belajar coding berikutnya, cobalah mulai dari belajar HTML. Kebanyakan developer mengawali kemampuannya dari bahasa markup ini.

Alasannya, HTML memanglah basic dari halaman website apapun. Artinya, hampir semua website di dunia melibatkan kode HTML untuk membangun struktur tampilannya.

Untungnya, bahasa markup ini cukup mudah dipahami. Sintaksnya simple. Jadi bagi pemula, kami sarankan untuk belajar coding dengan mengeksplor HTML dulu.

Apalagi, versi HTML juga terus update. Yang terbaru, ada HTML5. Ini merupakan versi perbaikan dari HTML. Sehingga, sintaksnya lebih sederhana tapi minim error.

5. Coba CSS dan SCSS

Bersamaan dengan belajar HTML, boleh lho terjun juga ke CSS. Bisa dibilang, HTML dan CSS itu satu serangkai.

HTML itu untuk membuat kerangka tampilan web, sedangkan CSS untuk mendekorasi tampilan. Dengan memahami keduanya, Anda sudah bisa membuat tampilan web sederhana, lho.

Tapi kalau Anda ingin mendesain web dengan lebih cepat dan mudah, bisa juga pakai SCSS.

SCSS atau Sassy CSS adalah sintaks terbaru dari SASS (Syntactically Awesome Style Sheets). SASS sendiri adalah preprocessor CSS, yaitu sebuah program untuk mengolah data menggunakan syntax tertentu dengan output CSS.

6. Lanjut ke JavaScript

Naik level lagi, ke JavaScript. Tips belajar coding ini wajib Anda lakukan kalau tak ingin situs terlihat garing.

JavaScript mampu membuat situs lebih interaktif dan responsive di berbagai device. Situs Anda jadi bisa menampilkan animasi, image carousel, navigasi menarik, menu dropdown, dll.

Nah supaya lebih mudah mengombinasikan HTML, CSS, dan Javascript, kami sarankan Anda memakai Bootstrap. Bootstrap adalah framework HTML, CSS, dan JavaScript untuk mendesain website responsive dengan cepat dan mudah. 

7. Pelajari PHP

PHP adalah scripting language untuk membuat website fungsional. Lho, apa maksudnya?

Tadi Anda sudah paham, bahwa kombinasi HTML, CSS, dan Javascript bisa untuk membangun tampilan web sederhana. Namun agar komponen di sana berfungsi, Anda perlu memasukkan bahasa lain. Salah satunya PHP.

Alasannya, PHP mampu menjalankan proses sesuai perintah. Seperti perhitungan, penyimpanan data, dll. Sehingga, tidak hanya tampilan web saja yang oke, tapi orang-orang bisa menggunakannya.

Misalnya, komponen Cart pada website bisnis. Dengan PHP, Cart akan menampilkan jumlah barang belanjaan serta total pembayaran customer.

8. Perluas Kemampuan Coding

Setelah menguasai basic HTML, CSS, JS, dan PHP, Anda akan lebih mudah untuk memperluas kemampuan coding.

Tapi dari sekian banyak bahasa pemrograman, manakah yang harus dipelajari terlebih dahulu?

Sumber: Tiobe

Sumber: Tiobe

Kalau bingung, Anda bisa coba ikuti saran kami berikut:

• Mulai dari C. Alasannya, bahasa pemrograman ini adalah basic dari bahasa yang lebih rumit;
• Belajar Python. Bahasa pemrograman ini cukup populer dan banyak digunakan untuk berbagai kebutuhan. Mulai dari mengembangkan situs web, membuat fitur baru, melakukan statistik, dll;
• Lanjut ke Java. Java bisa berjalan di berbagai environment. Sintaksnya juga ringkas dan ramah pemula;
• Kalau sudah, terjun ke C++. Ini adalah versi mahir dari C. Bagus untuk membangun aplikasi, sistem operasi, hingga yang membutuhkan grafis berat seperti game.

Supaya gambaran Anda makin jelas, mari simak checklist belajar coding pemula di bawah ini.

Checklist Belajar Coding untuk Pemula

9. Terus Upgrade Skill Coding dari Berbagai Sumber

Belajar coding itu tidak ada habisnya. Pasalnya, bahasa pemrograman selalu berkembang dan merilis versi-versi terbaru.

Karena itu, Anda harus rajin upgrade skill. Tips belajar coding ini bisa Anda lakukan lewat berbagai sumber, semisal:

• Baca buku pemrograman;
• Tonton tutorial ngoding lewat YouTube atau platform streaming video lainnya;
• Gabung komunitas/forum coding yang relevan;
• Ikutan kelas coding atau web development, seperti Niagahoster Course;
• Berpartisipasi dalam webinar/event development. Misalnya, Devcussion, Tech in Asia Conference, dll;
• Langganan blog web development untuk mendapatkan info terbaru seputar programming.

Tidak usah terlalu tegang saat belajar coding. Mengikuti tips di atas Anda bisa mengasah skill sambil jalan. Sehingga, wawasan tetap rutin ter-upgrade tanpa memberi beban berlebih ke pikiran.

10. Ciptakan Program yang Solutif

Tips belajar coding pemula berikutnya, mulai ciptakan program yang solutif. Implementasikan skill coding Anda menjadi produk bermanfaat. Seperti website, apps, sistem, dsb.

	Cara Membuat Website dengan PHP
	Cara Membuat PHP Session Login dan Logout dengan Mudah
	15+ Contoh Program Python Sederhana yang Bisa Anda Coba
	[100% Mudah] Cara Membuat Aplikasi Android Terlengkap!

Selain membangun pengalaman, membuat program yang solutif akan memberi banyak insight ke Anda. Anda akan paham cara mengembangkan suatu fitur, menghadapi error, hingga menciptakan sesuatu dengan efisien dan efektif.

12+ Website Belajar Coding Secara Gratis

1. CodeAcademy

CodeAcademy merupakan website belajar coding bagi pemula sampai yang sudah mahir.

Kelas coding di sini bisa untuk belajar bahasa pemograman HTML & CSS, Python, JavaScript, Java, SQL, Bash/Shell, dan Ruby. Tak hanya itu, Anda juga bisa membuat website sederhana.

Dan selain bahan pembelajaran, Anda juga akan mendapat kuis untuk mengukur kemampuan sesuai materi yang sedang dipelajari.

2. W3schools

Jika Anda suka belajar coding pemula secara praktik, W3school adalah pilihan tepat. Bahasa pemograman yang tersedia di sini fokus untuk pembuatan website. Seperti JavaScripts, AngularJS, dan lain-lain.

Yang istimewa, tersedia compiler online untuk menerjemahkan program komputer yang ditulis dalam bahasa pemrograman tertentu. Sehingga, lebih mudah bagi Anda untuk memahami materi.

Serunya lagi, ada contoh kode program yang ditampilkan pada setiap bagiannya. Jadi, Anda bisa langsung mengedit kode program tersebut dan mengeksekusinya. Website pun akan menampilkan output dari kode Anda.

3. CodeWars

CodeWars adalah website yang menawarkan pelatihan lewat tantangan Kata. Tantangan ini fokus mengasah keterampilan serta teknik programming. Jadi, Anda akan diminta menyelesaikan suatu masalah pemrograman.

Seiring dengan tinggi tingkatan yang berhasil Anda selesaikan, tantangan akan makin sulit. Anda pun bisa membuat Kata sendiri untuk diselesaikan orang lain.

4. Free Code Camp

Website untuk mempelajari coding berikutnya, Free Code Camp. Di sini Anda akan menemukan pembelajaran yang sudah dipisahkan antara FrontEnd, Visualisasi Data, BackEnd, dan bagian lainnya.

Ada juga panduan Coding Interview Preparation yang bisa Anda gunakan untuk persiapan sebelum melakukan interview sebagai developer.

Untuk menambah kredibilitas, bisa juga lho ambil sertifikasi bahasa pemrograman di sini.

5. SoloLearn

SoloLearn adalah website belajar coding berbagai bahasa pemrograman. Anda bisa mempelajari HTML, CSS, C++, C#, Java, JavaScript, hingga Python.

Serunya, Anda bisa mempelajari semua itu secara gratis dan lewat device apa saja. Mau itu desktop maupun mobile. Setelah menyelesaikan course, Anda juga akan mendapatkan sertifikat.

6. Coursera

Mungkin, website coding dasar ini sudah terdengar familiar.

Yap,  Coursera adalah situs yang menyediakan banyak tutorial. Mulai dari coding, matematika, bisnis, hingga seni. Baik level pemula, expert, sampai sertifikasi online.

Sayangnya tidak semua kelas disediakan secara gratis. Anda harus bergabung ke Coursera Plus kalau mau mendapat sertifikat dan mendapat akses ke 90% materi.

7. Udemy

Mirip Coursera, Udemy juga menawarkan beragam kelas coding. Ada PHP, C++, JavaScript, dan masih banyak lagi.

Nantinya, Anda akan mendapat video tutorial dari mentor-mentor profesional. Bahkan, ada juga PR yang perlu Anda kerjakan untuk mendapat sertifikat.

10. Edx

Tempat belajar coding dasar berikutnya, Edx. Mirip seperti Udemy dan Coursera, Edx juga bersifat open source.

Menariknya lagi, situs ini didirikan oleh dua universitas dunia: Universitas Harvard dan MIT. Tak heran, materinya pun juga berkualitas.  Anda bisa belajar sesuai kecepatan masing-masing.

Namun jika ingin mendapatkan sertifikat, Anda harus membayar sesuai kelas yang diikuti.

9. The Odin Project

The Odin Project dibuat supaya orang–orang yang sulit mendapat akses belajar tentang teknologi informasi bisa tetap mendapat ilmu dengan kualitas terbaik.

Di sini Anda bisa memperdalam belajar HTML, CSS, Javascript, Git, Databases, dan Ruby secara gratis. Serunya lagi, Anda akan terhubung dengan pengguna lainnya dan bisa terlibat dalam sebuah proyek.

8. HackerRank

Kalau Anda sudah mengantongi sedikit skill pemrograman, silakan uji kemampuan Anda lewat HackerRank.

Situs ini akan menantang Anda untuk menyelesaikan beberapa permasalahan. Nantinya, poin-poin yang Anda hasilkan akan menentukan posisi pada papan ranking.

11. CodeFights

Masih kurang dengan tantangan website belajar coding sebelumnya? Coba CodeFight.

Sepertinya pengembang website ini ingin membuat belajar coding berasa seperti bermain online games. Anda bisa bersaing menyelesaikan sebuah permasalahan dengan yang lain.

Ada ribuan pertanyaan mengenai kode untuk Anda selesaikan. Mulai dari logika yang termudah sampai logika yang lebih rumit. Bahkan, tersedia menu tournament dengan durasi tertentu.

Selain itu, tiap minggu akan rilis tantangan tertentu. Bersama pengguna lainnya, Anda bisa, berdiskusi demi mencari algoritma terbaik.

12. Code Avengers

CodeAvengers menawarkan cara belajar membuat aplikasi, game, dan website. Anda juga bisa belajar bahasa pemograman seperti Python, HTML & CSS, Javascript dan banyak lagi

Bagi Anda yang masih pemula, jangan cemas. Website ini membagi kelasnya berdasarkan segmentasi: junior, pro, educator. Jadi, tingkat kesulitannya pun menyesuaikan.

13. CodeSaya

CodeSaya merupakan salah satu website yang dibuat oleh salah satu coder Indonesia.

Di sini, Anda bisa belajar berbagai bahasa pemrograman secara gratis. Khususnya PHP, Python, JavaScript, dll Untuk mengasah skill, CodeSaya juga memberikan kuis-kuis serta kado bagi coder terbaik.

3 Contoh Coding Serta Hasilnya

Penasaran bagaimana penerapan code? Mari lihat beberapa contoh coding dasar berikut.

1. HTML dan CSS: Form Login

HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<!DOCTYPE HTML> <html>     <head>         <title>Halaman Login</title>         <link rel="stylesheet" href="style.css">     </head>        <body>         <div class="container">           <h1>Login</h1>             <form>                 <label>Username</label><br>                 <input type="text"><br>                 <label>Password</label><br>                 <input type="password"><br>                 <button>Log in</button>             </form>         </div>         </body> </html>

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

*{     margin: 0;     padding: 0;     outline: 0;     font-family: 'Open Sans', sans-serif; } body{     height: 100vh;     background-image: url(https://bit.ly/2FPT1J9);     background-size: cover;     background-position: center;     background-repeat: no-repeat; }   .container{     position: absolute;     left: 50%;     top: 50%;     transform: translate(-50%,-50%);     padding: 20px 25px;     width: 300px;       background-color: rgba(0,0,0,.7);     box-shadow: 0 0 10px rgba(255,255,255,.3); } .container h1{     text-align: left;     color: #fafafa;     margin-bottom: 30px;     text-transform: uppercase;     border-bottom: 4px solid #2979ff; } .container label{     text-align: left;     color: #90caf9; } .container form input{     width: calc(100% - 20px);     padding: 8px 10px;     margin-bottom: 15px;     border: none;     background-color: transparent;     border-bottom: 2px solid #2979ff;     color: #fff;     font-size: 20px; } .container form button{     width: 100%;     padding: 5px 0;     border: none;     background-color:#2979ff;     font-size: 18px;     color: #fafafa; }

Output

2. JavaScript: Countdown Timer

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

<!DOCTYPE html> <html> <style> body, html {   height: 100%;   margin: 0; }   .bgimg {   background-image: url('/w3images/forestbridge.jpg');   height: 100%;   background-position: center;   background-size: cover;   position: relative;   color: white;   font-family: "Courier New", Courier, monospace;   font-size: 25px; }   .topleft {   position: absolute;   top: 0;   left: 16px; }   .bottomleft {   position: absolute;   bottom: 0;   left: 16px; }   .middle {   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);   text-align: center; }   hr {   margin: auto;   width: 40%; } </style> <body>   <div class="bgimg">   <div class="topleft">     <p>Unknown</p>   </div>   <div class="middle">     <h1>COMING SOON</h1>     <hr> <p id="demo"></p>   </div>   <div class="bottomleft">     <p>notfound</p>   </div> </div> <!-- Display the countdown timer in an element -->   <script> // Set the date we're counting down to var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();   // Update the count down every 1 second var x = setInterval(function() {     // Get today's date and time   var now = new Date().getTime();     // Find the distance between

Output

3. PHP: Logout Session

PHP

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<?php   session_start();   if (!isset($_SESSION['username'])) {     header("Location: index.php"); }   ?>   <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">       <link rel="stylesheet" type="text/css" href="style.css">     <title>Berhasil Login</title> </head> <body>     <div class="container-logout">         <form action="" method="POST" class="login-email">             <?php echo "<h1>Register, " . $_SESSION['username'] ."!". "</h1>"; ?>                          <div class="input-group">             <a href="logout.php" class="btn">Logout</a>             </div>         </form>     </div> </body> </html>

Output