Posts

Showing posts with the label HTML & CSS

Membuat Kolom Responsive Dengan HTML dan CSS

Image
Kali ini saya ingin sharing tutorial tentang bagaimana cara membuat kolom yang responsive pada website. Apa itu Website Responsive ? Website responsive adalah sebuah situs atau sebuah halaman website yang dimana kita bisa mengaksesnya di berbagai device dan situs itu bisa menyesuaikan bentuk halaman sesuai dengan device mulai dari komputer ,  laptop sampai smartphone . Sebagai contoh saja bisa dilihat gambar dibawah ini : Contoh diatas saya membuka lewat smartphone saya, maka bisa dilihat perbedaan tampilan pada saat di kita membuka di laptop dan melalui smartphone. Untuk membuatnya kita membutuhkan 2 tahap , yang pertama sebuah meta tag yang nantinya berfungsi sebagai pengontrol agar dapat mendeteksi ukuran device yang kita pakai dan tampilan situs kita akan menyesuaikannya. Meta tag yang kita pakai ialah : <meta name="viewport" content="width=device-width, initial-scale=1"> Cara pakai meta tag diatas ialah cukup letakan tepat ditengah <head> dan diat...
Post a Comment
Read more

Membuat Template Online Shop Simple

Image
Tutorial kali ini saya ingin sharing tentang bagaimana membuat design template online shop yang simple dengan html dan css saja. Alasan saya membuat design template ini karena ingin sekedar sharing saja dan untuk teman-teman saya yang ingin saya membuat design online shop ini. Nah, agar tidak lama-lama, silahkan perhatikan script dibawah ini : Sintak htmlnya untuk file index.html : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>ViraShop</title> <link rel="stylesheet" href="assets/style.css"/> <link rel="stylesheet" href="plugin/awesome/css/font-awesome.min.css"> </head> <body> <div class="container"> <div class="logo"> <h3>Vira Online Shop</h3...
Post a Comment
Read more

Membuat Design Website Dengan Thema Wonderful Indonesia

Image
Kali ini saya ingin sharing artikel yang berjudul  Membuat Design Website Dengan Thema Wonderful Indonesia . Pada artikel ini saya mendapat inspirasi design dari situs wonderful indonesia sendiri  http://www.indonesia.travel  , design ini terkesan sangat elegan dan bersih ketika masuk ke interface. Pada penggunaan jenis font saya menggunakan link online dari google font. Nah untuk codenya kamu bisa lihat dibawah ini : Baca juga :  Google Font Terbaik untuk Font Website dan Blog Buat dulu kode htmlnya seperti dibawah ini dan letakan pada text editor kamu :  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Welcome to Home Page</title> <link rel="stylesheet" href="style.css"/> <link href="https://fonts.googleapis.com/css?family=Coiny|Roboto" rel="stylesheet"/> </head> <body> <nav...
Post a Comment
Read more

Rekomendasi Text Editor Website Buat Kamu yang Suka Coding

Image
Buat kamu yang suka ngoding nih pastinya kamu perlu tau text editor yang recomended banget buat kamu kan, disini saya akan sharing text editor website yang wajib kamu pakai untuk teman codingmu tentunya semakin mempermudah kamu untuk mengetik program-program mulai dari program tingkat dasar sampai tingkat tinggi seperti menggunakan java dan freamwork yang sedang naik daun di tahun ini. Berikut ini beberapa text editor yang wajib buat kamu ketahui : Sublime Text  Sublime Text ini adalah text editor yang recomended banget buat kamu yang sudah jago coding ataupun baru belajar, kenapa ? karena di sublime text ini banyak fitur yang kamu bisa temukan dan bukan hanya itu kamu juga bisa custom setiap tool dan menambahkan plugin didalam nya seperti colorpicker dll. Untuk download aplikasi nya silahkan klik disini . Bracket Lanjut ke no 2, yaitu ada text editor yang tak asing lagi tentunya Bracket , bracket ini hampir sama seperti sublime namun yang membedakannya ialah ada suatu fitur yang ...
Post a Comment
Read more

Tips Mudah Mengenal Dasar-dasar HTML

