Cara Convert Design Figma ke HTML bisa dilakukan menggunakan dua cara, menggunakan plugin konverter atau mengkonversinya secara manual. Jika menggunakan plugin, bisa dipastikan akan menemukan banyak masalah, seperti tampilan yang tidak responsif. Selain itu, struktur HTMLnya juga berantakan. Setidaknya itu yang sering dialami jika menggunakan plugin versi gratisan. Plugin berbayar pun saat ini belum ada yang pernah memberikan rekomendasi dengan label “Proven”, alias masih ada kurang-kurangnya. Kesimpulan sementara hingga artikel ini ditulis adalah, “sebaik-baiknya cara mengkonversi design figma ke HTML adalah menulis kode HTMLnya secara manual”.
Cara Convert Design Figma ke HTML adalah sebagai berikut:
- Buka project desain figma anda yang ingin dikonversi menjadi HTML, sebagai contoh gambar berikut ini

2. Perkirakan jumlah baris yang akan digunakan sesuai dengan desain figma anda

3. Buka notepad dan ketikkan sintax HTML standar berikut ini
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<!-- Meta viewport digunakan untuk memberi perintah kepada browser untuk mengatur dimensi halaman dan melakukan scaling, agar tampilan pas dengan perangkat mobile https://www.w3schools.com/css/css_rwd_viewport.asp -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
</body>
</html>4. Simpan notepad tersebut dengan nama index.html
5. Kemudian buka file index.html tersebut menggunakan browser, jika halaman navigasi browser bertuliskan “Judul Halaman” berarti pembuatan berkas html telah berhasil
6. Selanjutnya tambahkan 8 baris DIV pada kode HTML sesuai design figma yang ada
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<!-- Meta viewport digunakan untuk memberi perintah kepada browser untuk mengatur dimensi halaman dan melakukan scaling, agar tampilan pas dengan perangkat mobile https://www.w3schools.com/css/css_rwd_viewport.asp -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<div class="row satu"> </div>
<div class="row dua"> </div>
<div class="row tiga"> </div>
<div class="row empat"> </div>
<div class="row lima"> </div>
<div class="row enam"> </div>
<div class="row tujuh"> </div>
<div class="row delapan"> </div>
</body>
</html>7. Perkirakan jumlah kolom pada design figma yang ada

