Belajar Coding Dari Nol

Website kamu sudah jadi! Eh belum ya?

Kabar baiknya file tersebut adalah file website kamu! Meskipun tidak sempurna, itulah yang dibutuhkan untuk membuat website sendiri dari dasar.

Sekarang tugas kamu adalah mempelajari “tag-tag” lain dari HTML untuk membuat website yang lebih kompleks, seperti menampilkan gambar, video dan lainnya.

Tag-tag tersebut bisa dilihat di Referensi HTML atau juga video tutorial di sekolahkoding.com.

Kita tidak akan melihat semua tagnya, tapi akan saya beri beberapa contoh

Menambahkan paragraf di situs kamu

Untuk menambahkan paragraf, kita bisa menggunakan tag

...

letakkan tag p setelah tag h1 yang kamu buat sebelumnya

Sekarang reload browser, kamu akan melihat paragraf baru yang ditambahkan.

Bagaimana agar website kamu bisa diakses oleh orang lain ?

Untuk membuat website kamu bisa diakses oleh orang lain, kamu perlu mengupload kode kamu ke sebuah server atau dikenal dengan istilah hosting.

Setelah itu menyambungkannya dengan nama domain agar mudah diingat dan dibuka oleh orang lain.

Referensi artikel terkait ini:

Rekomendasi Platform untuk Membuat Website tanpa Coding

Berikut adalah beberapa rekomendasi platform untuk membuat website tanpa coding:

Platform website builder ini sangat populer, terutama di kalangan web developer.

Ini memiliki dua opsi. Pertama, dengan menggunakan layanan WordPress.com tanpa memerlukan hosting dan domain. Kedua, dengan self-hosting di web hosting dan domain sendiri.

Kedua opsi ini memberikan fleksibilitas bagi pengguna dengan tingkat keterampilan coding yang berbeda.

Selain itu, adanya banyak pilihan template dan kemudahan dalam pengelolaan konten membuat WordPress menjadi pilihan yang tepat untuk berbagai keperluan pembuatan website.

Webs menawarkan fitur pembuatan website yang mirip dengan platform sebelumnya, WordPress.

Dengan opsi penggunaan gratis meski terbatas, Webs tetap memberikan fleksibilitas sesuai kebutuhan pengguna. Pengguna dapat berlangganan jika ingin memanfaatkan fitur lengkapnya.

Meskipun hasil akhir menggunakan domain berakhiran webs.com, tersedia juga opsi untuk menggunakan custom domain.

Webs cocok untuk pengguna yang ingin pilihan yang serba terjangkau dan mudah diakses.

Ini adalah salah satu platform membuat website tanpa coding yang memiliki fitur lebih canggih.

Platform ini memungkinkan pengguna untuk menyesuaikan kebutuhan coding tanpa memerlukan keterampilan coding yang tinggi.

Dengan template yang sudah jadi, Dreamweaver cocok untuk pengguna yang ingin mengontrol desain website mereka tanpa harus membuat semuanya dari awal.

Wix telah menjadi pilihan populer bagi pelaku UMKM karena kemudahan dalam mengatur tampilan menggunakan berbagai gadget yang tersedia.

Dengan beragam opsi template gratis, Wix menyediakan solusi untuk website pribadi maupun toko online sederhana.

Kelebihan lainnya adalah interface yang ramah pengguna dan kesempatan untuk membuat website dengan tampilan profesional tanpa keterampilan coding yang rumit.

Weebly menawarkan platform website builder dan content management system dengan tema-tema unik dan menarik.

Cocok untuk pembelajaran website pribadi atau bisnis, Weebly hadir dengan fitur penyimpanan otomatis, memberikan keamanan ekstra untuk proyek Anda.

Meskipun ada keterbatasan pada fitur dan nama domain untuk pengguna gratis, Weebly tetap menjadi pilihan yang baik untuk pemula.

Meski belum begitu dikenal di Indonesia, Zyro menyediakan platform gratis untuk membuat website tanpa coding dengan sederhana.

Dengan keunggulan dalam berbagai template, platform ini menawarkan fleksibilitas dalam desain.

Dengan 160 template yang siap digunakan, Zyro menawarkan opsi yang menarik untuk pengguna yang mencari solusi cepat dan mudah.

