√ Tutorial Membuat Desain Login Material Design HTML5 CSS3

June 05, 2019
Login merupakan halaman awal untuk kita masuk atau mengakses sebuah situs oleh karenanya sebuah login hendaksnya memiliki desain yang unik menarik interakktif dan responsive nah pada kesempatan ini saya  mau berbagi tutorial vagaimana caranya membuat desain login menarik dan interaktif menggunakan material design.

Baca Juga :
Belajar HTML Terlengkap | Apa itu HTML| Fungsi| Penjelasan dan Praktek Terlengkap
Cara Mudah Membuat Komentar di HTML, CSS, Javascript, PHP dan SQL
Tutorial Membuat CRUD React Native Data Pegawai Dengan PHP Mysql  

Pada kesempatan ini saya akan berbagi tutorial mengenai cara membuat sebuah desain login yang atraktif namun tetap simple digunakan oleh User, dengan mengusung tema Material Design dan dengan teknologi HTML5 dan CSS3.

Untuk hasil final projeknya seperti gambar di bawah ini :

Tutorial Membuat Desain Login Material Design HTML5 CSS3
 Persiapan :

1. Pastikan kamu memiliki text editor (Visual Stuido Code, SublimeText, Notepad dan lain sebagainya)

2. Pastikan kamu memiliki browser yang mendukung HTML5 (Chrome atau Mozilla)


Mulai Projek :
Buat sebuah directory/folder di komputermu seperti gambar di bawah ini :
1. Buat File index.html dan isi dengan code di bawah ini :


2. Buat folder dengan nama js dan di dalamnya buat sebuah file denga nama index.js

3. Buat sebuah folder dengan nama css, kemudian buat file dengan nama style.css, pada file ini digunakan untuk mendesain tampilan login web yang kita buat.

Sekian semoga artikel mengenai bagaimana cara membuat sebuah desain Login Material design menggunakan HTML5 dan CSS3 serta Javascript dan membantu kamu yang sedang mencari inspirasi untuk membuat sebuah tampilan login untuk website kamu.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda