Saatnya Mempercantik Web: Mengenal CSS, Selector, Warna, Typography, dan Box Model

Pada Pertemuan 1 dan 2 kita sudah bisa membuat halaman HTML yang cukup lengkap. Kita sudah mengenal struktur halaman, semantic HTML, list, tabel, dan form. Namun ada satu masalah yang masih terlihat jelas: tampilannya masih polos.

Di Pertemuan 3 kita mulai mengenal CSS. CSS digunakan untuk mengatur tampilan halaman web, mulai dari warna, jenis huruf, ukuran teks, jarak, border, background, sampai bentuk sebuah card.

Materi tetap dibagi menjadi 5 bagian utama dan setiap bagian ditutup dengan praktik coding. Jadi mahasiswa tidak hanya melihat contoh, tetapi langsung mengubah tampilan halaman yang sudah dibuat.

Target Pembelajaran

Setelah menyelesaikan pertemuan ini, mahasiswa diharapkan mampu:

Memahami fungsi CSS dalam pengembangan website.
Membedakan inline CSS, internal CSS, dan external CSS.
Menghubungkan file HTML dengan file CSS.
Menggunakan selector element, class, dan id.
Memahami konsep dasar cascade dan prioritas sederhana.
Mengatur warna teks dan background.
Menggunakan satuan warna seperti nama warna, HEX, dan RGB.
Mengatur typography: font, ukuran teks, ketebalan, tinggi baris, dan perataan.
Memahami CSS Box Model.
Menggunakan margin, padding, border, width, dan height.
Membuat Profile Card sederhana sebagai mini project.

Materi 1 — Mengenal CSS dan Cara Menghubungkannya ke HTML

CSS merupakan singkatan dari Cascading Style Sheets. Jika HTML digunakan untuk membentuk struktur, maka CSS digunakan untuk mengatur bagaimana struktur tersebut terlihat.

Kita bisa memakai analogi sederhana:

HTML = kerangka bangunan.
CSS = cat, ukuran ruangan, dekorasi, jarak, dan tampilan.

Tanpa CSS, halaman tetap bisa digunakan, tetapi tampilannya sangat sederhana.

Tiga Cara Menulis CSS

1. Inline CSS — CSS ditulis langsung pada elemen HTML.

Contoh Inline CSS

<h1 style="color: blue;">
    Belajar CSS
</h1>

Inline CSS cocok untuk contoh sangat kecil, tetapi kurang baik jika digunakan terlalu banyak karena kode HTML menjadi sulit dirawat.

2. Internal CSS — CSS ditulis di dalam elemen <style> pada bagian head.

Contoh Internal CSS

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Belajar CSS</title>

    <style>
        h1 {
            color: blue;
        }
    </style>
</head>
<body>

    <h1>Belajar CSS</h1>

</body>
</html>

Internal CSS lebih rapi dibanding inline CSS, tetapi masih berada di file HTML yang sama.

3. External CSS — CSS dipisahkan ke file sendiri. Cara ini paling cocok untuk project yang mulai berkembang.

Buat struktur project seperti berikut:

Struktur Folder Project

pertemuan-03/
|
+-- index.html
|
+-- css/
    |
    +-- style.css

Di dalam file index.html, hubungkan file CSS menggunakan:

Menghubungkan HTML ke CSS

<link rel="stylesheet" href="css/style.css">

Elemen link biasanya ditempatkan di dalam head.

rel="stylesheet" memberi tahu browser bahwa file tersebut adalah stylesheet.
href="css/style.css" menunjukkan lokasi file CSS.

Coding 1 — CSS Pertama Kita

Buat file index.html:

index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS Pertama Saya</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <h1>Selamat Datang</h1>

    <p>
        Ini adalah halaman HTML pertama saya yang menggunakan CSS.
    </p>

</body>
</html>

css/style.css

color:#800000;">body{
    background-color: #f4f4f4;
}

color:#800000;">h1{
    color: #1d4ed8;
}

