Langkah 1: Kopi Kode HTML yang Ingin Dipelajari ke Grok

Pertama-tama, kita ambil kode HTML yang pengen kita pelajari. Hari ini, kita fokus ke dua kode: template Blogger dengan TOC dinamis dan portfolio website sederhana. Kode ini kita kasih ke Grok biar dijelasin secara rinci.

Caranya gampang, bro! Kita salin kode HTML, CSS, dan JavaScript dari proyek kita, terus kita tanya ke Grok: "Bro, tolong jelasin fungsi kode ini, proses pembuatannya, dan fokus ke bagian spesifik (TOC atau header)!" Grok langsung ngasih jawaban yang detail, termasuk struktur, styling, dan interaktivitasnya.

<div id="toc">
    <div id='toc-header'>
        <div class="blog-owner"><a href="http://www.x.com">IRSYAD KAMALUDIN</a></div>
        <!-- ... -->
    </div>
    <div id="toc-content">
        <ul id="toc-list"></ul>
    </div>
</div>

Gambar 1: Salin kode HTML dan tanya ke Grok biar dijelasin.

Langkah 2: Tambahkan Prompt Khusus untuk Markdown dengan Perbaikan Teks #

Abis Grok ngasih penjelasan, kita minta dia bikin file Markdown (.md) yang rapi buat diimpor ke Mindomo. Kita kasih prompt khusus biar output-nya sesuai kebutuhan:

• Struktur hierarki dengan judul (#, ##, ###, dst.) pake nomor (1, 2, 3, dst.).
• Tiap teks normal punya judul di atasnya (misalnya #### atau #####).
• Kode HTML/CSS/JS dimasukin sebagai teks normal di bawah judul terkait.
• Perbaikan khusus: Semua teks normal yang awalnya # (misalnya #container di CSS) ditambah * di depan (jadi * #container) biar Mindomo ga baca sebagai judul/node baru.

Hasilnya adalah file Markdown yang super rapi, berisi penjelasan fungsi kode, proses pembuatan, dan fokus ke bagian spesifik (TOC untuk Blogger, header untuk portfolio). File ini siap diimpor ke Mindomo tanpa bikin node tambahan dari #.

Buat Markdown lengkap untuk kode HTML, CSS, dan JavaScript. Strukturkan dengan hierarki judul (#, ##, ###, dst.) pake nomor (1, 2, 3, dst.), setiap teks normal punya judul (level sesuai), dan kode dimasukin sebagai teks normal di bawah judul terkait. Fokus ke fungsi kode, proses pembuatan, dan detail TOC/header. Tambahin * di depan teks normal yang awalnya # (misalnya #container jadi * #container) biar ga dibaca sebagai node baru di Mindomo. Output dalam satu file, siap impor ke Mindomo.

#### 2.3.2. Container Layout
Atur layout dua kolom dengan flexbox:
```css
* #container {
  display: flex;
  min-height: 100vh;
  flex-direction: row;
  position: relative;
}
```

Gambar 2: Kasih prompt khusus ke Grok buat bikin file Markdown dengan perbaikan * #.

Langkah 3: Impor File Markdown ke Mindomo

Langkah terakhir, kita impor file Markdown (.md) yang dibikin Grok ke Mindomo biar jadi mindmap keren. Caranya simpel banget, bro:

1. Salin kode Markdown dari Grok, simpan ke file teks, misalnya blogger_toc_guide.md atau portfolio_guide.md.
2. Buka Mindomo, login, dan buat mindmap baru.
3. Pilih Import > Markdown di menu Mindomo.
4. Unggah file .md, dan Mindomo otomatis ubah judul (#, ##, ###, dst.) jadi node hierarkis. Teks normal (termasuk kode dengan * #) jadi isi node, tanpa node tambahan dari #.
5. Sesuaikan tampilan mindmap (warna, layout, ikon) biar makin kece.

Hasilnya? Mindmap yang rapi, nyusun semua info kode kita (fungsi, proses, detail TOC/header) dalam bentuk visual yang gampang dipahami!

Gambar 3: Impor file Markdown ke Mindomo dan lihat mindmap-nya jadi!