Halo teman-teman 👋
Kalau ngomongin dunia frontend, pasti sering dengar nama Tailwind CSS. Framework ini memang lagi hype banget sejak pertama kali dirilis tahun 2019.

Kalau biasanya kita pakai Bootstrap yang kasih komponen siap pakai kayak button atau card, Tailwind beda. Dia kasih utility class kecil-kecil yang bisa kita kombinasikan sendiri. Jadi desain lebih fleksibel dan kita bisa ngoding lebih cepat tanpa ribet nulis CSS panjang.

Tapi sebelum nyemplung ke Tailwind, pastikan dulu kamu ngerti dasar HTML dan CSS. Soalnya Tailwind itu bukan pengganti CSS, tapi alat buat bikin styling jadi jauh lebih gampang.

Keuntungan Menggunakan TaiwindCSS

Kenapa banyak perusahaan dan developer memilih Tailwind CSS? Berikut empat alasan utamanya:

1. Efisiensi
   
   Dengan Tailwind, developer bisa bikin desain lebih cepat tanpa harus nulis CSS manual. Hasilnya? Waktu kerja jauh lebih hemat..
   
   
2. Penyesuaian
   
   Tailwind punya banyak class bawaan untuk menyesuaikan desain sesuai kebutuhan. Kalau masih kurang, developer juga bisa bikin aturan sendiri. Jadi fleksibel tanpa batasan.
   
   
3. Performa
   
   Tailwind otomatis membuang CSS yang tidak terpakai (code elimination). Alhasil, file CSS jadi lebih ringan dan website lebih cepat di-load di browser.
   
   
4. Komunitas
   
   Komunitas Tailwind sangat aktif. Mereka rutin berbagi plugin, contoh, dan update. Itu artinya framework ini selalu berkembang dan terjaga kualitasnya.
   
   

Setup Tailwind CSS di Vite + React

1. Instal Node.js

Langkah pertama, pastikan Node.js sudah terpasang di komputer. Jika belum, unduh gratis di nodejs.org dan ikuti proses instalasinya.

Untuk mengecek, buka terminal lalu ketik:

Jika muncul nomor versi, berarti Node.js sudah terinstal. Kalau tidak ada output, artinya Node.js belum terpasang.

2. Membuat Project React dengan Vite

Setelah Node.js siap, buka terminal dan pindah ke folder tempat project akan dibuat. Misalnya:

Kemudian jalankan perintah:

npm create vite@latest wpdev-tailwindcss -- --template react

Ganti wpdev-tailwindcss dengan nama project sesuai keinginan.

Masuk ke folder project:

cd wpdev-tailwindcss

Lalu install dependency awal:

npm install

3. Install Tailwind CSS

Di dalam folder project, jalankan:

npm install -D tailwindcss postcss autoprefixer

(Tidak perlu lagi postcss dan autoprefixer di Tailwind v4, karena sudah built-in).

4. Konfigurasi File CSS

Buka file src/index.css.

Hapus semua isinya, lalu ganti dengan:

@import tailwindcss;

Simpan perubahan.

5. Jalankan Project

Sekarang jalankan server dengan:

npm run dev

Vite akan menampilkan link, biasanya:

Tekan Ctrl + klik pada link tersebut untuk membuka project di browser. Jika berhasil, project React + Tailwind sudah siap digunakan.

Kesimpulan

Dalam artikel ini, kita sudah:

1. Menginstal Node.js.
2. Membuat project React menggunakan Vite.
3. Menginstal dan menghubungkan Tailwind CSS.
4. Menjalankan project di browser.

Dengan setup ini, kita sudah siap membuat website modern dengan React dan Tailwind CSS. Pada artikel selanjutnya, kita akan membahas class penting di Tailwind serta cara menyesuaikan desain sesuai kebutuhan.

Terima kasih sudah membaca 🙏

Halo teman-teman semuanya, pada artikel kali ini, saya ingin melanjutkan berbagi pengetahuan seputar DevOps yang pada artikel sebelumnya telah membahas seputar pengertian, alasan, sejarah dan kegunaan dari Bash Shell.

Menyiapkan Bash