color:#800000;">p{
    color: #374151;
}

Jika CSS Tidak Terbaca
Jika tampilan tidak berubah, periksa kembali lokasi file style.css dan nilai href pada elemen link.

Target Coding 1: mahasiswa berhasil menghubungkan file HTML dengan file CSS eksternal dan melihat perubahan tampilan di browser.

Materi 2 — Memahami Selector: Element, Class, dan ID

CSS perlu mengetahui elemen mana yang ingin diubah. Untuk itu kita menggunakan selector.

1. Element Selector

Selector ini langsung menggunakan nama tag HTML.

Element Selector

color:#800000;">h1{
    color: red;
}

color:#800000;">p{
    color: gray;
}

Semua elemen h1 akan terkena aturan pertama, dan semua elemen p akan terkena aturan kedua.

2. Class Selector

Class digunakan ketika kita ingin memberikan style yang sama pada beberapa elemen tertentu.

HTML dengan Class

<p class="info">
    Informasi pertama.
</p>

<p class="info">
    Informasi kedua.
</p>

CSS untuk Class

color:#800000;">.info{
    color: #2563eb;
    font-weight: bold;
}

Tanda titik . digunakan untuk memanggil class.

3. ID Selector

ID biasanya digunakan untuk satu elemen yang memiliki identitas khusus.

HTML dengan ID

<h1 id="judul-utama">
    Profil Mahasiswa
</h1>

CSS untuk ID

color:#800000;">#judul-utama{
    color: #7c3aed;
}

Tanda pagar # digunakan untuk memanggil ID.

Perbedaan Sederhana Class dan ID

Jenis	Contoh HTML	Contoh CSS	Penggunaan Umum
Element	<p>	p { }	Semua elemen sejenis
Class	class="card"	.card { }	Dapat digunakan berulang
ID	id="judul"	#judul { }	Identitas khusus satu elemen

Cascade secara Sederhana

Kata Cascading pada CSS berarti aturan style dapat saling bertemu dan browser perlu menentukan aturan mana yang dipakai. Untuk tahap awal, cukup pahami bahwa selector yang lebih spesifik biasanya memiliki prioritas lebih tinggi.

Contoh Prioritas Sederhana

color:#800000;">p{
    color: black;
}

color:#800000;">.info{
    color: blue;
}

color:#800000;">#pesan-penting{
    color: red;
}

Jika satu paragraf memiliki class info dan ID pesan-penting, maka aturan ID biasanya lebih kuat.

Coding 2 — Membuat Bagian Informasi dengan Class dan ID

HTML

<section class="profil">
    <h1 id="judul-utama">
        Profil Mahasiswa
    </h1>

    <p class="info">
        Nama: Andi Saputra
    </p>

    <p class="info">
        Program Studi: Teknik Informatika
    </p>

    <p class="pesan">
        Selamat datang di halaman profil.
    </p>
</section>

CSS

color:#800000;">#judul-utama{
    color: #1d4ed8;
}

color:#800000;">.info{
    color: #374151;
    font-weight: bold;
}

color:#800000;">.pesan{
    color: #047857;
}

Kebiasaan Baik
Gunakan class untuk style yang mungkin dipakai berulang. Gunakan ID jika memang elemennya memiliki identitas khusus. Jangan membuat semua elemen memakai ID hanya karena bisa.

Target Coding 2: mahasiswa mampu memilih selector yang tepat dan memahami perbedaan element, class, dan ID.

Materi 3 — Mengatur Warna dan Typography

Setelah selector dipahami, kita mulai mengatur tampilan teks dan warna.

Mengatur Warna Teks

Warna Teks

color:#800000;">h1{
    color: blue;
}

Mengatur Background

Warna Background

color:#800000;">body{
    background-color: #f3f4f6;
}

Cara Menulis Warna

CSS mendukung beberapa cara untuk menulis warna.

Nama Warna

color:#800000;">h1{
    color: blue;
}

HEX

