Membuat Template Website SEKOLAH Modern & Elegan dengan HTML, CSS & Bootstrap

by | Jun 17, 2021 | 0 comments

Membuat Template Website SEKOLAH Modern & Elegan dengan HTML, CSS & Bootstrap

by | Jun 17, 2021 | CSS Tips and Tricks | 0 comments



Halo kawan-kawan! Saya mau share kepada kalian semua bagaimana cara saya membuat tampilan halaman beranda/home untuk sebuah Website Sekolah.

DEMO: https://bit.ly/39qQbo3
————————

ASSETS yang saya pakai:
1. Bootstrap 4 (untuk layouting) https://getbootstrap.com/docs/4.4
2. Font Awesome (untuk iconset) https://fontawesome.com/start
3. Owl Carousel (untuk slidernya) https://owlcarousel2.github.io/OwlCarousel2/

ATAU bisa download semuanya disini https://bit.ly/33dOuZl

————————

Mari kita mulai.

Pertama, teman2 bisa mendesain tampilan mockupnya terlebih dahulu menggunakan #AdobeXD atau Photoshop sebagai pembantu dalam menggambarkan apa yang mau kita buat.

Setelah itu, jadikan desain tersebut menjadi sebuah tampilan website menggunakan HTML, CSS dan #Bootstrap.

Lalu setelah jadi, serahkan ke programmer untuk membuat website tersebut menjadi sebuah website yang dinamis dengan PHP & MYSQL / siap online.

Namun, perlu diketahui, untuk video yang saya share diatas saya hanya menampilkan proses yang kedua saja. Yaitu coding tampilan setelah mockup jadi. Dan tidak menampikan proses mendesainnya dengan Adobe XD serta tidak juga menampikan proses men-dinamiskan-nya menjadi website siap pakai (online).

InsyaAllah kedepannya akan saya share seluruh proses lengkapnya jika teman2 berminat. Dari mulai membuat desain, lalu frontend (halaman pengunjung) kemudian backend (halaman admin & database).

Untuk itu jangan lupa tinggalkan komentar dan bagikan kepada teman2 lainnya jika dirasa bermanfaat.

Selamat menonton! ^^

_____

📌 Sosial Media :
Facebook https://facebook.com/arbisyarifudin
Instagram https://instagram.com/arbisyarifudin

______

📌Musik dalam video ini:

Title: Dawn | Artist: Sappheiros | Genre: Calm

© License :
“Sappheiros – Dawn” is under a Creative Commons license (CC BY 3.0)
Music promoted by BreakingCopyright: http://bit.ly/2OBe00v

Sappheiros

BreakingCopyright
Twitter: https://twitter.com/BreakingCopy

source

[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>