Workshop Web

21 Feb 2025 -

penjelasan tentang Workshop Web

![HTML link dan list]

🌐 Materi Lengkap Workshop Web Development 1️⃣ Apa Itu Web Development? Web Development adalah proses membuat dan memelihara situs web. Ini mencakup:

Front-End Development (bagian yang dilihat user)

Back-End Development (server, database, logic)

Full-Stack Development (gabungan keduanya)

👉 Tujuannya: membangun website yang fungsional & interaktif.

2️⃣ Tahapan Workshop Web 1️⃣ Perencanaan:

Tentukan tujuan web

Rancang sitemap & wireframe

2️⃣ Desain:

Buat tampilan (UI/UX)

Tools: Figma, Adobe XD

3️⃣ Pengembangan (Coding):

Front-end: HTML, CSS, JavaScript

Back-end: PHP, Node.js, Python

Database: MySQL, MongoDB

4️⃣ Testing:

Cek bug/error

Responsiveness & kompatibilitas

5️⃣ Deployment:

Upload ke hosting/server

Tools: cPanel, Netlify, Vercel

3️⃣ Front-End Development 🔧 Bahasa Utama:

HTML: Struktur halaman

CSS: Tampilan & desain

JavaScript: Interaktivitas

🔧 Framework/Library:

Bootstrap (CSS)

React, Vue, Angular (JavaScript)

Contoh HTML:

html Copy Edit <!DOCTYPE html>

Workshop Web

Halo Dunia!

Ini adalah web pertama saya.

Contoh CSS:

css Copy Edit body { background-color: #f0f0f0; font-family: Arial; text-align: center; }

h1 { color: #333; } Contoh JavaScript:

javascript Copy Edit alert(‘Selamat Datang di Workshop Web!’); 4️⃣ Back-End Development 🔧 Bahasa Populer:

PHP

Node.js

Python (Django/Flask)

🔧 Contoh PHP Sederhana:

php Copy Edit <?php echo “Halo dari server!”; ?> 🔧 Contoh Node.js:

javascript Copy Edit const http = require(‘http’); http.createServer((req, res) => { res.write(‘Halo Dunia dari Node.js!’); res.end(); }).listen(8080); 5️⃣ Database Database menyimpan data website (contoh: akun user).

🔧 Jenis Database:

Relasional: MySQL, PostgreSQL

NoSQL: MongoDB

Contoh Query MySQL:

sql Copy Edit CREATE TABLE users ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50), email VARCHAR(50) ); 6️⃣ Web Hosting & Domain 🌐 Hosting: Tempat menyimpan website online 🌐 Domain: Alamat web (misal: www.namasitus.com)

🔧 Contoh Hosting Gratis:

Netlify

GitHub Pages

Vercel

7️⃣ Alat & Tools Populer VS Code (kode editor)

XAMPP (untuk PHP)

Postman (testing API)

Figma (desain UI)

Git & GitHub (version control)

8️⃣ Responsive Design Web harus tampil baik di HP, tablet, & desktop.

🔧 Contoh CSS Media Query:

css Copy Edit @media (max-width: 600px) { body { background-color: lightblue; } } 9️⃣ Workshop Project Ideas Landing Page Sederhana

To-Do List App

Portofolio Website

E-commerce Mini

🔑 Tips Workshop Web Development ✅ Rencanakan fitur dengan jelas ✅ Coding bertahap (jangan buru-buru) ✅ Testing di banyak device ✅ Gunakan tools version control (Git) ✅ Jangan takut bertanya kalau ada error 🚀

🚀 Kesimpulan Workshop Web Development adalah langkah awal yang seru buat kamu yang mau terjun ke dunia IT. Dengan memahami HTML, CSS, JavaScript, lalu lanjut ke back-end & database, kamu bisa membuat web yang powerful & interaktif.

Kunci sukses: belajar konsisten + praktik rutin! 💪

HTML Link dan Lists