Cara Membuat template responsive

kita ke responsive bootstrap dulu
selling with style is more

1.setting viewport di head
<meta name="viewport" content="width=device-width, initial-scale=1.0">


2.di image jangan pake  width 100% tapi pakailah max-width:100%;


3.ini advance nih, pakai image yang berbeda, untuk  media yang berbeda pula
contoh tagnya

<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

fullnya=https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_picture

4.text size pakenya vw
The text size can be set with a "vw" unit, which means the "viewport width".
contoh:
<h1 style="font-size:10vw">Hello World</h1>

5. menggunakan media queries untuk pengaturan bagian2 web
jadi saat web teresize  dia bisa responsive tetep enak dibaca
stylenya akan ngikutin ukuran web
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_media_query
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_media_query3

6. pakai css layout biar gampang 
Salah satu css yg enak dipake buat layouting=w3css, bootstrap
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_w3css


bootstrap disini
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_bootstrap



source:
https://www.w3schools.com/html/html_responsive.asp


Oke lanjut ke tutorial bootstrap dari w3schools
https://www.w3schools.com/bootstrap/default.asp

???flex disini
https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/




bikin viral? =https://emarky.thrivecart.com/upviral-special-offer/?wickedsource=google

coba convert template to bootstrap