Sunday, September 30, 2018

Tutorial Sublime Text #1: Instalasi Sublime Text

      Comment  

Pada tutorial ini, kita akan belajar bagaimana cara menginstall text editor yang paling populer yaitu Sublime Text, dimana kita akan menginstallnya di sistem operasi Windows, sebenarnya Sublime Text tidak hanya untuk sistem operasi Windows saja, tetapi Sublime Text juga tersedia untuk Linux dan MacOS. Baiklah langsung kita mulai saja, saya harap kalian memperhatikan tutorial ini dengan baik.

Note
Jika kalian belum mempunyai aplikasi Sublime Text silahkan kalian download  aplikasinya pada lihat berikut https://www.sublimetext.com 

 Mari Kita Mulai !

Silahkan kalian jalankan setup aplikasi Sublime Text nya, jika kalian sudah menjalankannya, akan tampil seperti gambar berikut.


Selanjutnya kalian pilih tombol Next, setelah itu akan tampil seperti gambar berikut.


Pada tahap ini kalian akan memilih destinasi folder atau dimana letak lokasi menginstall aplikasi Sublime Text, yang dimana pada kasus kali ini letak destinasi folder tempat menginstall aplikasi Sublime Text pada local C:\Program Files\Sublime Text 3, jika kalian ingin menginstallnya pada destinasi folder yang lain, silahkan klik tombol Browse, kemudian pilih destinasi folder yang kalian inginkan, kemudian klik tombol Next, selanjutnya akan tampil seperti gambar berikut.


Pilih tombol Next, selanjutnya akan tampil seperti gambar berikut.


Pilih tombol Install, setelah itu kalian tunggu proses instalasi selesai. Jika proses instalasi telah selesai, selanjutnya akan tampil seperti gambar berikut.


Pilih tombol Finish, setelah itu silahkan kalian jalankan aplikasi Sublime Text yang telah terinstall, seperti gambar berikut.


Berhasil ! kita telah menginstall aplikasi Sublime Text di sistem operasi Windows. 

Sekian tutorial ini, jika ada kesalahan pada tutorial ini, silahkan berikan komentar kalian ya, terima kasih atas perhatiannya, mohon maaf jika ada kesalahan, semoga tutorial ini bermanfaat, sampai jumpa di tutorial selanjutnya.

Kalian Luar Biasa !!!

Friday, March 9, 2018

Tutorial Membuat Navbar Responsive

      Comment  

Hai semuanya...

Pada artikel kali ini kita akan belajar membuat navbar responsive dengan HTML dan CSS, penasaran bagaimana cara membuatnya, yuk kita langsung mulai belajar membuatnya.

Langkah pertama, kita akan menggunakan library icon yaitu Font Awesome untuk digunakan pada navbar, silahkan copy dan paste code berikut dibawah tag <head>.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
Langkah kedua, tulis syntax HTML seperti dibawah ini. 
  <nav class="navbar" id="nav">
  <a href="#" class="active"><span class="fa fa-code"></span> Kode Kuliahan</a>
  <a href="#">Blog</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="#" class="bars" onclick="toggleItem()">
    <span class="fa fa-bars"></span></a>