color:#800000;">h1{
    color: #2563eb;
}

RGB

color:#800000;">h1{
    color: rgb(37, 99, 235);
}

Di project nyata, format HEX dan RGB sering digunakan karena memberikan pilihan warna yang lebih luas.

Typography

Typography membahas tampilan teks. Beberapa property yang sering dipakai:

font-family — jenis huruf.
font-size — ukuran huruf.
font-weight — ketebalan huruf.
line-height — jarak antarbaris.
text-align — posisi teks.

Contoh Typography

color:#800000;">body{
    font-family: Arial, sans-serif;
}

color:#800000;">h1{
    font-size: 32px;
    font-weight: 700;
    text-align: center;
}

color:#800000;">p{
    font-size: 16px;
    line-height: 1.7;
}

Coding 3 — Membuat Profil Lebih Nyaman Dibaca

HTML

<section class="profil">
    <h1>Profil Mahasiswa</h1>

    <p class="subjudul">
        Mahasiswa Teknik Informatika
    </p>

    <p>
        Saya sedang mempelajari HTML dan CSS
        untuk membangun tampilan website yang
        lebih rapi dan mudah digunakan.
    </p>
</section>

CSS

color:#800000;">body{
    font-family: Arial, sans-serif;
    background-color: #f3f4f6;
    color: #1f2937;
}

color:#800000;">.profil h1{
    color: #1d4ed8;
    font-size: 32px;
    text-align: center;
}

color:#800000;">.subjudul{
    color: #6b7280;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

color:#800000;">.profil p{
    font-size: 16px;
    line-height: 1.7;
}

Prinsip Desain Dasar
Jangan terlalu banyak menggunakan jenis font dan warna dalam satu halaman. Tampilan yang sederhana dan konsisten biasanya lebih mudah dibaca.

Target Coding 3: mahasiswa mampu mengatur warna dan typography agar halaman lebih nyaman dibaca.

Materi 4 — Memahami CSS Box Model

Hampir semua elemen HTML dapat dibayangkan sebagai sebuah kotak. CSS menyebut konsep ini sebagai Box Model.

Susunannya adalah:

Ilustrasi CSS Box Model

Margin
|
+-- Border
    |
    +-- Padding
        |
        +-- Content

Mari kita pahami satu per satu:

Content — isi elemen, misalnya teks atau gambar.
Padding — jarak antara content dan border.
Border — garis di sekeliling elemen.
Margin — jarak antara elemen dengan elemen lain.

Width dan Height

Mengatur Ukuran

color:#800000;">.card{
    width: 320px;
    min-height: 200px;
}

Padding

Mengatur Padding

color:#800000;">.card{
    padding: 20px;
}

Border

Mengatur Border

color:#800000;">.card{
    border: 1px solid #d1d5db;
}

Margin

Mengatur Margin

color:#800000;">.card{
    margin: 30px auto;
}

Nilai auto pada kiri dan kanan sering digunakan untuk membantu meletakkan elemen di tengah jika lebarnya sudah ditentukan.

Border Radius

Membuat Sudut Membulat

color:#800000;">.card{
    border-radius: 12px;
}

Box Shadow

Membuat Bayangan

color:#800000;">.card{
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

box-sizing

Property box-sizing: border-box; sangat berguna agar width lebih mudah dikontrol karena padding dan border ikut dihitung ke dalam ukuran elemen.

Menggunakan border-box

color:#800000;">*{
    box-sizing: border-box;
}

Coding 4 — Membuat Card Sederhana

HTML Card

<div class="card">
    <h2>Andi Saputra</h2>

    <p>
        Teknik Informatika
    </p>

    <p>
        Sedang mempelajari Web Development.
    </p>
</div>

CSS Card

color:#800000;">*{
    box-sizing: border-box;
}

color:#800000;">body{
    font-family: Arial, sans-serif;
    background-color: #f3f4f6;
}

