5 Situs Terbaik untuk Belajar HTML & CSS Bagi Blogger Pemula

Belajar HTML dan CSS mudah
HTML intinya adalah elemen/struktur web, dan CSS adalah "penghias" serta penyusun layout hingga sebuah halaman web memiliki interface yang unik dan indah. Jika anda adalah blogger pemula, baik dalam konteks baru saja membangun blog, atau bagi anda yang mulai risih dengan berbagai kode-kode yang belum dimengerti padahal harus berurusan dengan utak-atik template, inilah saatnya anda mulai menyadari bahwa coding merupakan syarat penting yang harus anda kuasai agar mampu mengutak-atik desain blog sesuai yang diinginkan; sekurang-kurangnya anda wajib memahami apa itu dasar HTML dan CSS dan bagaimana keduanya bekerja dalam membentuk tampilan sebuah halaman web. 

Meski pada awalnya anda harus berjuang mati-matian untuk bisa memahami HTML dan CSS serta merasa asing ketika harus bersentuhan dengan keduanya, semakin anda mempelajari dan mempraktekkan semakin mudah anda membaca, memahami, dan menerapkannya dasar-dasar HTML dan CSS dengan baik. Semua hanyalah masalah "alah bisa karena biasa." Semakin anda terbiasa, semakin mudah dan cepat proses pembelajarannya. Bisa dikatakan, memahami HTML dan CSS adalah syarat paling dasar yang harus dipenuhi oleh seorang Blogger, jika ia ingin proses ngeblognya berkembang dan sukses. Mengesampingkan hal-hal mendasar demikian dan bahkan menyerah berarti sudah pasti si blogger tidak akan berkembang.

Ada berbagai macam tutorial coding, dari paling dasar hingga advanced, dari sekedar HTML dan CSS sederhana hingga XML, PHP, ASP, dan bahkan hingga bagaimana merancang API. Semua tersedia gratis dan bertebaran di muka bumi, eh maksudnya di web. Jadi, tidak ada alasan untuk bilang susah karena tidak ada sarana belajar. Satu-satunya alasan kenapa kata "susah" muncul adalah karena kemalasan, tidak ada yang lainnya. 

Berikut adalah beberapa website pilihan saya, yang juga biasa saya gunakan sebagai sumber belajar sekaligus test kode. Tutorialnya tersusun dengan baik, dari dasar hingga advanced, bahkan sebagian besar memiliki interface interaktif dimana anda bisa langsung melakukan latihan dan ujicoba kode tanpa harus menggunakan software belajar apapun. Fokus kita kali ini adalah HTML dan CSS untuk pemula, namun tidak menutup kemungkinan terdapat tutorial lain, misalnya HTML5, Javascript, PHP, ASP, ASPX, PERL, dan sebagainya, bagi anda yang sudah begitu akrab dengan HTML dan CSS dan ingin mengembangkan yang lainnya. Semua tertulis dalam bahasa Inggris, namun menurut saya cukup mudah untuk diikuti dan dipahami.

1. W3 SCHOOLS (w3schools.com)

Siapa yang belum pernah dengar tentang situs ini? Bisa dibilang sebagai situs terbesar dengan informasi, penjelasan, dan tutorial paling detil mengenai berbagai hal yang berkaitan dengan desain dan pengembangan web. Dalam hal HTML dan CSS, tentu saja ini adalah salah satu resource yang bisa diandalkan. Belum lagi berbagai interface interaktif-nya (Try it Yourself Editor) yang bisa kita gunakan untuk latihan dari tingkat paling dasar hingga advanced. Terdapat pula berbagai informasi dan tutorial javascript, HTML 5, bahasa pemrograman yang berkaitan dengan server (PHP, SQL, ASP, dll), ASP.NET, XML, dll.

2. Code Academy (www.codeacademy.com)

Ini adalah situs yang paling sering saya kunjungi, terutama dalam belajar dan bertukar pikiran soal pengembangan web (khususnya PHP, API, dan Ruby). Yang paling saya sukai adalah fitur interaktifnya dimana anda bisa langsung mempelajari sekaligus mempraktekkan berbagai level pembelajar HTML dan CSS dengan tahap yang jelas, terstruktur, dan dengan tutorial yang mudah diikuti. Jika anda ingin langsung melihat bagaimana pembelajaran basic-nya, langsung tuju navigasi di footer, dan klik HTML/CSS. Anda juga bisa mengawali pembelajaran dengan mengagumi bagaimana kode-kode bekerja dengan mengisi kolom interaktif di halaman depan. Bagi web developer dan pengagum coding, ini surga buat anda!

3. HTML.net

