Tutorial membuat website dengan Basscss

Akhirnya kesampaian juga menulis tutorial dasar membuat website dengan framework Basscss mulai dari nol hingga menjadi sebuah template siap pakai.

Sebenarnya, keinginan menulis tutorial tentang web programming sudah lama terpendam, baru bisa terealisasi tahun 2020. Alasanya, yang pasti teknologi dan media tempat menulis tutorial itu sendiri.

Awalnya draf-draf tulisan tutorial disimpan dalam blog WordPress, ternyata untuk menambah dan mengedit draf tutorial terkendala dengan koneksi internet yang tidak boleh putus.

Setelah ada Hugo SSG, menulis blog sama dengan ngoding. Kalau lagi coding atau lagi memecahkan masalah code, komentar dan catatan penunjang bisa lansung jadi bahan tulisan blog.

Tujuan dari tutorial ini, sebenarnya untuk mengajari diri sendiri agar lebih paham lagi tentang web desain.

Tujuan berikutnya, untuk menyimpan potongan-potongan source kode yang sudah berjalan cukup sempurna, bisa untuk reusable pada proyek berikutnya.

Siapa tahu juga, tutorial ini bermanfaat untuk orang tua yang pingin anaknya belajar ngoding.

Tapi, kenapa harus Basscss? Bukannya CSS framework Bootstrap?

Pada dasarnya semua CSS framework itu tujuannya sama, dibuat untuk mempercepat proses desain web.

Dan semua CSS framework itu masing-masing ada kelebihan dan kekurangannya.

Bila dibandingkan dengan Bootstrap, class name Basscss itu lebih simple, pendek dan modular.

Untuk pemula, akan lebih mudah paham kerana sintaknya itu-itu saja yang dirangkai-rangkai, dan bebas insert dimana saja (modularitas nya super bebas).

Basscss tidak ada komponen siap pakai, seperti Bootstrap, user bebas merangkai atau mendesain komponen web sendiri sesuai selera.

Payah dong kalau begitu?

Nah disinilah letak pembelajarannya, untuk membuat satu komponen web, user jadi tahu, element dan style css apa saja yang terlibat dan cara kerjanya.

Tapi tenang, tutorial membuat website dengan Bootstrap akan dibuat juga oleh InsertApps.

Tutorial ngoding disini, fokus penulisan sintaksnya lebih banyak di file HTML saja, style CSS-nya sudah disediakan oleh Css Framework Basscss.

Layaknya coding drag and drop komponen dan pernak-pernik apa saja yang ingin dipasang di halaman HTML.

Fitur yang sudah didesain oleh Basscss kita ‘drop’ lalu ‘drag’ ke dalam halaman HTML.

Tapi ingat ya, cara kerjanya tidak seperti ‘drag and drop’ dalam aplikasi software desain grafis. Tidak juga desain web drag and drop seperti yang ditawarkan oleh wix dot com.

No… no…

Prosesnya tetap dengan menulis sintak HTML secara manual. Yang kita ‘drop’ adalah kepingan ‘puzzle’ dari class-class yang sudah disediakan gratis oleh framework Basscss, lalu kita insert secara manual dalam file HTML.

Sesimple dan semudah itu?

Ya!

InsertApps hanya sebagai pemandu saja, lebih tepatnya mengarahkan calon programer baru yang mengikuti tutorial ini untuk memilih puzzle yang tepat sesuai dengan fungsinya.

Goal dari tutorial ini

1. Untuk mengasah kemampuan dasar membuat template website.
2. Bekal dasar untuk membuat template WordPress, Blogger, Hugo dll
3. Bekal dasar untuk membuat sebuah aplikasi web; CMS, toko online, sistem manajemen dll.

Prerequisite

1. Minimal sudah paham cara kerja HTML dan CSS.
2. Minimal sudah paham dengan konsep CSS Framework
3. Siap ketik kode secara mandiri, jangan copy-paste.

Alat dan Bahan

1. Komputer atau Laptop yang lumayan kencang.
2. Menginstall salah satu browser modern (Chrome, Firefox, dan Edge)
3. Menginstal salah satu software editor (Brackets. Visual Studio Code, Sublime etc)
4. Untuk bahannya sendiri, Framework Basscss yang full package, ambil di basscss.com/ace/.

Cara Membuat Website

Bagian Pertama: Dasar

1. Menyiapkan template baru dokumen HTML
2. Mendesain header web site
3. Mendesain isi konten artikel
4. Mendesain sidebar
5. Mendesain footer
6. Mendesain halaman single artikel

Bagian Kedua: Menambah beberapa fitur tambahan

1. Membuat feature image dan thumbnail
2. Menambah fitur from pencarian
3. Mendesain card images
4. Membuat list related artikel

Bagian Ketiga: Mempercantik tampilan

1. Membuat menu sidebar body ovelay
2. Menambah slide image (jumbotron) di halaman utama
3. Merubah nav menu menjadi menu auto scroll
4. Membuat list artikel slide horizontal

Bagian Empat: Addon

1. SEO on page
2. Menambah meta OG
3. Menambah tombol share media sosial
4. Menambah komentar Facebook
5. Menambah komentar komentar disqus

Bagian Lima: Advance tutorial

1. Website masonry layout (Layout galeri seperti Pinterest)