Sebagian besar sistem oprasi Unix/Linux sudah dilengkapi oleh bash yang sudah terinstal. Untuk mengecek apakah bash sudah terinstall atau belum, caranya tinggal open terminal dan ketik perintah berikut :

[user@localhost] $ bash --version

Jika bash belum terinstall, kita bisa menginstallnya menggunakan package manager, sebagai contoh seperti perintah berikut :

[user@localhost] $ sudo apt-get install bash

Pada sistem oprasi macOs kita bisa menginstall bash menggunakan Homebrew, seperti perintah berikut :

[user@localhost] $ brew install bash

Pada sistem oprasi Windows kita bisa menginstall bash menggukan WSL (Windows Subsystem For Linux) untuk menjalankan Linux atau bisa juga hanya menggunakan Git Bash.

Menulis Script .sh

Kita juga dapat menulis script (kumpulan dari beberapa perintah) didalam file berekstensi .sh, berikut contoh implamentasi simple script yang dapat dituliskan kedalam file .sh :

Simpan file tersebut dan beri nama hello.sh kemudian kita jalankan menggunakan perintah ( bash hello.sh ) atau double-click pada file, maka hasilnya seperti berikut :

 #!/bin/bash
echo "Hello, Bash!"

Oh ya barangkali teman-teman sedang mencari jasa pembuatan website, atau sedang mencari templates acara pernikahan, company profile, atau e-commerce bisa kunjungi link berikut : https://wpdev.yusufhamdani.id

Kesimpulan

Dengan memahami cara setting-up (pengecekan, instalasi, dan menjalankan perintah melalui file), sekarang kita bisa melanjutkan kepada pembahasan berikutnya mengenai basic commands yang akan ditulis di artikel selanjutnya, terima kasih.

Halo teman-teman, pada artikel kali ini saya ingin berbagi pengetahuan seputar DevOps dimulai dari Belajar Bash. Semoga dapat membantu dan menambah wawasan bagi kita.

Apa itu Bash ?

Bash (Bourne-Again SHell) merupakan bahasa scripting dan command-interpreter. Jelas Bash digunakan untuk menjalankan perintah dalam sistem berbasis Unix/Linux. Bash juga merupakan default shell pada sistem oprasi Linux dan macOS.

Mengapa Belajar Bash ?

Bash sangat mumpuni bagi para developers dan system administrators, memahami dan bisa mengoprasikannya merupakan kewajiban dan penting untuk bekerja pada sistem basis Unix/Linux.

Shell vs Bash Shell

“Shell” adalah program yang menyediakan suatu basis perintah atau command-line interface guna berinteraksi dengan sistem oprasi. Berperan sebagai penerjemah atau interpreter perintah pengguna agar dimengerti dan dieksekusi oleh sistem. Ada banyak jenis dari Shell, masing-masing punya fitur dan syntax sendiri.

Sedangkan Bash Shell merupakan tipe spesifik dari Shell itu sendiri, karna sangat populer Bash seringkali dianggap sebagai Shell oleh kebanyakan orang. Artikel kali ini, akan membahas seputar cara menggunakan Bash.

Sejarah Bash Shell

Bash dikembangkan pada tahun 1989 oleh Brian Fox. Bash diciptakan sebagai pengganti Bourne Shell versi gratis. Dengan cepat Bash menjadi standar untuk GNU dan banyak sistem Linux.

Seiring berjalannya waktu, Bash menambahkan beberapa fitur dari Shell yang lain seperti Korn Shell (ksh) dan C Shell (csh) dan menjadi alat serbaguna bagi pengguna command-line interface.

Penggunaan Bash

Secara umum bash sangat berguna untuk :

• Automate Taks
• System Oprations
• Process Data
• Build Automation
• Testing
• Deployment
• Data processing and manipulations

Kesimpulan

Dengan mempelajari Bash Shell kita mempunyai pijakan dasar ke tahap selanjutnya sebagai DevOps Engineer atau Developers Engineer.

Di artikel berikutnya, kita akan belajar tentang setting-up Bash Shell agar bisa langsung mempraktikan commands bash dan mengetahui kegunaan dari perintah yang kita jalankan.