Jika anda lebih menyukai "penuturan" untuk memahami dan mencerna materi HTML dan CSS, sekaligus ingin memahami esensi halaman website serta berbagai elemen dan tag-nya, maka situs ini bisa menjadi sumber yang tepat. Plus, anda bisa menggunakan Google Translate dengan mudah jika anda kesulitan dalam memahami bahasa Inggris (hehe). Semua konten memiliki struktur dan sistematika yang jelas, dari A sampai Z, jadi cukup membantu proses pemahaman secara bertahap. Terdapat pula berbagai tutorial lain seperti HTML5, PHP, ASP, dan Javascript.

4. HTML Dog (www.htmldog.com)

Masih sama dengan model website di atas, situs ini juga menyediakan berbagai tutorial HTML dan CSS. Yang agak berbeda adalah konten dibagi berdasarkan jenis elemen/tag (heading, title, list, link, tabel, form, dan lain sebagainya), sehingga anda bisa masuk ke bagian tertentu secara langsung. Terdapat pula tutorial javascript dasar dimana anda juga bisa berkenalan dengan bahasa javascript.

5. CSS Easy (www.csseasy.com)

Mungkin bagi anda yang pertama kali masuk website ini akan kebingungan dan menganggap remeh. Ya, situs ini hanya berbicara bagaimana CSS digunakan untuk menyusun layout dasar. Tapi jangan salah, dengan memahami bagaimana layout dasar sebuah halaman web, maka anda sudah masuk ke gerbang awal desain template blog/web, dan memahami bagaimana CSS digunakan sebagai penyusun layout. Terdapat dua jenis layout yang variatif untuk dipelajari, yang pertama berupa fixed layout dan yang kedua berupa fluid layout (yang kemudian bisa digunakan untuk menyusun dasar template responsive juga). Cara yang digunakan untuk mempelajari cukup unik, klik salah satu contoh layout, lalu klik kanan dan pilih "open page source" atau "view source" untuk melihat kode-kode CSS di dalamnya. Simpan halaman tersebut untuk bisa diutak-atik sesuai keinginan.

That's it and have a nice learning!

© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.

5 Situs Terbaik untuk Belajar HTML & CSS Bagi Blogger Pemula
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 37 Comment(s):

Beben Koben said...

pemula bro, xixixi
sampe skrg jg sy masih ke sono terus, capek mo ngapal2in koding :D

Agung Talaga said...

Selama ini yang saya gunakan cuman w3 schools dan nda ada yang lain. Ternyata ada lagi layanan yang lainnya ya Bang. Makasih atas informasinya Bang untuk kami2 yang masih pemula ini dalam hal otak atik kode HTML dan CSS.. ^_^

pabk-4you.com said...

satu lagi gan... sebagai referensi BLOG DTE juga bisa dijadikan tempat mempelajari CSS dan Javascript..

Ahmad Khoirul Azmi said...

@beben: halo sob. Sama! saya juga malas kalo harus menulis berbaris2 kode :) Thanks sob

@Agung: Hadeeehhh, ngakunya pemula terus nih.. Hahaha. Sama-sama sob

@Pabk: Ya, DTE adalah resource yang sangat bagus, saya juga sangat sering mampir. Tapi untuk pemula sepertinya masih terlalu berat sob.

Ziyadah halal said...

good bos
sangat membantu untuk saya yang baru belajar

agus riyanto said...

sangat membantu..
thanks ..

Indra DP said...

mas, maaf kalo OOT.
Mau tanya nih, kenapa deskripsi postingan tidak kelihatan di search engine google?? Padahal pngaturan di dasbor blogger udah di aktifkan.
dan dipostingannya aku beri deskripsi.

mohon bantuannya mas..

http://indradp-share.blogspot.com

Albeit Suryahsyah said...

Nice master postingannya,sangat menbantu untuk saya

download-konten said...

tutorials point juga bagus untuk belajar mas

Icah Banjarmasin said...

Assallammualaikum Kakanda kaya apa habarnya nih mudahan sehat pian sekeluargalah....sipp artikelnya nah..hahahahyyyy

Ahmad Khoirul Azmi said...

Waalaikum salam, ading Icah.
Alhamdulillah semua sihat walafiat, kadada halangan satupun
Doa yang sama buat ading sakaluarga jua lah.
Makasih sudah mampir! :)

Ahmad Khoirul Azmi said...

@Indra DP: Deskripsi halaman post memang sering tidak tampil karena yang ditampilkan disesuaikan dengan kueri, jadi justru isi post yang sering nongol sebagai deskripsi. Ini wajar.
Nah, permasalahannya apakah deskripsi itu kondisinya seperti di atas, atau tidak nongol sama sekali? Kasih screenshotnya biar jelas.

Yobert Parai said...

sampai sekarang kagak ngerti2 html, payah nih
basic emang gk ada sih