Google Sites, sebagai produk besutan Google, memungkinkan pengguna membuat website tanpa coding melalui antarmuka yang sederhana dengan metode drag and drop.

Dengan kemudahan akses melalui akun Google, Google Sites adalah pilihan yang efisien untuk pembuatan halaman landing page tanpa keahlian coding yang diperlukan.

Squarespace memberikan pengalaman membuat website tanpa coding yang unik dan responsif, terutama di era smartphone.

Aplikasi ini tidak hanya memfasilitasi kustomisasi template, tetapi juga menyediakan fitur SEO dan dukungan e-commerce sederhana, memungkinkan transaksi online secara mudah.

InVision Studio menjadi pilihan bagi pelaku UMKM dengan kemudahan mengatur tampilan menggunakan berbagai gadget.

Dengan opsi template gratis untuk landing page, InVision Studio menawarkan solusi untuk pembuatan website pribadi dan toko online sederhana.

Adobe XD, sebagai aplikasi website builder dari Adobe, memberikan kemampuan mengedit file dari sketch dan mengembangkan website serta prototipe aplikasi multi-platform.

Dengan desain yang mendukung Android, iOS, dan website, serta koneksi dengan Adobe Library, Adobe XD merupakan pilihan yang baik untuk pengguna yang sudah terbiasa dengan ekosistem Adobe.

Memasang Plugun yang Ingin Digunakan

Untuk meningkatkan fitur dan fungsionalitas website, pengguna dapat memasang plugin.

Beberapa plugin yang disarankan termasuk LiteSpeed Cache dan Yoast SEO.

Proses pemasangan plugin dapat dilakukan melalui dashboard WordPress pada bagian Plugins > Add New.

Menambahkan gambar di situs kamu

Untuk menambahkan gambar, kita bisa menggunakan tag .

Sebelumnya, siapkan sebuah gambar dan letakkan di folder yang sama dengan file index.html yang kamu buat tadi.

Lalu, tambahkan kode ini:

Ganti sumbergambar.png dengan nama file gambar yang kamu letakkan tadi.

Kamu bisa mencoba meletakkan tag img ini di setelah atau sebelum tag lain.

Jangan takut untuk coba-coba! tidak akan ada masalah kalau error, kamu bisa undo tulisan kamu jika ada masalah

Karena nanti artikelnya bisa terlalu panjang dan sulit diikuti, kita sudahi dulu untuk membuat konten HTMLnya. Sekarang kita lihat cara menghias website kita dengan CSS.

Cara menulis CSS, letakkant tag di dalam tag ... . Contohnya:

Kita perlu mengisi bagian ... dengan kode CSS sebenarnya.

Apa perbedaan website yang ditulis dengan kode sendiri dan menggunakan platform seperti wordpress ?

Menggunakan platform punya keuntungan berikut:

Namun dengan batasan:

Sebaliknya, dengan membuat website dengan kode sendiri, kita bisa:

Apa yang perlu kamu pelajari selanjutnya ?

Itu dia gambara membuat website sendiri dengan HTML dan CSS.

Kita barus melihat sedikit dari luasnya kemampuan HTML dan CSS. Kamu bisa menggunakan link-link di bawah sebagai referensi lanjutan untuk belajar lebih jauh.

Apa yang akan kita lakukan di panduan tutorial ini?

Kamu akan terjun langsung merasakan bagaimana membuat website dari dasar dengan HTML dan CSS. Tentu kita tidak akan menjadi ahli hanya dengan satu artikel.

Tapi tujuannya, agar kamu bisa merasakan langsung dan menghilangkan tanda tanya selama ini seputar pembuatan situs.

Ini adalah awal dari kamu nanti bisa membuat berbagai situs lain seperti, profil perusahaan, blog, toko online, aplikasi, sosial media dan masih banyak lagi!

Sudah siap? mari kita mulai!

Berapa lama waktu yang dibutuhkan untuk membuat website ?

Sangat bervariasi. Jumlah waktu belajar orang berbeda-beda, karena itu tidak ada patokan waktu yang pasti.

Jangan terburu-buru, selama kamu tekun dan sabar, kamu akan bisa membuat website kamu sendiri. Jika mudah, maka skill ini tidak akan lagi spesial. Hanya orang-orang yang sabar belajar akan lolos dan bisa menguasai skill ini.