color:#800000;">.card{
    width: 320px;
    padding: 24px;
    margin: 40px auto;

    background-color: white;

    border: 1px solid #d1d5db;
    border-radius: 12px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

color:#800000;">.card h2{
    margin-top: 0;
    color: #1d4ed8;
}

Target Coding 4: mahasiswa memahami hubungan margin, border, padding, dan content serta mampu membuat card sederhana.

Materi 5 — Mini Project: Profile Card Mahasiswa

Pada bagian terakhir kita akan menggabungkan semua materi hari ini:

External CSS.
Selector.
Class dan ID.
Warna.
Typography.
Background.
Box Model.
Border radius.
Box shadow.

Kita akan membuat Profile Card Mahasiswa dari halaman yang sebelumnya masih polos.

Struktur Project

Struktur Folder

profile-card/
|
+-- index.html
|
+-- css/
|   |
|   +-- style.css
|
+-- images/
    |
    +-- profil.jpg

Coding 5 — Profile Card Mahasiswa Lengkap

index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Profile Card Mahasiswa</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <main class="container">

        <section class="profile-card">

            <img
                class="profile-photo"
                src="images/profil.jpg"
                alt="Foto profil mahasiswa"
            >

            <h1 id="nama-mahasiswa">
                Andi Saputra
            </h1>

            <p class="program-studi">
                Teknik Informatika
            </p>

            <hr>

            <p class="deskripsi">
                Saya sedang mempelajari HTML dan CSS
                sebagai dasar untuk membangun aplikasi web.
            </p>

            <p class="skill">
                HTML • CSS • Web Development
            </p>

            <a
                class="profile-link"
                href="https://github.com/"
                target="_blank"
                rel="noopener noreferrer"
            >
                Lihat GitHub
            </a>

        </section>

    </main>

</body>
</html>

css/style.css

color:#800000;">*{
    box-sizing: border-box;
}

color:#800000;">body{
    margin: 0;

    font-family: Arial, sans-serif;

    background-color: #f3f4f6;

    color: #1f2937;
}

color:#800000;">.container{
    width: 100%;
    padding: 40px 20px;
}

color:#800000;">.profile-card{
    width: 360px;
    max-width: 100%;

    margin: 0 auto;
    padding: 28px;

    background-color: #ffffff;

    border: 1px solid #d1d5db;
    border-radius: 16px;

    text-align: center;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

color:#800000;">.profile-photo{
    width: 120px;
    height: 120px;

    border-radius: 50%;
}

color:#800000;">#nama-mahasiswa{
    margin-top: 18px;
    margin-bottom: 6px;

    color: #1d4ed8;

    font-size: 28px;
}

color:#800000;">.program-studi{
    margin-top: 0;

    color: #6b7280;

    font-size: 16px;
    font-weight: bold;
}

color:#800000;">.profile-card hr{
    margin: 22px 0;

    border: 0;
    border-top: 1px solid #e5e7eb;
}

color:#800000;">.deskripsi{
    font-size: 15px;
    line-height: 1.7;
}

color:#800000;">.skill{
    color: #047857;

    font-size: 14px;
    font-weight: bold;
}

color:#800000;">.profile-link{
    display: inline-block;

    margin-top: 12px;
    padding: 10px 18px;

    background-color: #1d4ed8;
    color: white;

    text-decoration: none;

    border-radius: 8px;
}

Yang Perlu Diperhatikan

Pada bagian ini kita mulai melihat bahwa HTML dan CSS memiliki tugas yang berbeda. HTML tetap berisi informasi dan struktur. CSS menangani tampilan.

Misalnya:

class="profile-card" berada di HTML.
.profile-card { ... } berada di CSS.

Keduanya terhubung melalui nama class yang sama.

Belajar CSS dengan Eksperimen
Jika ada property CSS yang belum sepenuhnya dipahami, jangan hanya menghafalnya. Ubah nilainya lalu refresh browser. Misalnya ubah padding: 28px menjadi padding: 5px dan lihat perbedaannya.