Indra DP said...

maaf mas, maksud saya deskripsi penelusuran,nya yg tidak muncul di search google.

coba mas Ahmad lihat link postinganku ini di search google.

http://indradp-share.blogspot.com/2013/10/web2pdf-simpan-halaman-website-menjadi-file-pdf.html

padahal deskripsi penelusurannya yang aku beri sebelum posting artikel tsb adalah "menyimpan dan mengconvert halaman website menjadi file PDF..."

*maaf gk bisa kasih screenshotnya mas, soalnya ini balasnya lewat hp*

mohon bantuannya mas..
trima kasih.

Indra DP said...

maaf mas, maksud saya deskripsi penelusuran,nya yg tidak muncul di search google.

coba mas Ahmad lihat link postinganku ini di search google.

http://indradp-share.blogspot.com/2013/10/web2pdf-simpan-halaman-website-menjadi-file-pdf.html

padahal deskripsi penelusurannya yang aku beri sebelum posting artikel tsb adalah "menyimpan dan mengconvert halaman website menjadi file PDF..."

*maaf gk bisa kasih screenshotnya mas, soalnya ini balasnya lewat hp*

mohon bantuannya mas..
trima kasih.

jenx indah said...

sangat membantu bagi pemula seperti saya gan

Aura Ide said...

Maksud hati ingin mempelajari A-Z, tapi lihat barisan kode jadi mumet duluan!

percobaan said...

thanks infonya mas. Sangat bermanfaat skali.
maklum masih newbie.

Ary Darma said...

thanks utk referensinya...siap utk cek tkp..:)

mymisteri-leonyli said...

wah mantap deh kang, saya sebagai pemula pasti sangat membantu saya untuk mempelajari lebih dalam soal CSS dan html. sukses ya kang

Elbuy Zamen said...

Situs di atas pake basa inggris gak ya? sepertinya pake. nanti saya kunjungi ah. kebetulan saya sudah berpengalaman mengotak-atik html walau belum pda tingkat HTML lainnya. brangkali ada informasi terbaru....

Ahmad Manarul said...

Dengan mendesain blog semenarik mungkin, maka pengunjung akan semakiin betah di blog kita ya :)

http://www.mestiqui.com/

danny-gitaronline said...

wahhh keren banget ini infonya,,,,
izin coba ya gan,,,, terimakasih atas ilmunya,,,, sukses selalu buat agan,,,,

nur muhamad said...

Mantab sekali mas infonya,,bermanfaat bagi kami yang masih bayi alias pemula,,hee,,Apa tidak ada situs css yang bahasa indonesia,?soalnya saya orang jawa rendah pendidikan,,hee,,@terimakasih Mas Ahmad,,Salam kenal,,

nur muhamad said...

Mantab sekali mas infonya,,bermanfaat bagi kami yang masih bayi alias pemula,,hee,,Apa tidak ada situs css yang bahasa indonesia,?soalnya saya orang jawa rendah pendidikan,,hee,,@terimakasih Mas Ahmad,,Salam kenal,,

dede rahman said...

makasih infonya sangat membantu bagi saya yang mesih pemula

aznila said...

Terimakasih atas infonya :)

irhamabdulazis271.student.ipb.ac.id

cobainfo.com said...

Wah perlu belajar banyak nih sama buka rahasia,,artikel nya sangat membantu sekali

Angga Indriya said...

Diantara kelima dari situs yang mas infokan diatas, yang paling bagus untuk belajar css3 yang mana ya...
Salam kenal dari saya mas...sukses slalu...

sediabaca.com said...

gak kuat ane gan bacanya, ane gak ngerti css, itu klo tambahkan css / diterapkan melalui setelan, gak bisa balik lagi, klo edit html kan bisa undo ctrl-z.

Ahmad Khoirul Azmi said...

@Indra: Saya cek blog anda tidak memiliki meta deskripsi sama sekali. cek post ini:
http://buka-rahasia.blogspot.com/2012/07/cara-menambahkan-dan-mengoptimalkan-meta-description-blogger.html

arrasy much said...

Baru daftar, itupun berantakan hehehe, nyimak dulu, salam ukhuwah gan bro n sist

Farhan Maulana H said...

mantab gan! kebetulan nih ane juga pengen belajar lebih dalam tentang CSS! thanks gan!

Farhan Maulana H said...

mantab gan! kebetulan nih ane juga pengen belajar lebih dalam tentang CSS! thanks gan!

Irwan Darmansyah said...

lumayan buat belajar

sokim bisnet said...

Alhamdulillah ketemu juga yg saya cari .jazakallah mas azmi

Ahmad Khoirul Azmi said...

sama-sama @sokim

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap