Cara Membuat Darkmode HTML, CSS Dan Js

-

 


dark mode adalah skema warna pada interface yang menampilkan teks cerah di atas latar belakang yang gelap, menurut Phone Arena.

Langsung saja ke cara membuat nya, lesgooo!

Bahan dan Alat :

1. Leptop/komputer/hp
2. Teks editor. Leptop (vscode), Handphone (TrebEdit)

Langkah Pengerjaan :

1. Buka teks editor kalian
2. Buat file darkmode.html. lalu buat struktur html dan masukan sintak di bawah ini dalam tag body:


3. Buat file style.css. lalu ketikan code ini:


4. Buat file script.js. lalu ketikan code ini:


5. Hubungkan ke 3 file tersebut, seperti di gambar:


6. Jika sudah, maka akan menghasilkan seperti ini





Ya, begitu cara membuat darkmode dengan menggunkan HTML, CSS, dan Javascript.












Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Membuat Bunga Menggunakan Bahasa Pemrograman Python

-
Gambar
Membuat Bunga Menggunakan Bahasa Pemrograman Python Apa itu Python? Python merupakan bahasa pemrograman tingkat tinggi yang diracik oleh Guido van Rossum. Python dikenal dengan bahasa pemrograman yang mudah dipelajari, karena struktur sintaknya rapi dan mudah dipahami. Bahkan jika ingin mengeluarkan "hello word" saja sangan mudah tinggal ketik :  print "hello word" Persiapan alat untuk membuat bunga 1. Python: Interpreter yang menerjemahkan bahasa python ke bahasa mesin, sehingga program bisa dijalankan. 2.Teks Editor/IDE: Program yang digunakan untuk menulis kode. Disini kita menggunakan visual studio code. 3.download terlebih dahulu extension yang bernama  "Python" di Visual studio code kalian  Langkah Pengerjaan : 1. Buat file di teks editor kalian dengan nama bungan.py   2. Ketikan code ini :  import turtle s = turtle.Screen() t = turtle.Turtle() s.bgcolor('#262626') t.pencolor('#540d6e') t.speed(100) col = ('#ee4266', '#ff...
Baca selengkapnya

7 Rekomendasi Channel YouTube untuk belajar coding

-
Gambar
Kalian ingin belajar bahasa pemrograman/coding? Tapi takut mahal? Mahal itu jika kalian mengikuti pelatihan pelatihan/workshop. Disini saya akan membagikan 7 Channel YouTube untuk belajar coding. Siapa saja ikuti saya! 1. Web Programming UNPAS Di Channel YouTube ini kalian bisa belajar bahasa pemrograman dengan sangat lengkap. Web Programming UNPAS banyak menyediakan Vidio-Vidio untuk belajar bahasa pemrograman mengenai Front End  dan BackEnd. Front End contohnya Html dasar, CSS dasar, JavaScript, dan masih banyak lagi. Sedangkan BackEnd ada bahasa PHP, JavaScript lanjutan, laravel dan banyak lagi yang lain nya. Jika ingin lengkap kunjungi saja Channel YouTube  Web Programming UNPAS 2. Dea Afrizal Di Channel YouTube ini kita bisa banyak belajar mengenai dunia programmer itu bagaimana saja. Tak hanya itu Dea Afrizal juga sering memberikan pembelajaran-pembelajaran mengenai bahasa pemrograman yang sering digunakan di dunia programmer. Seperti React Js, Nodejs, Express Js, Api da...
Baca selengkapnya

Animasi loading dengan css

-
Gambar
  Loading merupakan sebuah istilah yang digunakan untuk penunjuk bahwa sedang dalam proses muat/refresh. Loading juga banyak jenis nya seperti gambar di atas.  Mari kita mencoba membuat animasi loading, menggunakan CSS. Bagaimana cara nya ikuti saya. Langkah pengerjaan 1. Siapkan teks editor kalian 2. Buatlah sebuah file loading.html 3. Buat struktur html 4. Ketikan sintak berikut didalam tag <body>       Html 5. Buat file baru style.scc 6. Sambungkan file CSS dengan html yang sudah dibuat, dengan mengetikan sintak dibawah ini dalam file html di dalam tag <head> 7. Masukan sintak dibawah ini kedalam file CSS Css 8. Masukan juga animasi dengan mengetikan code ini Animation 9. Run file html, dan yang akan di hasilkan dari kedua file tersebut adalah sebagai berikut: Hasil Ya, begitulah cara membuat animasi loading dengan menggunakan CSS. Sekian dari saya terimakasih ~Zenprojek~  
Baca selengkapnya