<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Saya</title>
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home">
            <h1>Welcome</h1>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Website Saya</p>
    </footer>
</body>
</html>

3. Setup Template yang Didownload

Step 1: Extract & Organize

# Extract template
unzip template-html.zip
cd template-html

# Lihat struktur folder
ls -la

Step 2: Struktur Folder Ideal

project/
├── index.html              # Home page
├── about.html              # About page
├── services.html           # Services page
├── contact.html            # Contact page
│
├── css/
│   ├── style.css           # Main stylesheet
│   ├── responsive.css      # Mobile responsive
│   └── normalize.css       # Browser normalization
│
├── js/
│   ├── main.js             # Main JavaScript
│   ├── jquery.min.js       # jQuery (jika diperlukan)
│   └── bootstrap.min.js    # Bootstrap JS
│
├── images/
│   ├── logo.png
│   ├── hero.jpg
│   └── icons/
│
├── fonts/
│   ├── roboto.woff2
│   └── opensans.woff2
│
├── assets/
│   └── downloads/
│
└── README.md

Step 3: Jalankan dengan Live Server

# Jika menggunakan VS Code
# 1. Install "Live Server" extension
# 2. Right-click pada index.html
# 3. Select "Open with Live Server"

# Atau dengan Python
python3 -m http.server 8000

# Akses di http://localhost:8000

4. Customization & Modification

Edit Content HTML

<!-- Ubah judul website -->
<title>Nama Website Saya</title>

<!-- Ubah logo -->
<img src="images/my-logo.png" alt="Logo">

<!-- Ubah teks -->
<h1>Selamat Datang di Website Saya</h1>
<p>Deskripsi website saya di sini</p>

Customize Colors & Styling

Edit css/style.css:

/* Root variables untuk color consistency */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-dark: #2c3e50;
  --bg-light: #ecf0f1;
}

/* Gunakan variables */
body {
  color: var(--text-dark);
  background-color: var(--bg-light);
}

.btn-primary {
  background-color: var(--primary-color);
}

Responsive Design

/* Desktop first (dari besar ke kecil) */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Tablet - 768px and down */
@media (max-width: 768px) {
  .container {
    padding: 15px;
  }

  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile - 480px and down */
@media (max-width: 480px) {
  .container {
    padding: 10px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  nav ul {
    flex-direction: column;
  }
}

5. Add Functionality dengan JavaScript

Navigation Mobile Menu

// File: js/mobile-menu.js
document.addEventListener('DOMContentLoaded', function() {
    const hamburger = document.querySelector('.hamburger');
    const nav = document.querySelector('nav ul');

    hamburger.addEventListener('click', function() {
        nav.classList.toggle('active');
    });
});

HTML:

<header>
    <button class="hamburger">☰</button>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </nav>
</header>

CSS:

.hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    nav ul {
        display: none;
        flex-direction: column;
    }

    nav ul.active {
        display: flex;
    }
}

Form dengan Validation

// File: js/form-validation.js
document.getElementById('contactForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const email = document.getElementById('email');
    const name = document.getElementById('name');

    // Simple validation
    if (name.value.trim() === '') {
        alert('Nama tidak boleh kosong');
        return;
    }

    if (email.value.indexOf('@') === -1) {
        alert('Email tidak valid');
        return;
    }

    // Send form
    console.log('Form submitted:', {
        name: name.value,
        email: email.value
    });
});

Smooth Scroll

// Smooth scroll untuk anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

6. SEO Optimization

Meta Tags

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Deskripsi website untuk search engine">
    <meta name="keywords" content="keyword1, keyword2, keyword3">
    <meta name="author" content="Nama Penulis">
    
    <!-- Open Graph untuk social media -->
    <meta property="og:title" content="Judul Website">
    <meta property="og:description" content="Deskripsi">
    <meta property="og:image" content="images/og-image.jpg">
    <meta property="og:url" content="https://website.com">
    
    <title>Judul Website | Subtitle</title>
</head>

Semantic HTML

<!-- BAIK - Semantic -->
<header>
    <nav>Navigation</nav>
</header>

<main>
    <article>
        <h1>Judul Artikel</h1>
        <p>Konten artikel</p>
    </article>
</main>

<footer>
    <small>&copy; 2024</small>
</footer>

<!-- TIDAK BAIK - Non-semantic -->
<div id="header">
    <div id="nav">Navigation</div>
</div>

Image Optimization

<!-- Gunakan sizes untuk responsive images -->
<img 
    src="images/hero.jpg" 
    alt="Deskripsi gambar"
    title="Judul gambar"
    loading="lazy"
    width="1200"
    height="600"
>

<!-- Picture element untuk different formats -->
<picture>
    <source srcset="images/hero.webp" type="image/webp">
    <source srcset="images/hero.jpg" type="image/jpeg">
    <img src="images/hero.jpg" alt="Hero">
</picture>

7. Performance Optimization

Minify CSS & JavaScript

# Gunakan online minifiers
# https://www.minifier.org/
# https://cssminifier.com/

# Atau dengan CLI tools
npm install -g terser
terser js/main.js -o js/main.min.js

Optimize Images

# Gunakan ImageMagick
convert large-image.jpg -resize 1200x600 optimized.jpg

# Online tools: TinyPNG, Compressor.io

Lazy Loading

<img 
    src="images/small.jpg" 
    data-src="images/large.jpg"
    alt="Image"
    loading="lazy"
>

8. Browser Compatibility

Check Compatibility

caniuse.com - Check CSS/JS support
browserstack.com - Test di berbagai browser

Fallback untuk Old Browsers

/* Fallback untuk IE */
.grid {
    display: -ms-grid;  /* IE 10-11 */
    display: grid;
}

.flex {
    display: -webkit-box;  /* Safari */
    display: flex;
}

9. Testing

Manual Testing Checklist

Tested di Chrome, Firefox, Safari
Responsive design (desktop, tablet, mobile)
Forms berfungsi dengan baik
Links tidak ada yang broken
Images loading dengan baik
No console errors

Automated Testing

# HTML Validator
npm install -g html-validator-cli
html-validator index.html

# Accessibility check
npm install -g pa11y-ci
pa11y http://localhost:8000

10. Deployment

Deploy ke GitHub Pages

# 1. Create GitHub repo
# 2. Push HTML files
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/username/repo.git
git push -u origin main

# 3. Enable Pages di GitHub Settings
# 4. Website live di: https://username.github.io/repo

Deploy ke Netlify

# Method 1: Drag & Drop
# 1. Buka netlify.com
# 2. Drag folder project ke area upload
# 3. Selesai!

# Method 2: CLI
npm install -g netlify-cli
netlify deploy --prod --dir=.

Deploy ke Shared Hosting (cPanel)

# 1. Compress folder
zip -r website.zip .

# 2. Login ke cPanel
# 3. File Manager → upload website.zip
# 4. Extract file
# 5. Edit index.html jika perlu
# 6. Website live di: https://domain.com

Deploy ke VPS dengan FTP

# Gunakan FileZilla atau WinSCP
# 1. Koneksi ke server via FTP
# 2. Upload semua files ke folder public_html
# 3. Verify permissions (chmod 644 untuk files, 755 untuk folders)
# 4. Website live

Deploy dengan Vercel (untuk Static Sites)

# 1. Install Vercel CLI
npm install -g vercel

# 2. Deploy
vercel

# 3. Website live di: https://[name].vercel.app

11. Maintenance & Updates

Regular Updates

# Keep template updated
# 1. Check for security updates
# 2. Update external libraries
# 3. Test thoroughly before pushing to production

# Use CDN for libraries
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

Analytics & Monitoring

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

12. Best Practices

✅ GUNAKAN:

Semantic HTML tags
Mobile-first responsive design
External CSS & JS files
Meaningful alt text untuk images
Proper heading hierarchy (H1 → H2 → H3)
CSS classes daripada inline styles

❌ HINDARI:

Inline styles (gunakan CSS classes)
Deprecated HTML tags (<b>, <i>, <center>)
Excessive JavaScript
Large unoptimized images
Broken links
Auto-playing videos/music

13. Troubleshooting

CSS tidak loading

<!-- Pastikan path benar -->
<link rel="stylesheet" href="./css/style.css">

<!-- Check browser console untuk errors -->
<!-- F12 → Console tab -->

JavaScript errors

// Gunakan try-catch untuk error handling
try {
    // code
} catch (error) {
    console.error('Error:', error);
}

Responsive design tidak bekerja

<!-- Pastikan viewport meta tag ada -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Resources Berguna:

Templates

Koleksi template dokumentasi yang bisa digunakan sebagai dasar untuk produk digital

Panduan Setup Laravel - Dari Template hingga Ready Production

Tutorial lengkap setup Laravel dari download template, instalasi dependencies, database, hingga deployment ke server