Modern Web Design With Javascript

Desember 11, 2021 Posting Komentar

Hallo apakabar semua, sesuai dengan judul pada project kali ini kita akan membuat desain menggunakan javascript tentu saja tidak hanya javascript ya, yang pastinya ada HTML dan CSS lalu untuk apa javascript jika kita sudah dapat melakukan desain dengan hanya menggunakan CSS saja? mungkin pertanyaan tersebut muncul ketika melihat judul diatas.

Jawabannya…

Javascript akan kita gunakan untuk melakukan manipulasi terhadap perintah-perintah CSS yang ada pada tag HTML, sehingga CSS yang sudah kita desain dapat melakukan perintah sesuai dengan yang kita inginkan o ya sebelum melanjutkan project kita saya harapkan kalian sudah mengenal dasar HTML dan CSS ya paling tidak paham apa itu tag,selector,class,id pokoknya yang berkenaan dengan hal tersebut.

Project apa yang akan kita buat?

Project yang akan kita buat terdiri dari tiga project diantaranya adalah :

Image Extender
Rotating
Blury Loading

Apa saja yang kita butuhkan

Visual Studio Code

Untuk membuat project diatas kita perlu menginstal Visual Studio Code sebagai kode editor serta beberapa extension yang dapat membantu kita mempermudah dalam membuat program, adapun extension yang kita butuhkan adalah :

Live Server, digunakan untuk menjalankan kode html agar selalu berjalan ketika koding kita sedang diedit sehingga kita tidak perlu membuka atau menutup browser serta tidak perlu menekan tombol refresh.
Prettier, digunakan untuk merapihkan koding sehingga kita tidak perlu merapihkan secara manual tentu saja extension ini sangat berguna karena selain dapat membuat kodingan kita lebih rapih kita juga dapat mengehmat waktu.
Auto Rename Tag, berguna untuk mengganti nama tag secara otomatis, misalnya ketika kita akan mengganti tag <h1> menjadi <h2> maka pembuka dan penutup harus kita ketik, dengan adanya extension ini kita hanya perlu mengganti tag pembuka nya saja maka tag penutu akan secara otomatis berubah.
Bracket Pair Colorizer, berguna untuk mewarani bracket pembuka dan penutup.

Image Extender

Ketika Aplikasi dijalankan maka tampilannya kira-kira seperti gambar diatas, terlihat seperti galery yang memuat beberapa gambar kemudian jika salah satu gambar diklik ukuran lebar gambar akan berubah menjadi lebih panjang dan yang lainnya menjadi mengecil.

Langkah – Langkah

untuk membuat aplikasi diatas kita akan membuatnya dengan 3 langkah sederhana diantaranya adalah :

Membuat HTML
Desain Menggunakan CSS
Membuat Perintah Javascript

Membuat HTML

Buatlah sebuah folder baru pada komputer anda bebas untuk diletakan disana saja karena aplikasi ini akan berjalan pada sisi client (Front End) tidak membutuhkan Software khusus. saya akan membuat folder di desktop dengan nama Project kemudian didalam folder tersebut saya tambahkan sebuah folder baru dengan nama Image Extender kemudian buka dengan Visual Studio Code dengan cara klik menu File-Open Folder

Membuat Project Visual Studio Code — Membuat File Baru VS Code

Tambahkan tiga file baru seperti gambar diatas yang terdiri dari file index.html, style.css dan script.js untuk membuat file baru perhatikan gambar diatas caranya dengan melakukan klik kanan pada kolom sebelah kiri kemudian pilih New File.

Koding HTML

Koding CSS

Koding Javascript

Rotating Navigation

untuk membuat project ini langkahnya sama seperti pada project sebelumnya silahkan buat sebuag folder baru dengan nama Rotating Navigation kemudian buka dengan visual studio code dan buatlah tiga buah file dengan nama index.html, style.css,script.js jika sudah tambahkan koding berikut :

Membuat HTML (index.html)

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />    <link rel="stylesheet" href="style.css" />    <title>Rotasi</title>  </head>  <body>    <div class="container">      <div class="circle-container">        <div class="circle">          <button id="close">            <i class="fas fa-times"></i>          </button>          <button id="open">            <i class="fas fa-bars"></i>          </button>        </div>      </div>      <div class="content">        <h1>Amazing Article</h1>        <small>Florin Pop</small>        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores cupiditate, maxime aliquid impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro laborum minus, illo, maiores recusandae cumque ipsa quos. Tenetur, consequuntur mollitia labore pariatur sunt quia harum aut. Eum maxime dolorem provident natus veritatis molestiae cumque quod voluptates ab non, tempore cupiditate? Voluptatem, molestias culpa. Corrupti, laudantium iure aliquam rerum sint nam quas dolor dignissimos in error placeat quae temporibus minus optio eum soluta cupiditate! Cupiditate saepe voluptates laudantium. Ducimus consequuntur perferendis consequatur nobis exercitationem molestias fugiat commodi omnis. Asperiores quia tenetur nemo ipsa.</p>        <h3>My Dog</h3>        <img src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="doggy" />        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerum quo, incidunt vel consequatur culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam at aliquid. Perferendis totam placeat molestias illo laudantium? Minus id minima doloribus dolorum fugit deserunt qui vero voluptas, ut quia cum amet temporibus veniam ad ea ab perspiciatis, enim accusamus asperiores explicabo provident. Voluptates sint, neque fuga cum illum, tempore autem maxime similique laborum odio, magnam esse. Aperiam?</p>      </div>    </div>    <nav>      <ul>        <li><i class="fas fa-home"></i><a href="#"> Home</a></li>        <li><i class="fas fa-user-alt"></i><a href="#"> About</a></li>        <li><i class="fas fa-envelope"></i><a href="#"> Contact</a></li>      </ul>    </nav>    <script src="script.js"></script>  </body></html>

Membuat Desain Menggunakan CSS (style.css)

Membuat koding javascript (script.js)

Blury Loading

Project ketiga kita akan membuat Blury Loading pada aplikasi ini kita akan membuat progress number didepan gambar makin tinggi persentase nya makan gambar akan semakin jelas, progress akan berakhir saat mencapai angka 100%, buatlah TIga buah file dengan nama index.html, style.css dan script.css kemudian masukan koding berikut :

Koding HTML (index.html)