Di dunia nyata, setiap tulisan punya struktur: ada judul, paragraf, dan kadang butuh baris baru.
Begitu juga di HTML. Supaya teks kita terbaca rapi di browser, kita perlu tahu heading, paragraf, dan line break.

Yuk kita bahas satu-satu dengan contoh nyata 👇

1. Heading (Judul)

Heading dipakai untuk membuat judul atau subjudul di halaman web.
HTML menyediakan enam level heading:

<h1>Judul Utama (H1)</h1>
<h2>Sub Judul (H2)</h2>
<h3>Sub Judul Tingkat 3 (H3)</h3>
<h4>Sub Judul Tingkat 4 (H4)</h4>
<h5>Sub Judul Tingkat 5 (H5)</h5>
<h6>Sub Judul Tingkat 6 (H6)</h6>

🔑 Tips Penting:

• Gunakan <h1> hanya sekali untuk judul utama.
• Gunakan <h2>–<h6> untuk sub judul sesuai hierarki.
• Heading bukan untuk memperbesar teks semata, tapi untuk struktur dan SEO.

2. Paragraf

Paragraf di HTML dibuat dengan tag <p>.
Contoh:

<p>Ini adalah paragraf pertama.</p>
<p>Ini paragraf kedua. Biasanya untuk memisahkan ide atau penjelasan berbeda.</p>

📌 Browser akan otomatis memberi jarak antar paragraf, jadi tidak perlu menambahkan <br> untuk pindah ke paragraf baru.

3. Line Break (Pindah Baris)

Kadang, kita ingin pindah ke baris baru tanpa memulai paragraf baru.
Gunakan <br>.

Contoh:

<p>
    Halo, ini baris pertama.<br>
    Dan ini baris kedua.
</p>

Hasil di browser:

Halo, ini baris pertama.
Dan ini baris kedua.

4. Latihan Praktis

Coba ketik kode berikut di editor HTML kamu:

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Heading, Paragraf, dan Line Break</title>
</head>
<body>
    <h1>Belajar HTML Dasar</h1>
    <h2>Heading</h2>
    <p>Heading digunakan untuk membuat judul dan subjudul.</p>

    <h2>Paragraf</h2>
    <p>Paragraf digunakan untuk menulis teks lebih panjang.</p>
    <p>Browser otomatis memberi jarak antar paragraf.</p>

    <h2>Line Break</h2>
    <p>
        Ini baris pertama.<br>
        Ini baris kedua.<br>
        Dan ini baris ketiga.
    </p>
</body>
</html>

Lalu buka di browser → kamu akan melihat judul besar, paragraf-paragraf rapi, dan contoh line break.

5. Kesimpulan

• Heading (<h1>–<h6>) → untuk judul dan subjudul, penting juga untuk SEO.
• Paragraf (<p>) → untuk menulis teks yang lebih panjang.
• Line Break (<br>) → untuk memindahkan teks ke baris baru tanpa paragraf baru.

Dengan ini, halaman web-mu sudah lebih terstruktur dan enak dibaca 👌.

Kalau di artikel sebelumnya kita sudah kenalan dengan apa itu HTML, sekarang saatnya melangkah ke hal yang paling sering ditemui saat menulis kode HTML: Tag dan Elemen.
Tenang, kita bahas pelan-pelan biar gampang dipahami 👌.

Apa Itu Tag ?

Bayangkan kamu lagi menulis surat.
Kamu pasti butuh pembuka (“Halo…”) dan penutup (“Salam hangat…”).

Nah, HTML juga punya cara komunikasi yang mirip: menggunakan tag.

• Tag pembuka → <p>
• Tag penutup → </p>

Contoh:

<p>Halo, saya lagi belajar HTML!</p>

Tag ini memberi tahu browser:
“Eh, teks di dalam sini itu paragraf, ya.”

Apa Itu Elemen ?

Kalau tag itu cuma pembuka dan penutupnya, maka elemen adalah keseluruhan “paketnya”.
Mulai dari tag pembuka, isi/konten, sampai tag penutup.

Contoh elemen paragraf:

<p>Ini adalah satu elemen paragraf lengkap.</p>