Target Coding 5: mahasiswa mampu membuat Profile Card sederhana dengan HTML dan CSS yang dipisahkan ke file berbeda.

Debugging Challenge

Perhatikan kode berikut. Halamannya mungkin tidak tampil sesuai harapan. Temukan kesalahannya lalu perbaiki.

HTML yang Diberikan

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Profile Card</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="card">
        <h1 id="nama">Andi Saputra</h1>
        <p class="prodi">Teknik Informatika</p>
    </div>

</body>
</html>

CSS yang Bermasalah

color:#800000;">body{
    background-colour: #f3f4f6;
}

color:#800000;">card{
    width: 300px;
    padding 20px;
    margin: 30px auto;
    background-color: white;
}

color:#800000;">#Nama{
    color: blue;
}

color:#800000;">.prodi{
    font-size: 16;
}

Periksa beberapa hal berikut:

Apakah lokasi file CSS sudah sesuai dengan struktur folder?
Apakah property background-color ditulis dengan benar?
Apakah selector class membutuhkan tanda titik?
Apakah property padding memiliki tanda titik dua?
Apakah ID nama sama persis dengan selector yang digunakan?
Apakah font-size menggunakan satuan?

Salah Satu Versi Perbaikannya

CSS Setelah Diperbaiki

color:#800000;">body{
    background-color: #f3f4f6;
}

color:#800000;">.card{
    width: 300px;
    padding: 20px;
    margin: 30px auto;
    background-color: white;
}

color:#800000;">#nama{
    color: blue;
}

color:#800000;">.prodi{
    font-size: 16px;
}

Challenge Pertemuan 3

Buat sebuah Kartu Profil Developer menggunakan data Anda sendiri. Jangan menyalin seluruh desain contoh. Gunakan kreativitas masing-masing.

Minimal memiliki:

Foto profil.
Nama.
Program studi.
Deskripsi singkat.
Minimal tiga skill.
Satu link menuju GitHub, LinkedIn, atau portfolio.

CSS minimal menggunakan:

External CSS.
Element selector.
Class selector.
Minimal satu ID selector.
color.
background-color.
font-family.
font-size.
font-weight.
padding.
margin.
border.
border-radius.
box-shadow.

Tidak perlu menggunakan Flexbox atau Grid dulu. Materi layout modern akan dibahas pada Pertemuan 4.

Evaluasi Pemahaman

Apa fungsi CSS dalam pengembangan website?
Apa perbedaan HTML dan CSS?
Apa perbedaan inline CSS, internal CSS, dan external CSS?
Mengapa external CSS lebih cocok untuk project yang mulai besar?
Apa fungsi elemen link pada HTML?
Apa yang dimaksud dengan selector?
Apa perbedaan element selector, class selector, dan ID selector?
Simbol apa yang digunakan untuk class selector?
Simbol apa yang digunakan untuk ID selector?
Apa fungsi property color?
Apa fungsi background-color?
Sebutkan tiga cara menulis warna pada CSS.
Apa fungsi font-family?
Apa fungsi font-size?
Apa fungsi font-weight?
Apa fungsi line-height?
Apa yang dimaksud CSS Box Model?
Apa perbedaan margin dan padding?
Apa fungsi border?
Mengapa box-sizing: border-box; sering digunakan?

Checklist Kompetensi Pertemuan 3

Sebelum melanjutkan ke Pertemuan 4, mahasiswa seharusnya sudah mampu:

Membuat file CSS terpisah.
Menghubungkan HTML dengan external CSS.
Menggunakan element selector.
Menggunakan class selector.
Menggunakan ID selector.
Mengatur warna teks dan background.
Menggunakan warna HEX.
Mengatur font-family.
Mengatur ukuran dan ketebalan teks.
Mengatur line-height dan text-align.
Memahami content, padding, border, dan margin.
Mengatur width.
Menggunakan border-radius.
Menggunakan box-shadow.
Membuat Profile Card sederhana.

Rangkuman Pertemuan 3