Image
Buat kamu yang belum mengenal dunia website jangan kawatir ya, karena disini saya akan sharing kepada kamu mengenai dunia website, khususnya yang akan saya bahas sekarang ini yaitu HTML. Apa itu HTML ? HTML merupakan kerangka dasar dalam pembuatan sebuah website tentunya, dimana html ini berperan sebagai tubuh yang nantinya akan dilengkapi oleh bahasa pemrograman selanjutnya yang nantinya akan membangun sebuah halaman website. Sebuah html mempunyai struktur dasar seperti ini : <html> <head> <title>Judul haaman</title> </head> <body> Disini nantinya isi dari halaman </body> </html> Tag HTML  Tag Adalah teks khusus (markup) berupa dua karakter < dan > . Sebagai contoh dalam penulisan <body> dan ditutup dengan </body>. Element HTML  Elemen adalah isi dari tag yang berada diantara tag pembuka dan tag penutup. Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Nah pasti disini kamu b...
Post a Comment
Read more

2 Framework CSS yang Paling Populer 2018

Image
Bootstrap Framework yang satu ini adalah sebuah platform dari twitter yang awalnya dierkenalkan oleh twitter itu sendiri, dan sampai saat ini Bootstrap bukan hanya menjadi salah satu yang terbaik melainkan yang sangat populer dalam membangun dan mendesign sebuah situs website. Bootstrap menyediakan berbagai tool / componen  yang bisa kamu pakai secara praktis.  Materialize CSS Kita lanjut dengan Framework yang tidak kalah populernya yaitu Framework yang diciptakan sendiri oleh Perusahaan Raksaksa Google yang kita kenal sebagai mbah google, Framework ini bernama Materialize CSS Framework ini sangat cocok banget buat kamu yang sedang membangun sebuah aplikasi website yang memiliki tampilan yang dinamis dan UI tentunya. Sama halnya dengan Framework Bootstrap pada freamwork ini materialize memiliki banyak fitur dan componen yang bisa kamu gunakan untuk membangun websitemu tinggal copas dan tempatkan di bagian dari halaman websitemu. Link Framework CSS :    https://g...
Post a Comment
Read more

Trik Membuat Animasi Cortana Windows 10 CSS3

Image
Trik Membuat Animasi Cortana Windows 10 CSS3 ~ pada tutorial kali ini saya membahas yaitu trik membuat animasi cortana. Inspirasi membuat animasi ini saya dapatkan dari windows 10 yang terlihat sangat menakjubkan, Cortana merupakan sebuah system bantuan dari windows 10 yang bisa berbicara layaknya seorang manusia. Ok, dalam pembuatan animasi ini kita hanya membutuhkan bantuan dari sintak CSS3 yaitu   animation dan @keyframes , disini saya memberikan efek zoomin dan zoomout dalam pembuatan animasi cortana ini. Nah, mari teman-teman perhatikan langkah-langkah pembuatannya dibawah ini : 1. Langkah Pertama, buat dahulu sintak html seperti berikut atau teman bisa copas langsung : DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Animasi Cortana Windows 10</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="cortana"> <span><...
Post a Comment
Location: Ubud, Gianyar, Bali, Indonesia
Read more

Membuat Animasi Loading Keren Google

Image
Membuat Animasi Loading Keren Google  ~ Pada Tutorial kali ini saya membahas bagaaimana cara membuat animasi loading layaknya google. Nah tutorial kali ini kita akan menggunakan properti dari CSS3 untuk pembuatan animasi tersebut yaitu kita menggunakan animation dan @keyframes.   Animasi Loading Keren Google ini nantinya akan bergerak naik turun seperti ombak. Ok Langsung  saja teman-teman perhatikan langkah pembuatan loading dibawah : 1. Langkah yang pertama silahkah buat dulu kode htmlnya seperti berikut atau langsung saja copas ke text editor : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Animasi Spinner With CSS3</title> <link rel="stylesheet" href="Assets/css/style.css"> </head> <body> <h3>Animasi Loading Keren Google</h3> <div class="circle"> <span></span> <span></span> <span></span> ...
Post a Comment
Read more

Membuat Menu Sidebar Keren

Image
     Tutorial Kali ini saya memberikan teman-teman sebuah tutorial yaitu Membuat Menu Sidebar Keren dan beserta Effect Animasinya . Menu Sidebar merupakan sebuah menu navigasi yang sama seperti menu lainnya tetapi penempatan menu ini lebih cenderung di bagian kiri atau kanan dari content sebuah website.      Nah, ditutorial ini saya hanya menggunakan sintak html5 dan css3 untuk pembuatanya. Pada bagian animasi saya menggunakan kode dari CSS3 yaitu keyframes, fungsi dari keyframes ini sendiri ialah untuk mengatur waktu /timming sebuah animasi yang akan kita buat nantinya dan juga menggunakan sintak animation untuk penamaan animasi tersebut. Ok langsung saja perhatikan kode dibawah ini : 1. Langkap pertama silahkan teman-teman buat terlebih dahulu sintak htmlnya, seperti berikut : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sidebar Menu</title> <link rel="stylesheet" href="Assets/css/s...
