How to edit source code with inspect element google chrome

How to edit source code with inspect element google chrome

how to edit css on google chrome

Jadi ceritanya guwe baru tau kalau kita bisa ngoding css lewat inspect element google chrome, dan file cssnya bisa kita simpan buat css web kita. So, malam ini guwe akan sharing mengenai gimana sih kita bisa coding css sambil langsung tahu hasilnya, mungkin kalau kalian basic nya android persis seperti kita coding xml kita bisa lihat previewnya, nah di web ceritanya bisa gitu kita coding di inspect element kemudian kalian bisa lihat langsung perubahannya.

Terus bagaimana step-stepnya?  

Mari kita langsung saja praktekkan, berikut caranya :

1. Silahkan kalian siapkan file html dan css nya (file kosongan aja gak usah diapa-apain)

2. Silahkan kalian edit html nya seperti dibawah ini :

3. Kemudian silahkan simpan dan buka dengan google chrome sehingga seharusnya tampilannya seperti ini

how to coding web with inspect element google chrome

4. Selanjutnya silahkan kalian buka inspect element, caranya bagaimana? bisa dengan klik kanan pada bidang yang kosong dan pilih inspect atau shortcut untuk inspect element adalah dengan menekan tombol ctrl+shift+i, sehingga muncul tampilan seperti ini

inspect elemet google chrome

5. Langkah terakhir adalah kita tinggal tambahkan code css di setiap tag yang diinginkan. caranya bagaimana, gampang aja sih kalian tinggal klik tombol plus (+) di sebelah kanan dari code diatas, seperti ini

how to edit source code with inspect element google chrome

Pada gambar diatas terdapat tombol plus (+) kan di paling kanan atas, kalian bisa klik dan sekarang kalian bisa edit css buat tag body (soalnya aku tadi pilih tag body, kalau kamu pingin ubah tampilan tag lain tinggal pilih tagnya dan tekan tombol +, that is very easy guys)

6. Ini yang paling akhir, jika semua code css sudah beres, kalian juga bisa mendownload nya, kalian tinggal klik link nya aja. contoh

how to edit source code with inspect element (klik inspector-sylesheet:8 untuk download css nya)

how to edit source code with inspect element (hasil css nya tinggal copy paste ke style.css)

Nah, all is done guys tinggal di coba aja sih, ini tips keren buat kamu para programmer web development. khususnya front end kali ya hehe

Tips :

*Jangan sekali-kali tekan refresh ya gan nanti kamu ngulang dari awal lagi kecuali emang sudah di simpan dengan cara klik link seperti cara terakhir tadi..

Tutorial how to edit source code with inspect element dengan google chrome sudah selesai waktunya guwe pamit mau ngopi dan see you next time, seperti biasa jangan lupa untuk like fans page guwe di facebook My Quotes10. Thank you gaes