</nav>
Langkah ketiga, tambahkan syntax CSS seperti berikut. 
  .navbar{overflow: hidden;background-color: #1d1d1d;}
  .navbar a{
    display: block;
    float: left;
    text-decoration: none;
    text-align: center;
    color: #fff;
    padding: 25px 20px;
  }
  .navbar a:hover{background-color: #0058ee;}
  .active{background-color: #0058ee;}
  .navbar .bars{display: none;}

  @media screen and (max-width:600px){
    .navbar a:not(:first-child){display: none;}
    .navbar a.bars{
      display: block;
      float: right;
    }
  }
  @media screen and (max-width:600px){
    .navbar.item{position: relative;}
    .navbar.item .bars{
      position: absolute;
      right: 0;
      top: 0;
    }
    .navbar.item a{
      float: none;
      display: block;
      text-align: left;
      
    }
  }
Langkah keempat, tambahkan syntax Java Script seperti berikut. 
  function toggleItem(){
    let n = document.getElementById('nav');
      if(n.className === 'navbar'){
        n.className += ' item';
      }else{
        n.className = 'navbar';
      }
    }
Hasilnya dapat dilihat pada gambar dibawah ini.


Ketika browsernya diresize menjadi 600px, maka tombol bars akan mucul, seperti gambar berikut ini.


Sehingga kita dapat mengklik tombol barsnya dan akan memunculkan itemnya, dapat dilihat seperti gambar dibawah ini.


Sekian dulu tutorial membuat navbar responsive, semoga bermanfaat, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah, terima kasih.

Tutorial Membuat Fullscreen Modal Search Form

      Comment  

Hai semuanya,  pada tulisan kali ini kita akan belajar membuat fullscreen modal search dengan HTML dan CSS, langsung kita mulai belajar membuatnya.
Langkah Pertama, kita akan menggunakan library icon yaitu Font Awesome, copy dan paste kode dibawah tag <head>.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Langkah Kedua, silahkan tulis syntax HTML seperti dibawah ini. 
<!-- modal -->
<div class="modal" id="search-modal">
<!-- trigger untuk menutup modal -->
  <span class="btn-close" onclick="closeModal()" title="Close">
    <i class="fa fa-close"></i></span>
    <!-- isi modal -->
  <div class="modal-content">
    <p>Pencarian</p>
    <form action="#">
      <input type="text" placeholder="Cari">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div> <!-- end modal -->
<!-- trigger untuk menampilkan modal -->
<button class="trigger" onclick="openSearch()">
  <i class="fa fa-search"></i> Klik Search</button>
Hasilnya awalnya dapat dilihat pada gambar dibawah ini.
Langkah ketiga, silahkan tulis syntax CSS seperti dibawah ini. 
.trigger{
      background-color: #007afa;
      border: none;
      padding: 15px;
      cursor: pointer;
      color:#fff;
      border-radius: 7px;
    }
    .modal{
      width: 100%;
      height: 100%;
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.9);
    }
    .modal-content{
      position: relative;
      top: 35%;
      width: 80%;
      text-align: center;
      margin: 30px auto 0;
    }
    .modal-content p{
      font-size: 40px;
      color: #fff;
    }
    .modal .btn-close{
      position: absolute;
      top: 20px;
      right: 45px;
      cursor: pointer;
      color: #fff;
    }
    .modal input[type=text]{
      width: 80%;
      float: left;
      border: none;
      padding: 15px;
      box-sizing: border-box;
    }
    .modal button{
      width: 20%;
      float: left;
      border: none;
      padding: 15px;
      cursor: pointer;
      background-color: #007afa;
      color: #fff;
    }
Langkah keempat, silahkan tulis syntax Java Script seperti dibawah ini. 
// fungsi untuk membuka modal search
  function openSearch(){
    document.getElementById('search-modal').style.display = "block";
  }
  // fungsi untuk menutup modal search
  function closeModal(){
    document.getElementById('search-modal').style.display = "none";
  }
Jadi, ketika kita mengklik tombol "Klik Search", maka modalnya akan tampil, contohnya dapat dilihat pada demo berikut.

See the Pen Fullscreen Modal Search by Karis Maulana (@karismaulana) on CodePen.

Demikian cara membuat fullscreen modal search form dengan HTML, CSS, semoga tutorial ini bermanfaat, jika ada pertanyaan mengenai tutorial ini, silahkan tulis komentar anda dibawah.

Terima kasih telah berkunjung.

Monday, February 19, 2018

Membuat Scroll Indikator Dengan HTML, CSS Dan Java Script

      1 comment  

Hai semuanya, pada tutorial kali ini kita akan belajar membuat scroll indicator dengan HTML, CSS dan Java Script, agan mau tau cara buatnya, yuk kita langsung mulai belajar membuat scroll indicator.

Bagi anda yang ingin mendownload source code dari tutorial ini, anda dapat mendownloadnya pada link dibawah ini.

Download

Pertama, tulis syntax HTML seperti dibawah ini.
<header>
  <nav>
    <a href="">Kode Kuliahan</a>
    <div class="left">
    <a href="">Home</a>
    <a href="">Blog</a>
    <a href="">About</a>
    <a href="">Contact</a>
    </div>
  </nav>
  <div class="progress">
    <div class="progress-indicator" id="scroll-bar"></div>
  </div>
</header>
<article>
<p>
<h1>Perbedaan Front End, Back End Dan Full Stack Developer</h1>
<hr>
<h1>Front End</h1>
Jadi apa yang dimaksud dengan Front-end? Front-end merupakan bagian daru suatu website yang pengguna bisa dan dapat di interaksi secara lanngsung, Front-end terdiri dari HTML, CSS, dan JavaScript. HTML (HyperText Markup Language) merupakan penompang dasar suatu website, semua website yang akmu kunjungi dibuat dengan HTML. HTML menangani semua struktur yang ada di website tersebut walaupun situs yang dibuat dengan versi yang lama masih berjalan dengan lancar dengan browser Anda.....
</p>
<p>
<h1>Back-End</h1>
Dimana Front-end menangani semuanya yang berkaitan interaksi langsung pengguna, back-end seperti namanya lebih mengerjakan di behind-the-scenes dan mempunyai keunggulan lebih daripada teknologi front-end untuk projek yang lebih spesifik. Bahasa program Back-end terdiri dari PHP, Ruby, Phython dan lainnya....
</p>
<p>
<h1>Full-Stack</h1>
Developer full-stack bekerja di front dan back end suatu website, mereka mengathui cara kerja HTML, CSS, JavaScript dan satu atau mungkin lebih bahasa program back-end. Seiring waktu berjalan apa yang bisa dilakukan dengan menggunakan bahasa program front dan back end menjadi lebih mirip dan susah dibedakan, dan dimana suatu masalah dulu hanya bisa diatasi dengan menggunakan back end, sekarang menjadi tidak mustahil bila menggunakan front-end,As the line developer menjadi apa yang kita sebut “full stack.” banyak pekerja (terutama agency yang menggunakan berbagai website) mencari developer yang tahu bagaimana cara kerja semua bagian di website tersebut....
</p>
<h2>Sumber Artikel</h2>
<a href="https://beyonder.asia/apa-perbedaan-dari-front-end-back-end-full-stack-developer/">
  https://beyonder.asia/apa-perbedaan-dari-front-end-back-end-full-stack-developer/
</a>
</article>
Kedua, setelah anda menulis syntax HTML yang cukup panjang, tulis syntax CSS seperti dibawah ini. 
header{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      display: table;
      clear: both;
      background-color: #282828;
    }
    nav{
      width: 90%;
      margin: auto;
    }
    nav a{
      display: inline-block;
      padding: 20px 10px;
      text-decoration: none;
      color: #fff;
    }
    .left{float: right;}
    .progress{
      width: 100%;
      height: 4px;
      background-color: #ccc;
    }
    .progress-indicator{
      width: 0%;
      height: inherit;
      background-color: #1b9dc6;
    }
    article{
      width: 80%;
      margin: 100px auto 0;
      text-align: justify;
    }
Ketiga, tulis syntax Java Script seperti dibawah ini. 
// ketika halaman discroll jalankan fungsi scrollIndicator()
window.onscroll = function(){scrollIndicator();}

function scrollIndicator(){
  let pageScroll = document.body.scrollTop || document.documentElement.scrollTop;
  let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  let scroll = (pageScroll / height) * 100;
  document.getElementById('scroll-bar').style.width = scroll + "%";
}
Hasilnya, anda dapat melihatnya pada gambar bawah ini.


Jadi, ketika kita scroll halamannya kebawah, maka scroll indicatornya yang berwarna biru akan berjalan, dapat dilihat gambar dibawah ini.



Seperti yang kita lihat pada gambar diatas ini, indicator scrollnya berjalan.

Demikian, tutorial cara membuat scroll indicator dengan HTML, CSS dan Java Script, jika ada kesalahan, kekurangan atau hal hal lainnya silahkan tulis komentar anda pada kolom komentar dibawah ya, terima kasih.

Semoga Bermanfaat.

Cara Membuat Form Newsletter Dengan HTML Dan CSS

      Comment  

Hai semuanya, pada tutorial kali ini kita akan belajar membuat design form newsletter dengan HTML dan CSS, langsung kita mulai belajar cara membuatnya.

Bila anda ingin mendownload source code tutorial ini, anda dapat mendownloadnya pada link dibawah ini.

Download

Pertama, kita membutuhkan library Font Awesome untuk menggunakan sebuah icon, untuk menggunakan library Font Awesome, silahkan copy dan paste tag link ini dibawah tag <head>.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Kedua, tulis syntax HTML seperti dibawah ini. 
<form action="#" method="get">
  <div class="icon">
    <span class="fa fa-envelope"></span>
  </div>
  <p><strong>Newsletter</strong></p>
  <p>Dapatkan artikel terbaru dari kami, langsung via email anda.</p>
  <label><span class="fa fa-user"></span> Nama Lengkap
    <input type="text" placeholder="Masukkan nama lengkap anda">
  </label>
  <label><span class="fa fa-envelope-o"></span> Email
    <input type="email" placeholder="Masukkan email yang valid">
  </label>
  <button type="submit"><span class="fa fa-send"></span> Kirim</button>
</div>
Selanjutnya, jika anda telah menulis syntax HTML diatas, tulis syntax CSS seperti dibawah ini. 
form{
      width: 100%;
      max-width: 300px;
      padding: 15px;
      text-align: center;
      background-color: #199e46;
      color: #fff;
    }

    label,input{
      display: block;
      margin-bottom: 12px;
      font-size: 12px;
    }

    input{
      width: 100%;
      padding: 10px 14px;
      border-radius: 20px;
      border: none;
      margin-top: 7px;
      box-sizing: border-box;
      color: #199e46;
    }

    button{
      padding: 10px;
      width: 100%;
      border: none;
      border-radius: 20px;
      background-color: #199e46;
      border: 2px solid #fff;
      color: #fff;
      cursor: pointer;
      transition: .3s;
    }
    button:hover{
      background-color: #fff;
      color: #199e46;
    }
    .icon{
      width: 150px;
      height: 150px;
      margin: auto;
      border-radius: 50%;
      background-color: #fff;
      color: #199e46;
      line-height: 150px;
      text-align: center;
      font-size: 100px;
    }
Untuk hasilnya, anda dapat melihat hasilnya pada gambar dibawah ini.


Bagaimana menurut anda, design form newsletternya udah bagus atau belum nih ?

Demikian, cara membuat design form newsletter dengan HTML dan CSS, semoga anda tertarik belajar membuatnya. Jika ada kesalahan, kekurangan atau hal hal lainnya silahkan tulis komentar anda pada kolom komentar dibawah ya, terima kasih

Semoga Bermanfaat.

Membuat Animasi Gambar Bergetar Dengan HTML Dan CSS

      3 comments  

Hai semuanya,  pada tutorial kali ini kita akan belajar mengenai cara membuat animasi gambar bergetar dengan HTML dan CSS, langsung kita mulai belajar membuatnya.

Pertama, tulis syntax html seperti dibawah ini. 
<h1>Animasi Gambar Bergetar</h1>
<p>Hover gambar dibawah ini.</p>
<img src="gambar.jpg" alt="Gambar Bergetar">
Kedua, setelah menulis syntax HTML diatas, tambahkan syntax CSS seperti dibawah ini. 
img:hover{
    animation: bergetar 0.4s;
    animation-iteration-count: infinite;
  }
  @keyframes bergetar {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }
Untuk melihat hasilnya, anda dapat melihanya pada demo animasi gambar bergetar dibawah ini.

Animasi Gambar Bergetar

Hover gambar dibawah ini.
Gambar Bergetar

Demikian, cara membuat animasi gambar bergetar dengan HTML dan CSS, semoga anda tertarik membuat animasi tersebut. Jika ada kesalahan, kekurangan atau hal hal lainnya, silahkan tulis komentar anda pada kolom komentar dibawah ya, terima kasih.

Semoga Bermanfaat.