BERITA PROGRAMMING Mau Belajar Coding Tapi Ga Punya Laptop? Tenang Ini Solusinya!

Mau Belajar Coding Tapi Ga Punya Laptop? Tenang Ini Solusinya!


#programming #coding #tutorial
Mau Belajar Coding Tapi Ga Punya Laptop? Tenang Ini Solusinya!

Sekarang ini banyak tools gratis di internet yang dapat digunakan untuk berbagai macam hal, salah satu contohnya adalah tools code editor online. Dengan code editor online kita bisa menulis code menggunakan hp lo.

Yuk, ikuti program inovatif MAGANG ONLINE untuk berbagai bidang seperti animasi, desain, coding, 3D artwork, art dan illustrasi dan digital music hanya di GAMELAB.ID!

Daftar Isi Artikel

Persiapan

  1. HP / Smartphone
    Pertama yang harus dipersiapkan adalah pastinya Hp / Smartphone, ya judulnya saja menggunakan HP :D.
  2. Koneksi Internet
    Kita akan ngoding menggunakan tools secara online, jadi kita butuh koneksi internet.
  3. Browser
    Tools yang akan kita gunakan akan diakses menggunakan browser, disarankan menggunkan browser Google Chrome.

Setelah melakukan persiapan, maka langkah selanjutnya adalah buka toolsnya menggunakan browser. Kita akan menggunakan CodePen, silahkan buka link berikut : https://codepen.io.

Registrasi Akun Codepen

Sebenarnya kita bisa langsung menulis kode tanpa memiliki akun, tapi kita tidak bisa menyimpan kode yang kita tulis. Oleh sebab itu daftar akun codepen terlebih dahulu. Pilih tombol sign up

Sign Up

Disini kamu bisa pilih metode untuk mendaftar, dari menggunakan akun twitter sampai menggunakan email biasa.

Register

Kamu bisa pilih metode mendaftar sesuai keiginan kamu, disini saya akan menggunakan email biasa. Isikan data form yang ada kemudian klik Submit.

Register With Email Setelah berhasil mendaftar, kita langsung diarahkan ke kode editor. Nah kita bisa langsung membuat web menggunakan editor tersebut.

Editor

Menulis Kode

Pada halaman kode editor memiliki 4 tab yaitu HTML, CSS, JS, dan Result.

HTML

Pada tab html kita bisa menuliskan kode html, kemudian hasil akan bisa dilihat ditab bagian bawah, contoh :

Contoh HTML

Setelah menuliskan <h1>Judul</h1> maka hasil akan terlihat setelah beberapa saat. Mudah bukan ? Kita bisa menuliskan semua element html memasukan gambar video dll.

Contoh HTML 2

CSS

Pada tab css kita bisa memberikan style pada element secara langsung. Contoh saya akan memberikan warna merah pada element h1, pindah ke tab CSS dulu kemudian tulis kodenya :

Contoh CSS

Setelah beberapa saat text Judul akan berubah menjadi merah. Kita bisa menambahkan kode css seperti di PC / Laptop.

JS

Pada tab js kita dapat menuliskan kode javascript untuk membuat fungsi dan membuat web menjadi lebih dinamis. Pindah ke tab JS terlebih dahulu, kemudian tuliskan kode seperti ini :

Contoh JS

Setelah beberapa saat maka akan muncul popup alert.

Result

Secara default tab ini akan aktif, tab ini akan menampilkan hasil dari coding kita. Kita bisa aktif / nonaktifkan tab result.

Tab Result

Kita bisa menyimpan koding kita dengan cara klik tombol di sebelah profile, kemudian pilih tombol save.

Save

Penutup

Setelah berhasil disimpan maka url akan berubah menjadi alamat project kamu saat ini, contoh : https://codepen.io/sonnymichaelsp/pen/jOMoPzo. Kamu bisa share hasilnya ke teman kamu dengan membagikan link tersebut.

 

Demikan cara ngoding menggunakan hp, sangat mudah dan praktis bukan ? Tanpa laptop / pc sekarang kita bisa belajar membuat web, sekarang giliran kamu untuk berkreasi membuat web yang bagus. Yuk share hasil karya kamu !


Sonny Michael Wijaya

Sonny Michael Wijaya

Jumat, 22 Januari 2021