So, without any further do, here we go!

Struktur dasar sebuah Website

Biar lo cepet paham, coba perhatiin dulu deh gambar di atas ini. Disitu lo dikasih liat kalau HTML adalah tengkorak/tulang, JS/Javascript adalah otak dan saraf, CSS adalah tampilan luar atau outfitnya.

Dan pada kenyataanya struktur website sama persis kaya ilustrasi di atas. Dimulai dari,

1. HTML sebagai kerangka yang menjadi pondasi sebuah website.
2. SS sebagai penghias atau simpelnya Make Up-nya User Interface Website.
3. JS/Javascript sebagai otak atau saraf yang dipake biar si website bisa lebih pinter dan interaktif.
   

Struktur simpelnya begitu, tapi biar lo lebih jelas dan lebih paham lagi, mari kulik lebih dalam dari setiap element tadi.

HTML (Hypertext Markup Language)

HTML atau Hypertext Markup Language singkatnya adalah sebuah bahasa markup, inget ya, markup language bukan programming language, jadi ini hanya memungkinkan pembuatan konten halaman web, bukan logika.

Nah, si perintah atau syntax dari HTML ini terdiri dari tag yang setiap tagnya punya pembuka dan penutup,

bagian

adalah pembuka tag dan tag yang punya tanda / adalah penutupnya

Tapi ada juga yang bertipe single atau tanpa penutup, nama istilah dari tag ini disebut dengan Self Closing Tag.

Contohnya kaya gambar di atas ini. Tag ini ga punya / atau pasangan satu lagi yang menjadi penutupnya.

Buat lo yang mau mulai belajar, ini dia apa aja yang harus lo pelajari,

1. Konsep dasar HTML: Basicnya HTML banget. https://www.w3schools.com/html/
2. Semantik HTML: Biar website lo lebih SEO friendly dan mudah diakases. https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html
3. HTML Forms: Learn about form. https://www.w3schools.com/html/html_forms.asp
4. Multimedia HTML: Belajar caranya ngembed atau masukin multimedia seperti foto, video, atapupun audio https://www.w3schools.com/html/html_media.asp
5. HTML5 APIs: Belajar tentang HTML5 APIs seperti Geolocation, Web Storage, dan Canvas untuk membuat aplikasi web yang lebih interaktif https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction

CSS (Cascading Stylesheet)

CSS ini kalau dijelasin paling simpelnya adalah sebuah elemen atau bahasa yang digunain buat nge-make up User Interface atau tampilan sebuah website.

Jauh dari HTML, CSS ini cenderung ringkih kalau lo belom biasa. Akan ada element yang saling berkesinambungan dan jika salah menulis kode CSS ini, ada kemungkinan semua layout menjadi hancur. Biar paham, take a look contoh gambar di bawah ini.

Sebelum sebuah element HTML diberi CSS.

Dan ini sesudah diberi kode CSS.

Akan ada banyak syntax dan konsep dari CSS ini yang harus lo pahami dan pelajari, dan gw bakalan rekap + ngasih link sumber belajarnya. Ini dia..

1. Selektor CSS: Selektor CSS adalah cara untuk buat milih element HTML https://www.w3schools.com/css/css_selectors.asp
2. Properti CSS: Properti CSS adalah cara untuk mengatur tampilan elemen HTML. https://www.w3schools.com/cssref/default.asp
3. Nilai CSS: Disini lo bakalan belajar tentang satuan di CSS seperti PX, %, Rem, dll. https://www.w3schools.com/cssref/css_units.asp
4. Box model CSS: Lo bakal ngerti kalau semua element wesbite itu terdiri atas Box. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
5. Responsive design: Gamungkin kalau website lo cuman bisa diliat hanya di satu device kan? Responsive design ini memungkinkan tampilan daripada website lo tetep enak diliat atau kompatibel di setiap device. https://www.w3schools.com/css/css_rwd_intro.asp
6. Grid dan Flexbox: Agak sulit buat ngejelasin yang satu ini, just read and cobain, biar lo tau dan ngerti. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids dan https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

Udah mulai nangkep? Kalau udah mari lanjut ke real programming languagenya, yaitu Javascript/JS.

Javascipt/JS

Tanpa harus ada penjelasan ribet. Kalau bisa diambil inti dari pengertian bahasa yang satu ini, JS adalah sebuah programming language yang memang diperuntukan untuk web development.

Kalau lo mau belajar Javascript, resource pembelajarannya bejibun, karna memang, menurut data, si Javascript ini jadi bahasa paling populer di dunia pemogramman sedunia tapi ga sampe akhirat sih.

Buat lo yang mau belajar langsung, just visit channelnya pak Sandhika Galih, udah lengkap dan gratis.

1. Javascript Basic : https://www.youtube.com/watch v=RUTV_5m4VeI&list=PLFIM0718LjIWXagluzROrA-iBY9eeUt4w&ab_channel=WebProgrammingUNPAS
2. Javascript DOM : https://www.youtube.com/watch?v=aT60R1cySLM&list=PLFIM0718LjIWB3YRoQbQh82ZewAGtE2-3&ab_channel=WebProgrammingUNPAS
3. Javascript Lanjutan (ES6) : https://www.youtube.com/watch?v=RwT41El778A&list=PLFIM0718LjIUGpY8wmE41W7rTJo_3Y46-&ab_channel=WebProgrammingUNPAS
   

Di link itu semuanya udah lengkap, dan tinggal lo pelajari!

And ya, sekian dari artikel kali ini, hope you enjoy tulisan gw dan mulai memahami tentang basic web development, dan apa aja yang harus dipelajari disana. Thanks for reading guys, see on the next article, byee!

Mediana.id