Belajar yu
10 Tips Belajar Coding Terlengkap untuk Pemula
Ingin belajar coding untuk pemula, tapi mulai dari mana ya?
Inilah yang pasti Anda bingungkan saat mau belajar coding dasar. Dunia programming itu memang terus berkembang. Wajar kalau Anda merasa tertinggal setiap ingin mulai belajar.
Tapi, bukan berarti Anda tidak bisa mengejarnya. Kuncinya yaitu, melakukan tips belajar coding yang efektif.
Daripada mempelajari semua bahasa pemrograman sekaligus, kami akan menunjukkan cara belajar dari nol sampai bisa membuat program yang solutif. Jadi bagi Anda yang masih awam, artikel ini sangat tepat.
Tanpa berlama-lama, yuk belajar coding bersama!
Apa Sih Pentingnya Belajar Coding?
Keuntungan yang bisa Anda raih dengan belajar coding adalah sebagai berikut:
- Mengasah kemampuan pemecahan masalah dan logika;
- Meningkatkan proses pemahaman 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:
- Kenali jenis-jenis pengembang;
- Ketahui perbedaan bahasa pemrograman;
- Pahami konsep dasar coding;
- Mulai dengan HTML
- Coba buat desain dengan CSS atau SCSS;
- Lanjut ke JavaScript;
- Pelajari PHP;
- Perluas kemampuan coding;
- Terus upgrade skill coding;
- Ciptakan program yang solutif .
Ingin tahu penjelasan detailnya? Yuk simak satu per satu!
1. Pengembang Kenali Jenis-Jenis
Pertama sebaiknya, Anda tahu dulu jenis-jenis deve l oper 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 lainnya.
- Full-stack developer: gabungan dari keduanya, harus mengurusi front-end sampai dengan back-end.
Lalu, mana 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 sistem logika, back-end adalah pilihan yang tepat.
Nah kalau kalian tertarik keduanya, terjun menjadi full-stack developer juga bisa, lho. Anda bisa memulai dengan membaca artikel apa itu pengembangan web 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 kumpulan kode untuk mengatur struktur dan bagaimana informasi ditampilkan;
- Lembar gaya bahasa: bahasa komputer untuk menata konten. Mulai dari layout, font, warna, dll;
- Bahasa Script: Rangkaian perintah komputer yang dapat dieksekusi secara otomatis;
- Bahasa pemrograman: bahasa komputer yang terdiri dari serangkaian aturan (string) untuk menghasilkan output tertentu. Khususnya mengembangkan website, software, apps, dll.
Biar lebih jelas, coba cek kelompok dari bahasa masing-masing:
Sekarang, jangan ketuk lagi ya maksudnya bahasa pemrograman serta fungsinya masing-masing. Masuk lebih dalam, berikutnya Anda akan belajar memahami konsep coding dasar.
3. Pahami Konsep Dasar Coding
Meskipun bahasa pemrograman 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:
- Variabel: wadah penyimpanan dengan nama yang mewakili tipe data tertentu. Misalnya, tipe data string yang diwakili dengan variabel $value;
![](data:image/svg+xml;charset=utf-8,<svg height="164px" width="488px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
- Struktur kontrol: blok atau grup yang berisi variabel dan perintah tertentu. Saat suatu baris kode ditulis, komputer akan membaca dan mencari perintah mana yang perlu dilakukan;
![](data:image/svg+xml;charset=utf-8,<svg height="268px" width="333px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
- Struktur data: 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;
![](data:image/svg+xml;charset=utf-8,<svg height="40px" width="568px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
- Sintaks: kumpulan aturan yang mengatur bagaimana mantra suatu perintah atau bahasa dapat diterjemahkan oleh komputer. Misalnya, menggunakan <>, ( ), @, dsb;
![](data:image/svg+xml;charset=utf-8,<svg height="365px" width="441px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
- Tools: program komputer yang Anda perlukan untuk membangun hingga mengeksekusi kode. Misalnya: Android Studio, Atom by Github, dll.
Kalau Anda belum terlalu paham menerapkan konsep kelima di atas, tidak masalah. Pada bagian Contoh Coding nanti, Anda akan melihat penerapan coding dari beberapa bahasa pemrograman.
Tapi sebelum ke sana, maripelajari bahasa komputer yang paling sederhana: HTML.
4. Mulai dengan HTML
Tips belajar coding selanjutnya, cobalah mulai dari belajar HTML . Kebanyakan pengembang memulai kemampuan 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 sederhana. 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, bisa 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.
![](data:image/svg+xml;charset=utf-8,<svg height="502px" width="936px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
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 responsif di berbagai perangkat. 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. Bootstra p adalah framework HTML, CSS, dan JavaScript untuk mendesain website responsive dengan cepat dan mudah.
7. Pelajari PHP
PHP adalah bahasa scripting 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 HTML dasar, CSS, JS, dan PHP, Anda akan lebih mudah memperluas kemampuan pengkodean. K alau bingung, Anda bisa coba ikuti saran kami berikut:
- Mulai dari C . Alasannya, bahasa pemrograman ini dasar 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;
- Lanjutan ke Ja v a . 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.
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 meng-upgrade skill. Tips belajar coding ini bisa Anda lakukan lewat berbagai sumber, semisal:
- 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 buat program yang solutif. Implementasikan skill coding Anda menjadi produk bermanfaat. Seperti website, apps, sistem, dsb.
Selain membangun pengalaman, membuat program yang solutif akan memberi banyak wawasan kepada Anda. Anda akan paham cara mengembangkan suatu fitur, mengatasi kesalahan, hingga menciptakan sesuatu dengan efisien dan efektif.
12+ Website Belajar Coding Secara Gratis
1. Akademi Kode
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 materi pembelajaran, Anda juga akan mendapat kuis untuk mengukur kemampuan sesuai materi yang sedang dipelajari.
2. Sekolah W3
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. Perang Kode
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 level tinggi yang berhasil Anda selesaikan, tantangan akan semakin sulit. Anda pun bisa membuat Kata sendiri untuk menyelesaikan orang lain.
4. Kamp Kode Gratis
Situs web untuk mempelajari koding berikutnya, Free Code Camp. Di sini Anda akan menemukan pembelajaran yang telah dipisahkan antara FrontEnd , Data Visualisasi, 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. Hack.Pledge( )
![](data:image/svg+xml;charset=utf-8,<svg height="509px" width="1024px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Hack.Pledge( ) adalah wadah bagi para developer untuk berkumpul dan berbagi informasi satu sama lain.
Seperti slogannya, “ Mentor the next generation of developers or learn from the best and master your craft “, Anda bisa menjadi mentor sekaligus membicarakan permasalahan Anda dengan pengguna secara langsung.
6. Kursus
Mungkin, pengkodean dasar situs web ini sudah terdengar familier.
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 jika mau mendapat sertifikat dan mendapat akses ke 90% materi.
7.Udemi
Mirip Coursera, Udemy juga menawarkan beragam kelas coding. Ada PHP, C++, JavaScript, dan masih banyak lagi.
Nantinya, Anda akan mendapatkan video tutorial dari mentor-mentor profesional. Selain itu, 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, bahannya pun juga berkualitas. Anda bisa belajar sesuai kecepatan masing-masing.
Namun jika ingin mendapatkan sertifikat, Anda harus membayar sesuai kelas yang diikuti.
9. Proyek Odin
The Odin Project dibuat agar 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 lain dan bisa terlibat dalam sebuah proyek.
8. Peringkat Peretas
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 peringkat papan.
11. CodeFight
Masih kurang dengan tantangan website belajar coding sebelumnya? Coba CodeFight.
Sepertinya pengembang website ini ingin membuat belajar coding berasa seperti bermain game online . 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 turnamen dengan durasi tertentu.
Selain itu, setiap minggu akan merilis tantangan tertentu. Bersama pengguna lainnya, Anda bisa berdiskusi demi mencari algoritma terbaik.
12. Kode Pembalas
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 mempelajari 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 kode? Mari lihat beberapa contoh coding dasar berikut.
1. HTML dan CSS: Form Login
HTML
<!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
*{ 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;
}Keluaran
2. JavaScript: Penghitung Waktu Mundur
JavaScript
<!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 Keluaran
3. PHP: Sesi Logout
PHP
<?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>Keluaran
Yuk Belajar Coding Sambil Praktik Pakai Hosting!
Sampai disini, Anda sudah mengantongi berbagai tips belajar coding untuk pemula.
Memang, untuk jago ngoding itu butuh waktu. Namun selama Anda melakukan setiap langkahnya dengan sabar dan konsisten, menjadi pengembang hebat bukan lagi sekedar mimpi.
Nah selain paham theory programming, jangan lupa praktik juga. Sehingga, Anda bisa lebih paham penerapannya. Baik untuk membuat website, membangun aplikasi, membuat sistem informasi, dsb.
Untuk membantu praktik ngoding Anda, sebaiknya siapkan sumber daya yang dibutuhkan. Kalau mau mengembangkan website, misalnya sediakan hosting terlebih dahulu.
Kebetulan, Niagahoster memberikan diskon hingga 75% lho untuk produk Hosting Indonesia Unlimited -nya. Anda juga bebas memilih mau shared hosting, cloud hosting, VPS, atau opsi lainnya.
Komentar
Posting Komentar