Di Pertemuan 3 kita mulai memisahkan struktur dan tampilan. HTML tetap bertugas membentuk konten, sedangkan CSS membuat tampilan menjadi lebih rapi dan menarik.

Lima praktik yang sudah dilakukan:

Coding 1: menghubungkan HTML dengan external CSS.
Coding 2: menggunakan element, class, dan ID selector.
Coding 3: mengatur warna dan typography.
Coding 4: memahami Box Model dan membuat card sederhana.
Coding 5: membuat Profile Card Mahasiswa.

Perkembangan kemampuan kita sekarang:

Perkembangan Kompetensi

Pertemuan 1
HTML Dasar
    |
    v
Pertemuan 2
Semantic HTML, List, Table, Form
    |
    v
Pertemuan 3
CSS Dasar
    |
    +-- Selector
    +-- Warna
    +-- Typography
    +-- Box Model
    |
    v
Profile Card Mahasiswa

Menuju Pertemuan 4

Saat ini kita sudah bisa membuat sebuah card yang terlihat rapi. Namun bagaimana jika kita ingin membuat beberapa card berjajar? Bagaimana membuat navbar horizontal? Bagaimana membuat dua kolom? Bagaimana supaya tampilan tetap nyaman ketika dibuka dari smartphone?

Untuk menjawab pertanyaan tersebut, pada pertemuan berikutnya kita akan masuk ke:

Saatnya Mempercantik Web: Mengenal CSS, Selector, Warna, Typography, dan Box Model

Target Pembelajaran

Materi 1 — Mengenal CSS dan Cara Menghubungkannya ke HTML

Tiga Cara Menulis CSS

Coding 1 — CSS Pertama Kita

Materi 2 — Memahami Selector: Element, Class, dan ID

1. Element Selector

2. Class Selector

3. ID Selector

Perbedaan Sederhana Class dan ID

Cascade secara Sederhana

Coding 2 — Membuat Bagian Informasi dengan Class dan ID

Materi 3 — Mengatur Warna dan Typography

Mengatur Warna Teks

Mengatur Background

Cara Menulis Warna

Typography

Coding 3 — Membuat Profil Lebih Nyaman Dibaca

Materi 4 — Memahami CSS Box Model

Width dan Height

Padding

Border

Margin

Border Radius

Box Shadow

box-sizing

Coding 4 — Membuat Card Sederhana

Materi 5 — Mini Project: Profile Card Mahasiswa

Struktur Project

Coding 5 — Profile Card Mahasiswa Lengkap

Yang Perlu Diperhatikan

Debugging Challenge

Salah Satu Versi Perbaikannya

Challenge Pertemuan 3

Evaluasi Pemahaman

Checklist Kompetensi Pertemuan 3

Rangkuman Pertemuan 3

Menuju Pertemuan 4

Pertemuan 4 — Membangun Layout Web Modern: Flexbox, Navbar, Card, dan Responsive Design

Bagikan Artikel

Artikel Lainnya

Dari Halaman Statis ke Form Interaktif: Semantic HTML, List, Table, dan Form

Dari Nol ke Halaman Web Pertama: Memahami Cara Kerja Web dan Dasar HTML

Roadmap Full-Stack Developer 2026: Belajar HTML, CSS, JavaScript, Laravel hingga Cloud

Pre-Setup Pemrograman Java Menggunakan NetBeans dan XAMPP

Kembali ke Fondasi: Memahami Konsep PHP Native dalam Pengembangan Website Pemula

Fondasi Manajemen Data: Menguasai Perintah Dasar SQL untuk Strukturisasi Basis Data Relasional

Akselerasi Web Modern: Mengapa Laravel Menjadi Framework PHP Wajib untuk Mahasiswa IT

Fondasi Utama Teknologi Modern: Mengapa Bahasa Pemrograman Java Menjadi Pilar Wajib Mahasiswa IT

Gamifikasi Pemrograman: Menggunakan Greenfoot sebagai Media Kreatif Menguasai Logika Javai

