Tutorial Pemrograman

Cara Membuat Halaman Sign In & Sign Up Responsive dengan CSS3

Dengan bantuan dari bahasa pemograman CSS3, kita dapat dengan mudah membuat halaman Sign In – Sign Up yang responsive. Bagaimana cara membuatnya? Yuk langsung saja ikuti beberapa langkah berikut untuk membuat halaman Sign In – Sign Up responsive dengan CSS3.

1. Buka XAMPP Control Panel, serta aktifkan Apache.

2. Buka program teks editor yang ter-install di komputer kamu, disini saya menggunakan teks editor Notepad++. Ketikkan kode HTML5 berikut ini.

Simpan kode HTLM5 di atas di folder xampplite → htdocs → buat folder baru dengan nama SignInSignUpForm → simpan kode di atas dengan nama index.html.

3. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/SignInSignUpForm.

4. Untuk merapikan tampilan, ketikkan kode CSS3 berikut ini.

Simpan kode CSS3 di folder xampplite → htdocs → buat folder baru dengan nama SignInSignUpForm → simpan code CSS3 dengan nama style.css.

5. Reload alamat url : http://localhost/SignInSignUpForm. Ketika tombol Sign In di-klik, maka akan muncul form sign in.

Ketika tombol Sign Up di-klik, maka akan muncul form Sign Up.

6. Selesai.

Catatan:

  1. Htdocs adalah salah satu folder bawaan dari XAMPP, yang tugasnya khusus untuk menyimpan berkas-berkas yang akan dijalankan, seperti berkas PHP, HTML, CSS, dan JavaScript.
  2. Kemudian, mungkin ada yang menanyakan maksud dari http://localhost/SignInSignUpForm. Localhost merupakan server lokal pada computer. Localhost dapat diaktifkan ketika kamu meng-klik start Apache di XAMPP Control Panel. SignInSignUpForm menunjuk pada folder SignInSignUpForm saya di xampplite → htdocs. Serta, index.html dan style.css adalah nama file yang tersimpan script code di atas.

Demikian penjelasan dari tutorial ‘Cara Membuat Halaman Sign In – Sign Up Responsive dengan CSS3’. Selamat mencoba.

Tutorial Lainnya dari Penulis:









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed!

        

Berlangganan Tutorial Gratis Melalui Email!

Copyright © 2020 Inwepo - All Rights Reserved.

To Top