| Baris | Jumlah Kolom |
| 1 | 2 |
| 2 | 2 |
| 3 | 10 |
| 4 | 3 |
| 5 | 9 |
| 6 | 2 |
| 7 | 2 |
| 8 | 3 |
8. Tambahkan kolom pada kode HTML sesuai dengan jumlah yang diperkirakan
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<!-- Meta viewport digunakan untuk memberi perintah kepada browser untuk mengatur dimensi halaman dan melakukan scaling, agar tampilan pas dengan perangkat mobile https://www.w3schools.com/css/css_rwd_viewport.asp -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<!--************************************************ROW 1 **************************************-->
<div class="row satu">
<div class="col col-satu-row-satu">
</div>
<div class="col col-dua-row-satu">
</div>
</div>
<!--************************************************ROW 2 **************************************-->
<div class="row dua">
<div class="col col-satu-row-dua">
</div>
<div class="col col-dua-row-dua">
</div>
</div>
<!--************************************************ROW 3 **************************************-->
<div class="row tiga">
<div class="col col-satu-row-tiga">
</div>
<div class="col col-dua-row-tiga">
</div>
<div class="col col-tiga-row-tiga">
</div>
<div class="col col-empat-row-tiga">
</div>
<div class="col col-lima-row-tiga">
</div>
<div class="col col-enam-row-tiga">
</div>
<div class="col col-tujuh-row-tiga">
</div>
<div class="col col-delapan-row-tiga">
</div>
<div class="col col-sembilan-row-tiga">
</div>
<div class="col col-sepuluh-row-tiga">
</div>
</div>
<!--************************************************ROW 4 **************************************-->
<div class="row empat">
<div class="col col-satu-row-empat">
</div>
<div class="col col-dua-row-empat">
</div>
<div class="col col-tiga-row-empat">
</div>
</div>
<!--************************************************ROW 5 **************************************-->
<div class="row lima">
<div class="col col-satu-row-lima">
</div>
<div class="col col-dua-row-lima">
</div>
<div class="col col-tiga-row-lima">
</div>
<div class="col col-empat-row-lima">
</div>
<div class="col col-lima-row-lima">
</div>
<div class="col col-enam-row-lima">
</div>
<div class="col col-tujuh-row-lima">
</div>
<div class="col col-delapan-row-lima">
</div>
<div class="col col-sembilan-row-lima">
</div>
</div>
<!--************************************************ROW 6 **************************************-->
<div class="row enam">
<div class="col col-satu-row-enam">
</div>
<div class="col col-dua-row-enam">
</div>
</div>
<!--************************************************ROW 7 **************************************-->
<div class="row tujuh">
<div class="col col-satu-row-tujuh">
</div>
<div class="col col-dua-row-tujuh">
</div>
</div>
<!--************************************************ROW 8 **************************************-->
<div class="row delapan">
<div class="col col-satu-row-delapan">
</div>
<div class="col col-dua-row-delapan">
</div>
<div class="col col-tiga-row-delapan">
</div>
</div>
</body>
</html>9. Tambahkan styling pada bagian <style></style> untuk setiap kelas pada DIV
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<!-- Meta viewport digunakan untuk memberi perintah kepada browser untuk mengatur dimensi halaman dan melakukan scaling, agar tampilan pas dengan perangkat mobile https://www.w3schools.com/css/css_rwd_viewport.asp -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*Styling berlaku untuk tag HTML dan body*/
html, body{
}
/*Styling berlaku untuk seluruh kelas row*/
.row{
}
/*Styling berlaku spesifik untuk kelas row satu*/
.row.satu{
}
/*Styling berlaku spesifik untuk kelas row dua*/
.row.dua{
}
/*Styling berlaku spesifik untuk kelas row tiga*/
.row.tiga{
}
/*Styling berlaku spesifik untuk kelas row empat*/
.row.empat{
}
/*Styling berlaku spesifik untuk kelas row lima*/
.row.lima{
}
/*Styling berlaku spesifik untuk kelas row enam*/
.row.enam{
}
/*Styling berlaku spesifik untuk kelas row tujuh*/
.row.tujuh{
}
/*Styling berlaku spesifik untuk kelas row delapan*/
.row.delapan{
}
/*Styling berlaku untuk seluruh kelas col*/
.col{
}
/*Styling berlaku spesifik untuk kelas col col-satu-row-satu*/
.col.col-satu-row-satu{
}
/*Styling berlaku spesifik untuk kelas col col-dua-row-satu*/
.col.col-dua-row-satu{
}
/*Styling berlaku spesifik untuk kelas col col-satu-row-dua*/
.col.col-satu-row-dua{
}
/*Styling berlaku spesifik untuk kelas col col-dua-row-dua*/
.col.col-dua-row-dua{
}
/*Styling berlaku spesifik untuk kelas col col-satu-row-tiga*/
.col.col-satu-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-dua-row-tiga*/
.col.col-dua-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-tiga-row-tiga*/
.col.col-tiga-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-empat-row-tiga*/
.col.col-empat-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-lima-row-tiga*/
.col.col-lima-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-enam-row-tiga*/
.col.col-enam-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-tujuh-row-tiga*/
.col.col-tujuh-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-delapan-row-tiga*/
.col.col-delapan-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-sembilan-row-tiga*/
.col.col-sembilan-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-sepuluh-row-tiga*/
.col.col-sepuluh-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-satu-row-empat*/
.col.col-satu-row-empat{
}
/*Styling berlaku spesifik untuk kelas col col-dua-row-empat*/
.col.col-dua-row-empat{
}
/*Styling berlaku spesifik untuk kelas col col-tiga-row-empat*/
.col.col-tiga-row-empat{
}
/*Styling berlaku spesifik untuk kelas col col-satu-row-lima*/
.col.col-satu-row-lima{
}
/*Styling berlaku spesifik untuk kelas col col-dua-row-lima*/
.col.col-dua-row-lima{
}
/*Styling berlaku spesifik untuk kelas col col-tiga-row-lima*/
.col.col-tiga-row-lima{
}
/*Styling berlaku spesifik untuk kelas col col-empat-row-lima*/
.col.col-empat-row-lima{
}
/*Styling berlaku spesifik untuk kelas col col-lima-row-lima*/
.col.col-lima-row-lima{
}
/*Styling berlaku spesifik untuk kelas col col-enam-row-lima*/
.col.col-enam-row-lima{
}
/*Styling berlaku spesifik untuk kelas col col-tujuh-row-lima*/
.col.col-tujuh-row-lima{
}
/*Styling berlaku spesifik untuk kelas col col-delapan-row-lima*/
.col.col-delapan-row-lima{
}
/*Styling berlaku spesifik untuk kelas col col-sembilan-row-lima*/
.col.col-sembilan-row-lima{
}
/*Styling berlaku spesifik untuk kelas col col-satu-row-enam*/
.col.col-satu-row-enam{
}
/*Styling berlaku spesifik untuk kelas col col-dua-row-enam*/
.col.col-dua-row-enam{
}
/*Styling berlaku spesifik untuk kelas col col-satu-row-tujuh*/
.col.col-satu-row-tujuh{
}
/*Styling berlaku spesifik untuk kelas col col-dua-row-tujuh*/
.col.col-dua-row-tujuh{
}
/*Styling berlaku spesifik untuk kelas col col-satu-row-delapan*/
.col.col-satu-row-delapan{
}
/*Styling berlaku spesifik untuk kelas col col-dua-row-delapan*/
.col.col-dua-row-delapan{
}
/*Styling berlaku spesifik untuk kelas col col-tiga-row-delapan*/
.col.col-tiga-row-delapan{
}
</style>
</head>
<body>
<!--************************************************ROW 1 **************************************-->
<div class="row satu">
<div class="col col-satu-row-satu">
</div>
<div class="col col-dua-row-satu">
</div>
</div>
<!--************************************************ROW 2 **************************************-->
<div class="row dua">
<div class="col col-satu-row-dua">
</div>
<div class="col col-dua-row-dua">
</div>
</div>
<!--************************************************ROW 3 **************************************-->
<div class="row tiga">
<div class="col col-satu-row-tiga">
</div>
<div class="col col-dua-row-tiga">
</div>
<div class="col col-tiga-row-tiga">
</div>
<div class="col col-empat-row-tiga">
</div>
<div class="col col-lima-row-tiga">
</div>
<div class="col col-enam-row-tiga">
</div>
<div class="col col-tujuh-row-tiga">
</div>
<div class="col col-delapan-row-tiga">
</div>
<div class="col col-sembilan-row-tiga">
</div>
<div class="col col-sepuluh-row-tiga">
</div>
</div>
<!--************************************************ROW 4 **************************************-->
<div class="row empat">
<div class="col col-satu-row-empat">
</div>
<div class="col col-dua-row-empat">
</div>
<div class="col col-tiga-row-empat">
</div>
</div>
<!--************************************************ROW 5 **************************************-->
<div class="row lima">
<div class="col col-satu-row-lima">
</div>
<div class="col col-dua-row-lima">
</div>
<div class="col col-tiga-row-lima">
</div>
<div class="col col-empat-row-lima">
</div>
<div class="col col-lima-row-lima">
</div>
<div class="col col-enam-row-lima">
</div>
<div class="col col-tujuh-row-lima">
</div>
<div class="col col-delapan-row-lima">
</div>
<div class="col col-sembilan-row-lima">
</div>
</div>
<!--************************************************ROW 6 **************************************-->
<div class="row enam">
<div class="col col-satu-row-enam">
</div>
<div class="col col-dua-row-enam">
</div>
</div>
<!--************************************************ROW 7 **************************************-->
<div class="row tujuh">
<div class="col col-satu-row-tujuh">
</div>
<div class="col col-dua-row-tujuh">
</div>
</div>
<!--************************************************ROW 8 **************************************-->
<div class="row delapan">
<div class="col col-satu-row-delapan">
</div>
<div class="col col-dua-row-delapan">
</div>
<div class="col col-tiga-row-delapan">
</div>
</div>
</body>
</html>
10. Setelah kerangka dasar siap, langkah selanjutnya adalah mengisikan konten ke dalam kerangka, agar lebih mudah ekspor terlebih dahulu seluruh gambar yang ada di design figma, dan jadikan satu ke dalam folder images. Tempatkan folder images pada folder yang sama dengan file index.html.

