- Beranda
- Website, Webmaster, Webdeveloper
[Tutorial] cara membuat website responsive
...
TS
duaruang
[Tutorial] cara membuat website responsive
[part 1]
Halo gan..
mau sekedar sharing aja nih..
ada yang pernah denger website responsive?
ingin tahu seperti apa website responsive itu?
nah bagi yang belum tahu, ane tunjukkin nih seperti dibawah ini,
nah sekarang sudah tahu kan gan?
pasti diantara agan-agan ada yang masih penasaran, bgmn cara membuat website seperti ini?
caranya mudah gan.
(dalam hal ini agan sudah mengetahui teknik dasar HTML dan CSS)
1. langkah pertama adalah agan download yang namanya framework css, misalnya seperti bootstrap.
2. lalu agan buat file html dulu menggunakan aplikasi editor website (ane biasanya pake adobe DW)
3. klik menu->file->pilih dropdown yang HTML 5(letaknya ada di kanan bawah).
4. kalo udah klik ok.
5. agan pasti ngelihat kodingan HTML 5nya kan. nah kalo gak salah seharusnya di tab DWnya nama filenya untitled ya? itu tandanya belom agan save.
6. sebelum di save. agan buat dulu folder misal letaknya di taro di desktop. kasih nama foldernya misal "duaruang.com"
7. jika sudah, agan buat folder lagi didalamnya, dengan nama "css"
8. nah kalo udah seharusnya didalam folder "duaruang.com" ada folder lagi yaitu folder "css"
9. kalo folder tersebut berhasil dibuat, agan balik lagi ke jendela aplikasi adobe DW.
10. agan save kedalam folder "duaruang.com", kasih nama filenya index.html
11. jika sudah, tab di aplikasi adobe DWnya harusnya udah jadi "index.html"
12. kalo udah, agan buat link seperti berikut <link href="#" rel="stylesheet">dan letakkan di dalam tag <head>
13. jika sudah dibuat link yang diatas, agan balik lagi ke downloadan yang bootstrap tadi.
14. agan extract dan cari file yang namanya bootstrap.min.css dan bootstrap.css
15. kalo udah, dicopy gan. dan di paste ke dalam folder "duaruang.com"->"css".
16. nah seharusnya sekarang didalam folder "css" sudah ada file bootstrap.min.css dan bootstrap.css
17. buka lagi windows aplikasi adobe DWnya, agan isi link hrefnya atau dengan cursor aktif berada di antara " " pada link href dan ketik ctr+space, maka akan keluar browse filenya.
18. ente browse deh file cssnya sesuai dengan folder yang tadi sudah kita buat.
19. nah dengan begitu maka tinggal diisi deh content websitenya, secara default website agan sudah responsive.
20. eh iya..jangan lupa ditambahkan ini ya "<meta name="viewport" content="width=device-width, initial-scale=1">" ke dalam tag <head>
sekian dulu sharin2 info dari ane. nanti dilanjutkan yang part 2
salam dari duaruang
bye gan
kalo suka ama threadnya jangan lupa kirim-kirim cendol ya gan
Halo gan..
mau sekedar sharing aja nih..
ada yang pernah denger website responsive?
ingin tahu seperti apa website responsive itu?
nah bagi yang belum tahu, ane tunjukkin nih seperti dibawah ini,
Spoiler for contoh website responsive :tampilan desktop:
Spoiler for contoh website responsive : tampilan Mobile:
nah sekarang sudah tahu kan gan?
pasti diantara agan-agan ada yang masih penasaran, bgmn cara membuat website seperti ini?
caranya mudah gan.
(dalam hal ini agan sudah mengetahui teknik dasar HTML dan CSS)
1. langkah pertama adalah agan download yang namanya framework css, misalnya seperti bootstrap.
2. lalu agan buat file html dulu menggunakan aplikasi editor website (ane biasanya pake adobe DW)
3. klik menu->file->pilih dropdown yang HTML 5(letaknya ada di kanan bawah).
4. kalo udah klik ok.
5. agan pasti ngelihat kodingan HTML 5nya kan. nah kalo gak salah seharusnya di tab DWnya nama filenya untitled ya? itu tandanya belom agan save.
6. sebelum di save. agan buat dulu folder misal letaknya di taro di desktop. kasih nama foldernya misal "duaruang.com"
7. jika sudah, agan buat folder lagi didalamnya, dengan nama "css"
8. nah kalo udah seharusnya didalam folder "duaruang.com" ada folder lagi yaitu folder "css"
9. kalo folder tersebut berhasil dibuat, agan balik lagi ke jendela aplikasi adobe DW.
10. agan save kedalam folder "duaruang.com", kasih nama filenya index.html
11. jika sudah, tab di aplikasi adobe DWnya harusnya udah jadi "index.html"
12. kalo udah, agan buat link seperti berikut <link href="#" rel="stylesheet">dan letakkan di dalam tag <head>
13. jika sudah dibuat link yang diatas, agan balik lagi ke downloadan yang bootstrap tadi.
14. agan extract dan cari file yang namanya bootstrap.min.css dan bootstrap.css
15. kalo udah, dicopy gan. dan di paste ke dalam folder "duaruang.com"->"css".
16. nah seharusnya sekarang didalam folder "css" sudah ada file bootstrap.min.css dan bootstrap.css
17. buka lagi windows aplikasi adobe DWnya, agan isi link hrefnya atau dengan cursor aktif berada di antara " " pada link href dan ketik ctr+space, maka akan keluar browse filenya.
18. ente browse deh file cssnya sesuai dengan folder yang tadi sudah kita buat.
19. nah dengan begitu maka tinggal diisi deh content websitenya, secara default website agan sudah responsive.
20. eh iya..jangan lupa ditambahkan ini ya "<meta name="viewport" content="width=device-width, initial-scale=1">" ke dalam tag <head>
sekian dulu sharin2 info dari ane. nanti dilanjutkan yang part 2
salam dari duaruang
bye gan
kalo suka ama threadnya jangan lupa kirim-kirim cendol ya gan
Diubah oleh duaruang 04-02-2015 09:14
0
1.2K
0
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru
Mari bergabung, dapatkan informasi dan teman baru!
Website, Webmaster, Webdeveloper
23.3KThread•4.4KAnggota
Tampilkan semua post
TS
duaruang
#1
[Tutorial] cara membuat website responsive
[part 1]
Halo gan..
mau sekedar sharing aja nih..
ada yang pernah denger website responsive?
ingin tahu seperti apa website responsive itu?
nah bagi yang belum tahu, ane tunjukkin nih seperti dibawah ini,
nah sekarang sudah tahu kan gan?
pasti diantara agan-agan ada yang masih penasaran, bgmn cara membuat website seperti ini?
caranya mudah gan.
(dalam hal ini agan sudah mengetahui teknik dasar HTML dan CSS)
1. langkah pertama adalah agan download yang namanya framework css, misalnya seperti bootstrap.
2. lalu agan buat file html dulu menggunakan aplikasi editor website (ane biasanya pake adobe DW)
3. klik menu->file->pilih dropdown yang HTML 5(letaknya ada di kanan bawah).
4. kalo udah klik ok.
5. agan pasti ngelihat kodingan HTML 5nya kan. nah kalo gak salah seharusnya di tab DWnya nama filenya untitled ya? itu tandanya belom agan save.
6. sebelum di save. agan buat dulu folder misal letaknya di taro di desktop. kasih nama foldernya misal "duaruang.com"
7. jika sudah, agan buat folder lagi didalamnya, dengan nama "css"
8. nah kalo udah seharusnya didalam folder "duaruang.com" ada folder lagi yaitu folder "css"
9. kalo folder tersebut berhasil dibuat, agan balik lagi ke jendela aplikasi adobe DW.
10. agan save kedalam folder "duaruang.com", kasih nama filenya index.html
11. jika sudah, tab di aplikasi adobe DWnya harusnya udah jadi "index.html"
12. kalo udah, agan buat link seperti berikut <link href="#" rel="stylesheet">dan letakkan di dalam tag <head>
13. jika sudah dibuat link yang diatas, agan balik lagi ke downloadan yang bootstrap tadi.
14. agan extract dan cari file yang namanya bootstrap.min.css dan bootstrap.css
15. kalo udah, dicopy gan. dan di paste ke dalam folder "duaruang.com"->"css".
16. nah seharusnya sekarang didalam folder "css" sudah ada file bootstrap.min.css dan bootstrap.css
17. buka lagi windows aplikasi adobe DWnya, agan isi link hrefnya atau dengan cursor aktif berada di antara " " pada link href dan ketik ctr+space, maka akan keluar browse filenya.
18. ente browse deh file cssnya sesuai dengan folder yang tadi sudah kita buat.
19. nah dengan begitu maka tinggal diisi deh content websitenya, secara default website agan sudah responsive.
20. eh iya..jangan lupa ditambahkan ini ya "<meta name="viewport" content="width=device-width, initial-scale=1">" ke dalam tag <head>
sekian dulu sharin2 info dari ane. nanti dilanjutkan yang part 2
salam dari duaruang
bye gan
kalo suka ama threadnya jangan lupa kirim-kirim cendol ya gan
Halo gan..
mau sekedar sharing aja nih..
ada yang pernah denger website responsive?
ingin tahu seperti apa website responsive itu?
nah bagi yang belum tahu, ane tunjukkin nih seperti dibawah ini,
Spoiler for contoh website responsive :tampilan desktop:
Spoiler for contoh website responsive : tampilan Mobile:
nah sekarang sudah tahu kan gan?
pasti diantara agan-agan ada yang masih penasaran, bgmn cara membuat website seperti ini?
caranya mudah gan.
(dalam hal ini agan sudah mengetahui teknik dasar HTML dan CSS)
1. langkah pertama adalah agan download yang namanya framework css, misalnya seperti bootstrap.
2. lalu agan buat file html dulu menggunakan aplikasi editor website (ane biasanya pake adobe DW)
3. klik menu->file->pilih dropdown yang HTML 5(letaknya ada di kanan bawah).
4. kalo udah klik ok.
5. agan pasti ngelihat kodingan HTML 5nya kan. nah kalo gak salah seharusnya di tab DWnya nama filenya untitled ya? itu tandanya belom agan save.
6. sebelum di save. agan buat dulu folder misal letaknya di taro di desktop. kasih nama foldernya misal "duaruang.com"
7. jika sudah, agan buat folder lagi didalamnya, dengan nama "css"
8. nah kalo udah seharusnya didalam folder "duaruang.com" ada folder lagi yaitu folder "css"
9. kalo folder tersebut berhasil dibuat, agan balik lagi ke jendela aplikasi adobe DW.
10. agan save kedalam folder "duaruang.com", kasih nama filenya index.html
11. jika sudah, tab di aplikasi adobe DWnya harusnya udah jadi "index.html"
12. kalo udah, agan buat link seperti berikut <link href="#" rel="stylesheet">dan letakkan di dalam tag <head>
13. jika sudah dibuat link yang diatas, agan balik lagi ke downloadan yang bootstrap tadi.
14. agan extract dan cari file yang namanya bootstrap.min.css dan bootstrap.css
15. kalo udah, dicopy gan. dan di paste ke dalam folder "duaruang.com"->"css".
16. nah seharusnya sekarang didalam folder "css" sudah ada file bootstrap.min.css dan bootstrap.css
17. buka lagi windows aplikasi adobe DWnya, agan isi link hrefnya atau dengan cursor aktif berada di antara " " pada link href dan ketik ctr+space, maka akan keluar browse filenya.
18. ente browse deh file cssnya sesuai dengan folder yang tadi sudah kita buat.
19. nah dengan begitu maka tinggal diisi deh content websitenya, secara default website agan sudah responsive.
20. eh iya..jangan lupa ditambahkan ini ya "<meta name="viewport" content="width=device-width, initial-scale=1">" ke dalam tag <head>
sekian dulu sharin2 info dari ane. nanti dilanjutkan yang part 2
salam dari duaruang
bye gan
kalo suka ama threadnya jangan lupa kirim-kirim cendol ya gan
Diubah oleh duaruang 04-02-2015 09:14
0