Post a Comment
Read more

Mempercantik Tampilan Table Dengan CSS

Image
    Mempercantik tampilan sebuah table dengan CSS , agar tampilan table menjadi lebih elegan dari yang sebelumnya tampilannya masih biasa. Jadi CSS disini berperan sebagai mempercantik tampilan sebuah table dengan sedikit sentuhan dari CSS. Ok Langsung saja kita praktekan kodingnya dan silahkan teman-teman perhatikan langkah dibawah ini : 1. Langkah yang pertama ialah buat dahulu tag html dan kode table dengan menggunakan html terlebih dahulu. Seperti berikut : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tabel</title> <link rel="stylesheet" href="style.css"> </head> <body> <br> <br> <center><h1>Mempercantik Table dengan CSS</h1></center> <br> <br> <!-- ini merupakan kode table html --> <table> <thead> <tr> <th>No</th> <th>Nama Siswa</th> <th...
Post a Comment
Read more

Membuat Sticky Menu dengan HTML CSS dan JQuery

Image
Membuat sticky menu dengan html,css dan jquery.  Pada tutorial kali ini saya ingin membagikan sebuah tutorial yaitu cara membuat sticky menu dengan menggunakan Html,Css dan Jquery. Apa sih sticky menu ?? oke saya akan menjelaskan apa itu sticky menu ialah sebuah animasi pada navigasi yang digunakan agar navigasi berada paling atas saat scrollbar di scroll ke bawah. Ok langsung saja teman-teman perhatikan kode dibawah ini : 1. Langkah pertama silahkan teman-teman buat terlebih dahulu sintak htmlnya seperti berikut : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Membuat Sticky Menu dengan Jquery dan CSS</title> <link rel="stylesheet" href="Assets/css/style.css"> </head> <body> <header> <h1>Sticky Menu</h1> </header> <nav> <div class="container"> <div class="brand"><img src="Assets/img/logo3.png...
Post a Comment
Location: Ubud, Gianyar, Bali, Indonesia
Read more

Tutorial CSS Skeleton Lengkap Beserta Penjelasan

Image
Tutorial CSS Skeleton  Lengkap Beserta Penjelasan  ~ Pada tutorial kali ini saya ingin sharing ilmu tentang cara menggunakan CSS Skeleton. Untuk pendahuluan saya akan menjelaskan apa itu CSS Skeleton ? CSS Skeleton merupakan Freamwork CSS sama persis cara menggunakan Bootstrap, teteapi CSS Skeleton ini lebih memfokuskan kita pada penggunaan nama class yang menggunakan bahasa inggris.  Seperti contoh : Class=" twelve columns " ; // penggunaan grid pada css skeleton Class=" u-full-width " ; // penggunaan form input pada css skeleton Cara menggunakan CSS Skeleton pada text editor : Kunjungi dahulu situs resminya , dilahkan klik link berikut http://getskeleton.com/ Pada halaman pertama terdapat tombol download bewarna biru. Seperti dibawah ini : Pada gambar diatas silahkan teman-teman klik tombol download maka akan menghasilkan sebuah download seperti  berikut : Jika sudah muncul, silahkan download langsung dan extract file tersebut, lalu klik kanan pada index.html d...
Post a Comment
Location: Ubud, Gianyar, Bali, Indonesia
Read more

Trik Membuat Animasi Down HTML CSS3

Image
Tips Membuat Animasi Down HTML dan CSS3 ~Pada tutorial kali ini saya ingin membagikan sebuah tutorial yaitu mengenai Tips membuat animasi menggunakan CSS3 , di css3 ini saya banyak menggunakan kode animasi @keyframes dan animation beserta durasinya yang nantinya bisa memunculkan sebuah animasi pada website teman-teman. Animasi Down ini berarti animasi yang turun dari atas ke bawah, Ok langsung saja teman-teman perhatikan tahap-tahapnya : 1. Pertama teman-teman buat dahulu tag html-nya, seperti dibawah ini : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Membuat Animasi Turun</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="title"> <h2 class="caption">Animasi Down CSS3</h2> </div> <div class="bounce"> <img src="img/bg1.jpg" alt="contoh gambar" class=...
Post a Comment
Read more