11. Setelah gambar diekspor, masukkan dalam kerangka yang telah dibuat beserta konten teks yang ada
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<!-- Meta viewport digunakan untuk memberi perintah kepada browser untuk mengatur dimensi halaman dan melakukan scaling, agar tampilan pas dengan perangkat mobile https://www.w3schools.com/css/css_rwd_viewport.asp -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*Styling berlaku untuk tag HTML dan body*/
html, body{
}
/*Styling berlaku untuk seluruh kelas row*/
.row{
}
/*Styling berlaku spesifik untuk kelas row satu*/
.row.satu{
}
/*Styling berlaku spesifik untuk kelas row dua*/
.row.dua{
}
/*Styling berlaku spesifik untuk kelas row tiga*/
.row.tiga{
}
/*Styling berlaku spesifik untuk kelas row empat*/
.row.empat{
}
/*Styling berlaku spesifik untuk kelas row lima*/
.row.lima{
}
/*Styling berlaku spesifik untuk kelas row enam*/
.row.enam{
}
/*Styling berlaku spesifik untuk kelas row tujuh*/
.row.tujuh{
}
/*Styling berlaku spesifik untuk kelas row delapan*/
.row.delapan{
}
/*Styling berlaku untuk seluruh kelas col*/
.col{
}
/*Styling berlaku spesifik untuk kelas col col-satu-row-satu*/
.col.col-satu-row-satu{
}
/*Styling berlaku spesifik untuk kelas col col-dua-row-satu*/
.col.col-dua-row-satu{
}
/*Styling berlaku spesifik untuk kelas col col-satu-row-dua*/
.col.col-satu-row-dua{
}
/*Styling berlaku spesifik untuk kelas col col-dua-row-dua*/
.col.col-dua-row-dua{
}
/*Styling berlaku spesifik untuk kelas col col-satu-row-tiga*/
.col.col-satu-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-dua-row-tiga*/
.col.col-dua-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-tiga-row-tiga*/
.col.col-tiga-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-empat-row-tiga*/
.col.col-empat-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-lima-row-tiga*/
.col.col-lima-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-enam-row-tiga*/
.col.col-enam-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-tujuh-row-tiga*/
.col.col-tujuh-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-delapan-row-tiga*/
.col.col-delapan-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-sembilan-row-tiga*/
.col.col-sembilan-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-sepuluh-row-tiga*/
.col.col-sepuluh-row-tiga{
}
/*Styling berlaku spesifik untuk kelas col col-satu-row-empat*/
.col.col-satu-row-empat{
}
/*Styling berlaku spesifik untuk kelas col col-dua-row-empat*/
.col.col-dua-row-empat{
}
/*Styling berlaku spesifik untuk kelas col col-tiga-row-empat*/
.col.col-tiga-row-empat{
}
/*Styling berlaku spesifik untuk kelas col col-satu-row-lima*/
.col.col-satu-row-lima{
}
/*Styling berlaku spesifik untuk kelas col col-dua-row-lima*/
.col.col-dua-row-lima{
}
/*Styling berlaku spesifik untuk kelas col col-tiga-row-lima*/
.col.col-tiga-row-lima{
}
/*Styling berlaku spesifik untuk kelas col col-empat-row-lima*/
.col.col-empat-row-lima{
}
/*Styling berlaku spesifik untuk kelas col col-lima-row-lima*/
.col.col-lima-row-lima{
}
/*Styling berlaku spesifik untuk kelas col col-enam-row-lima*/
.col.col-enam-row-lima{
}
/*Styling berlaku spesifik untuk kelas col col-tujuh-row-lima*/
.col.col-tujuh-row-lima{
}
/*Styling berlaku spesifik untuk kelas col col-delapan-row-lima*/
.col.col-delapan-row-lima{
}
/*Styling berlaku spesifik untuk kelas col col-sembilan-row-lima*/
.col.col-sembilan-row-lima{
}
/*Styling berlaku spesifik untuk kelas col col-satu-row-enam*/
.col.col-satu-row-enam{
}
/*Styling berlaku spesifik untuk kelas col col-dua-row-enam*/
.col.col-dua-row-enam{
}
/*Styling berlaku spesifik untuk kelas col col-satu-row-tujuh*/
.col.col-satu-row-tujuh{
}
/*Styling berlaku spesifik untuk kelas col col-dua-row-tujuh*/
.col.col-dua-row-tujuh{
}
/*Styling berlaku spesifik untuk kelas col col-satu-row-delapan*/
.col.col-satu-row-delapan{
}
/*Styling berlaku spesifik untuk kelas col col-dua-row-delapan*/
.col.col-dua-row-delapan{
}
/*Styling berlaku spesifik untuk kelas col col-tiga-row-delapan*/
.col.col-tiga-row-delapan{
}
</style>
</head>
<body>
<!--************************************************ROW 1 **************************************-->
<div class="row satu">
<div class="col col-satu-row-satu">
<img src="images/logo.webp" alt="logo"/>
</div>
<div class="col col-dua-row-satu">
<ul>
<li>
Home
</li>
<li>
Kenapa
</li>
<li>
Layanan Kami
</li>
<li>
Klien
</li>
<li>
Testimoni
</li>
</ul>
</div>
</div>
<!--************************************************ROW 2 **************************************-->
<div class="row dua">
<div class="col col-satu-row-dua">
<img src="images/Business.png" alt="gambar utama"/>
</div>
<div class="col col-dua-row-dua">
<h1>Jasa Pengembangan Aplikasi</h1>
<p>Kami melayani jasa pengembangan aplikasi dan membantu mewujudkan ide anda dalam bentuk website atau aplikasi desktop/mobile</p>
<button>Hubungi Kami</button>
</div>
</div>
<!--************************************************ROW 3 **************************************-->
<div class="row tiga">
<h2>Kenapa Harus Memilih Kami?</h2>
<p>Mewujudkan ide anda dalam bentuk website atau aplikasi deskto/mobile adalah gairah kami</p>
<div class="col col-satu-row-tiga">
<img src="images/icons8-kodi%201.png"/>
<p>Menggunakan teknologi terkini</p>
</div>
<div class="col col-dua-row-tiga">
<img src="images/account-cog.png"/>
<p>Dikerjakan oleh ahli bidangnya</p>
</div>
<div class="col col-tiga-row-tiga">
<img src="images/sync.png"/>
<p>Cepat proses pengerjaanya</p>
</div>
<div class="col col-empat-row-tiga">
<img src="images/shield-sun.png"/>
<p>Kualitas sitem terjamin</p>
</div>
<div class="col col-lima-row-tiga">
<img src="images/currency-usd.png"/>
<p>Harga Kompetitif dan Terjangkau</p>
</div>
<div class="col col-enam-row-tiga">
<img src="images/shield-lock.png"/>
<p>Layanan pemeliharaan</p>
</div>
<div class="col col-tujuh-row-tiga">
<img src="images/face-agent.png"/>
<p>Layanan teknis cepat tanggap</p>
</div>
<div class="col col-delapan-row-tiga">
<img src="images/radar.png"/>
<p>Rekam jejak yang terbukti</p>
</div>
<div class="col col-sembilan-row-tiga">
<img src="images/lock.png"/>
<p>Kerahasiaan data terjaga</p>
</div>
<div class="col col-sepuluh-row-tiga">
<img src="images/comment-text-multiple.png"/>
<p>Tim yang komunikatif</p>
</div>
</div>
<!--************************************************ROW 4 **************************************-->
<div class="row empat">
<h2>Layanan yang bisa anda dapatkan</h2>
<div class="col col-satu-row-empat">
<img src="images/web.png"/>
<h3>Aplikasi Custom</h3>
<p>Menyediakan aplikasi custom sesuai kebutuhan anda
</p>
<button>Hubungi Kami</button>
</div>
<div class="col col-dua-row-empat">
<img src="images/aplikasi%20custom.png"/>
<h3>Website Murah</h3>
<p>Menyediakan pengembangan website berbasis wordpress</p>
<button>Hubungi Kami</button>
</div>
<div class="col col-tiga-row-empat">
<img src="images/apk%20kampus.png"/>
<h3>Paket Aplikasi Kampus</h3>
<p>
<ul>
<li>Aplikasi SIAKAD</li>
<li>Aplikasi PMB</li>
<li>Aplikasi Open Jurnal System</li>
<li>Aplikasi Repository</li>
<li>Aplikasi Perpustakaan</li>
<li>Aplikasi Tracer Study Alumni</li>
</ul>
</p>
<button>Hubungi Kami</button>
</div>
</div>
<!--************************************************ROW 5 **************************************-->
<div class="row lima">
<h2>Klien Kami</h2>
<div class="col col-satu-row-lima">
<img src="images/webpc-passthru.png"/>
</div>
<div class="col col-dua-row-lima">
<img src="images/webpc-passthru%20(3).png"/>
</div>
<div class="col col-tiga-row-lima">
<img src="images/webpc-passthru%20(2).png"/>
</div>
<div class="col col-empat-row-lima">
<img src="images/webpc-passthru%20(1).png"/>
</div>
<div class="col col-lima-row-lima">
<img src="images/webpc-passthru%20(4)%201.png"/>
</div>
<div class="col col-enam-row-lima">
<img src="images/webpc-passthru%20(5)%201.png"/>
</div>
<div class="col col-tujuh-row-lima">
<img src="images/Jombang%20logo%201.png"/>
</div>
<div class="col col-delapan-row-lima">
<img src="images/Pasuruan%20logo%201.png"/>
</div>
<div class="col col-sembilan-row-lima">
<img src="images/Lakpesdam%20logo%201.png"/>
</div>
</div>
<!--************************************************ROW 6 **************************************-->
<div class="row enam">
<h2>Kata Klien Kami</h2>
<div class="col col-satu-row-enam">
<img src="images/Client.png"/>
</div>
<div class="col col-dua-row-enam">
<h4>Nama, Jabatan-instansi</h4>
<p>Berpengalaman, hasil memuaskan, dan tepat waktu pengerjaanya</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
<!--************************************************ROW 7 **************************************-->
<div class="row tujuh">
<div class="col col-satu-row-tujuh">
<img src="images/Client-1.png">
</div>
<div class="col col-dua-row-tujuh">
<h4>Nama, Jabatan-instansi</h4>
<p>Berpengalaman, hasil memuaskan, dan tepat waktu pengerjaanya</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
<!--************************************************ROW 8 **************************************-->
<div class="row delapan">
<div class="col col-satu-row-delapan">
<img src="images/Monogram.png">
</div>
<div class="col col-dua-row-delapan">
<ul>
<li>
Perumahan Joyoagung Greenland No. B4-B5 Tlogomas, Malang
</li>
<li>
+6281234311135
</li>
<li>
info@arkatama.id
</li>
</ul>
</div>
<div class="col col-tiga-row-delapan">
<p>Perusahaan penyedia jasa teknologi informasi yang inovatif dan kreatif, dengan kegiatan utamanya membantu organisasi untuk meningkatkan nilai tambah kegiatan organisasinya.</p>
<img src="images/instagram.png"/>
<img src="images/facebook.png"/>
<img src="images/twitter.png"/>
<img src="images/linkedin.png"/>
<img src="images/googleplus.png"/>
<img src="images/pinterest.png"/>
</div>
<p>© Copyright Arkatama 2018. Jasa Konsultan IT dan SOftware House PT Arkatama Multi Solusindo</p>
</div>
</body>
</html>
12. Setelah mengisikan konten, berikut tampilan yang akan muncul jika index.html dibuka menggunakan browser.

Terlihat berantakan bukan, langkah selanjutnya adalah merapikanya dengan menyesuaikan dengan styling dari design figma.
Langkah selanjutnya dilanjutkan di artikel part 2 ya. Cooming soon.

Artikelnya keren, sangat mudah dipahami, ndak sabar menunggu part 2 nya. Ditunggu ya min