web programming Web Programming Learning

$OCEANSIDE$ · November 2, 2023

First of all, aku di sini bukan untuk menggurui atau menganggap diriku paling paham soal web programming. Namun aku bakalan share ke kalian step by step untuk memahami seputar web programming. Untuk menjadi web developer, kita harus menguasai HTML, CSS, JavaScript dan PHP. Di step berikutnya kita akan berlanjut ke penggunaan framework dalam membangun website kita. Kita akan membahas tuntas semuanya di thread ini. Jika kalian excited dalam mengikuti proses belajar ini kalian dapat me-reply thread ini dengan hasil pekerjaan kalian. Oke langsung aja kita bahas.

Tahap 1 : Set Up Environment

Spoiler

Sebagai langkah awal, kita perlu menginstal aplikasi untuk mendukung pekerjaan kita. Aplikasi pertama yang harus kalian instal ada Visual Studio Code.

Visual Studio Code adalah aplikasi code editor buatan Microsoft yang dapat dijalankan di semua perangkat desktop secara gratis. Kelengkapan fitur dan ekstensi membuat code editor ini menjadi pilihan utama para pengembang. Visual Studio Code bahkan mendukung hampir semua sistem operasi seperti Windows, Mac OS, Linux, dan lain sebagainya. Kalian dapat mendownload aplikasi ini di sini Setelah kalian menginstal Visual Studio Code ini, kalian perlu memasang beberapa ekstensi untuk memudahkan kalian dalam menulis kode program kalian menggunakan Visual Studio Code ini. Beberapa diantaranya adalah Prettier, Auto Rename Tag, Image Preview, Color Highlight, dan terakhir Live Server.

Cara pemasangannya adalah :

1. Buka aplikasi VSCode kamu, kemudian pilih ikon extensions seperti gambar berikut.

2. Cari dan install ekstensi Prettier

3. Cari dan install ekstensi Image Preview

3. Cari dan install ekstensi color highlight

4. Cari dan install ekstensi Auto Rename Tag

5. Cari dan install ekstensi Live Server

6. Cari dan install ekstensi Material Icon Theme

7. Ada pengaturan tambahan yang perlu kalian lakukan pada VSCode kalian, silahkan diikuti.

Pada VSCode kalian, pilih ikon Manage dan kemudian pilih menu settings hingga semua pengaturan di bawah ini kalian selesaikan.

8. Terakhir, kalian dapat membuat sebuah folder khusus untuk menyimpan workspace-workspace kalian yang akan kalian kerjakan nantinya, terserah mau dipenyimpanan manapun. Kalian dapat membuat nama foldernya "Web Programming" jika kalian mau. Untuk tahap pembelajaran berikutnya kita akan membahas HTML dasar, stay tuned terus guysss, aku bakalan update terus di thread ini.

2 : HTML Dasar & HTML Fundamental

Spoiler

A. HTML Dasar

Oke, yang pertama kita pelajari adalah HTML Dasar. Sebelum kita mulai, silahkan download dulu assets untuk materi pertama ini di sini. Kemudian ikuti langkah-langkah di bawah ini.

1. Buat workspace baru di folder yang sudah kalian siapkan tadi. Kemudian folder assets yang sudah kita download dan kita ekstrak tadi pindahkan ke folder workspace kalian. Di sini saya membuat folder JGForum dan membuat workspace baru dengan nama belajar 1. Kemudian klik kanan lalu klik "Open with code".

Nanti akan muncul tampilan seperti ini di VSCode kamu.

2. Buat file baru untuk memulai belajar HTML Dasar ini. Buat file dengan nama hello-world.html

Kemudian ketik kode berikut lalu jalankan dengan mengklik tombol "Go Live" yang berada di sudut kanan bawah VSCode kamu.