Membuat website adalah suatu hal yang sangat asik dilakukan. Menurutku, setiap orang yang ingin belajar programming, dia harusnya mencicipi untuk membuat web terlebih dahulu. Namun tahukah kamu? Membangun sebuah website tidak hanya cukup dengan belajar bahasanya saja, namun perlu pengetahuan tentang menyiapkan sebuah server, sebuah database, yang tentu membuat bingung pemula yang ingin belajar murni tentang Web.

Jadi bagaimana caranya? Perkenalkan Codepen.io.

Codepen.io ialah situs untuk menulis dan berbagi front-end web code. Ia bisa jadi sarana latihan, bisa jadi sebuah koleksi, atau bisa jadi untuk demonstrasi web. Cara penggunaannya itu sederhana, anda tinggal mendaftar lalu membuat sebuah Pen baru. Setiap pen anda akan disimpan didalam dashboard anda dan muncul dalam profil anda.

Anda bisa melihat fitur-fitur Codepen disini

Dari situ, anda disuguhkan tiga panel, yakni HTML, CSS, JS.

– Coba Codepen Sekarang –

HTML

HTML adalah kerangka web. HTML dapat ditulis layaknya tulisan biasa yang diapit oleh HTML Tags.

Contoh beberapa elemen HTML:

Resources:

Konsep dan Istilah dasar:

CSS

CSS adalah dekorasi web. CSS ditulis untuk menambah atribut dekorasi setiap elemen yang dituju. Bisa juga menggunakan HTML class atau id untuk menunjuk elemen yang lebih spesifik.

Contoh beberapa elemen dan atribut dekorasi:

Resources:

Konsep dan Istilah dasar:

JS

JS adalah interaksi web. JS adalah bahasa programming ditulis khusus untuk menambah interaksi didalam web.

Menjadikannya satu HTML

Tiga file tersebut bisa dijadikan satu HTML. Bagaimana formatnya?

<!DOCTYPE html> <!-- HTML Doctype -->
<html lang="en">  <!-- HTML -->

<head>  <!-- HEAD -->
  <meta charset="UTF-8"> <!-- Tipe Encoding (UTF-8 adalah Standard sekarang) -->
  <title>Judul Dokumen</title> <!-- Judul -->

  <!-- Link ke External CSS -->
  <link rel="stylesheet" href="https://link.to/external/file.css">
  <style>
	/* CSS ditaruh disini */
  </style>
</head>

<body> <!-- BODY -->

  Konten HTML Berada disini <!-- Konten HTML diisi disini -->

  <!-- HTML merekomendasikan Javascript untuk ditaruh dibawah Body -->

  <!-- Link ke External JS -->
  <script src="https://link.to/external/file.jss"></script>
  <script>
    /* JS ditaruh disini */
  </script>

</body>
</html>

Codepen mempunyai definisi sendiri untuk menyatukan HTML/CSS/JS: Lihat disini.

Format Tambahan

Tahukah kamu bagaimana Web developers membangun sebuah website? Jika kau telusuri baik-baik, 3 bahasa itu saja tidak akan cukup. Termasuk blog ini, anda membutuhkan bahasa lebih dari sekedar HTML/CSS/JS.

Markdown

Markdown adalah HTML Prepocessor yang paling populer. Ia adalah cara populer untuk menulis artikel didalam HTML. Sering digunakan jika anda menulis di GitHub, Wordpress, Jekyll, dan beberapa site generator lainnya.

Ingat, bahwa browser tidak paham bahasa Markdown, sehingga perlu untuk di-transpile menjadi HTML. Anda bisa mencoba Markdown dengan Codepen.

Referensi:

Sass/SCSS

Sass (dan SCSS) adalah CSS Processor yang paling populer. Ia memfasilitasi CSS dengan fitur-fitur yang tidak dipunyai CSS mulai dari nesting, mixins, partial, dan masih banyak lainnya. Jika kamu menjumpai CSS yang panjang dan ribet, SCSS bisa menjadi solusi alternatif.

Ingat sekali lagi, bahwa browser tidak paham bahasa SCSS, sehingga perlu untuk di-transpile menjadi CSS. Anda bisa mencoba SCSS dengan Codepen.

Referensi:

PHP

Didalam membangun sebuah web, ada dua jenis scripting. Javascript adalah Client-side scripting, sedangkan PHP adalah Server-side scripting. Bedanya ialah eksekusi PHP terletak pada Server, sedangkan JavaScript terletak pada browser (client). Karena PHP terletak pada server, anda perlu menyiapkan sebuah hosting yang bisa memproses PHP, anda tak bisa menjalankan PHP pada hosting yang menyediakan web statis (seperti GitHub Pages atau Codepen).

Meskipun demikian, anda tetap bisa menjalankan PHP dalam localhost, menggunakan XAMPP atau aplikasi lain sejenisnya.

Referensi:

Penutup

Bagaimana? Sudah tahu gambaran apa saja komponen web?

Jika anda sudah siap, anda bisa lanjut untuk menyiapkan website pertama anda.