👉 Jadi elemen = tag pembuka + isi + tag penutup

Tag Tanpa Penutup (Self-Closing Tag)

Tidak semua tag butuh penutup, lho.
Ada beberapa yang cukup self-closing, alias menutup dirinya sendiri.

Contoh paling terkenal:

<br>
<img src="gambar.png" alt="Deskripsi gambar">

• <br> → buat baris baru (enter).
• <img> → untuk menampilkan gambar.

Ilustrasi Singkat

Bayangkan kamu punya kotak:

• Tag pembuka = tutup kotak bagian atas
• Isi = barang yang ada di dalam kotak
• Tag penutup = tutup kotak bagian bawah

Kalau salah satu tutupnya hilang? Barang bisa berantakan, dan browser juga bisa bingung membaca kode kita.

Yuk, Latihan Kecil 🚀

Coba ketik kode berikut di editor HTML kamu:

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Tag dan Elemen</title>
</head>
<body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
    <br>
    <img src="https://via.placeholder.com/150" alt="Contoh Gambar">
</body>
</html>

Lalu buka di browser.
Kamu akan melihat judul besar, sebuah paragraf, baris kosong, dan gambar sederhana.

Kesimpulan

• Tag → penanda pembuka & penutup.
• Elemen → tag pembuka + isi + tag penutup.
• Ada juga self-closing tag yang tidak butuh penutup.

Dengan memahami ini, kamu sudah selangkah lebih dekat jadi jagoan HTML 💪.

Halo teman-teman semuanya, di seri pertama ini kita akan berkenalan dengan HTML, fondasi utama dari semua halaman web. Jika kamu baru mulai belajar web development, maka HTML adalah tempat yang tepat untuk memulai.

Apa Itu HTML?

HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk membuat struktur halaman web. HTML bukan bahasa pemrograman, melainkan bahasa yang digunakan untuk menandai elemen-elemen dalam dokumen agar bisa ditampilkan di web browser.

Dengan HTML, kita bisa menentukan bagian-bagian penting dalam sebuah halaman seperti heading, paragraf, gambar, link, tabel, form, dan masih banyak lagi.

Kenapa Harus Belajar HTML?

Karena tanpa HTML, tidak ada halaman web. Semua website, dari blog sederhana hingga aplikasi web kompleks, dimulai dari struktur HTML. Beberapa alasan kenapa HTML penting:

• Merupakan fondasi utama dari web
• Digunakan bersama dengan CSS dan JavaScript
• Sangat mudah dipelajari, bahkan untuk pemula
• Didukung oleh semua browser

Langkah 1 – Struktur Dasar HTML

Berikut adalah contoh struktur dasar dari sebuah dokumen HTML:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Belajar HTML Dasar</title>
</head>
<body>
  <h1>Halo, Dunia!</h1>
  <p>Ini adalah paragraf pertama dalam HTML.</p>
</body>
</html>

Mari kita bahas bagian-bagian penting dari kode di atas:

• <!DOCTYPE html>: Menandakan bahwa ini adalah dokumen HTML5.
• <html>: Elemen root dari seluruh dokumen.
• <head>: Bagian ini berisi informasi tentang halaman, seperti title, charset, dan meta tag.
• <title>: Judul halaman yang akan muncul di tab browser.
• <body>: Di sinilah semua konten halaman yang terlihat akan ditulis, seperti teks, gambar, dan lain-lain.
• <h1> dan <p>: Tag heading dan paragraf untuk menampilkan teks di layar.

Langkah 2 – Coba di Browser

Kita bisa langsung menulis kode di atas menggunakan text editor seperti VSCode, lalu simpan file dengan ekstensi .html, misalnya: index.html. Setelah itu, buka file tersebut di browser dan kita akan melihat tulisan “Halo, Dunia!” muncul di layar.

Kesimpulan

Di artikel pertama ini, kita sudah mengenal apa itu HTML dan melihat struktur dasar dari sebuah halaman HTML. Cukup dengan beberapa baris kode, kita sudah bisa membuat halaman web pertama kita. Selanjutnya, kita akan belajar tentang tag dan elemen HTML yang lebih spesifik.