Visualisasi Paradigma: Mengapa BlueJ Menjadi Instrumen Terbaik untuk Mengonkritkan Konsep Abstrak OOP

Fondasi Pemrograman Kokoh: Mengapa NetBeans Menjadi IDE Ideal untuk Menguasai Java dan Paradigma OOP

Lebih dari Sekadar Editor: Mengoptimalkan Visual Studio Code sebagai Pusat Kerja Developer Mahasiswa

Menembus Standar Industri: Mengapa GitHub Menjadi Portofolio Wajib Mahasiswa IT Masa Kini

Evolusi Wi-Fi dari Wi-Fi 2 hingga Wi-Fi 7: Teknologi, Perangkat, Cara Kerja, dan Apakah Perlu Upgrade?

TypeScript Semakin Populer: Apakah JavaScript Mulai Tergeser?

10 Ide Proyek Laravel Anti-Mainstream Tugas Akhir 2026

10 Ide Proyek Aplikasi Berbasis Java NetBeans untuk Tema Tugas Akhir

Evolusi Penyimpanan Data: Dari Kartu Berlubang hingga Cloud Storage

Sejarah dan Evolusi Komputer: Dari Abacus hingga Era Artificial Intelligence

Rekomendasi Laptop dan PC untuk Mahasiswa IT dengan Anggaran Rp6–8 Juta

Auto Naik Level! Sertifikasi IT untuk Mahasiswa dan Fresh Graduate

Tutorial Lengkap Mengintegrasikan OpenAI Codex ke Visual Studio Code

Manajemen Dependensi Modern: Panduan Lengkap Composer dari Instalasi hingga Inisiasi Proyek Laravel (Studi Kasus: Sistem Kasir Toko Kelontong)

Pilar Produktivitas Developer: Memahami Peran Git dan Composer dalam Manajemen Proyek Perangkat Lunak

Di Balik Kolaborasi UI/UX: Membedah Sisi Teknis dan Spesifikasi Sistem (System Requirements) Figma

Mengamankan Gerbang Utama: Panduan Taktis Hardening Perangkat Routerboard MikroTik

Mengamankan Gerbang Digital: Panduan Taktis Hardening dan Proteksi Jaringan Wi-Fi Rumah

Revolusi Pengalamatan Internet: Memahami Konsep CIDR sebagai Solusi Kelangkaan IP Address Global

Optimalisasi Arsitektur Jaringan: Menguasai Konsep IP Address dan Metode VLSM untuk Efisiensi Alokasi Kontainer Data

Membedah Kurikulum: Perbedaan dan Perbandingan Strategis Antara Jurusan Teknik Informatika dan Sistem Informasi

Benteng Digital: Mengidentifikasi Ancaman Keamanan Jaringan dan Solusi Strategisnya di Era Siber

Seni Berkomunikasi dengan AI: Mengapa Prompt Engineering Menjadi Soft Skill Baru yang Wajib Dikuasai Mahasiswa

Strategi Pemilihan Tech Stack: Bagaimana Menentukan Teknologi yang Tepat untuk Proyek Akhir dan Skripsi TI

Akselerasi Data Science: Mengapa Python Menjadi Bahasa Primadona dalam Pengolahan Data dan Machine Learning

Figma dan Era Baru Desain Digital: Menggeser Dominasi Software Desktop Melalui Kolaborasi Cloud

Revolusi Kontainerisasi: Bagaimana Docker Menyelesaikan Masalah Konflik Infrastruktur IT

Paradigma Baru Rekayasa Perangkat Lunak: Menavigasi Tren 'Vibecoding' dalam Ekosistem Mahasiswa IT

Kecepatan dan Efisiensi: Memaksimalkan Notepad++ sebagai Editor Pendukung dalam Workflow Mahasiswa IT

Navigasi Lingkungan Lokal: Komparasi Strategis Antara XAMPP dan Laragon untuk Developer Mahasiswa