[{"data":1,"prerenderedAt":4665},["ShallowReactive",2],{"navigation":3,"/templates/html-css-setup-guide":95,"/templates/html-css-setup-guide-surround":4660},[4,23,48],{"title":5,"path":6,"stem":7,"children":8,"icon":22},"Getting Started","/getting-started","1.getting-started/1.index",[9,12,17],{"title":10,"path":6,"stem":7,"icon":11},"About Me","i-lucide-user",{"title":13,"path":14,"stem":15,"icon":16},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Usage","/getting-started/usage","1.getting-started/3.usage","i-lucide-sliders",false,{"title":24,"path":25,"stem":26,"children":27,"page":22},"Essentials","/essentials","2.essentials",[28,33,38,43],{"title":29,"path":30,"stem":31,"icon":32},"Markdown Syntax","/essentials/markdown-syntax","2.essentials/1.markdown-syntax","i-lucide-heading-1",{"title":34,"path":35,"stem":36,"icon":37},"Code Blocks","/essentials/code-blocks","2.essentials/2.code-blocks","i-lucide-code-xml",{"title":39,"path":40,"stem":41,"icon":42},"Prose Components","/essentials/prose-components","2.essentials/3.prose-components","i-lucide-component",{"title":44,"path":45,"stem":46,"icon":47},"Images and Embeds","/essentials/images-embeds","2.essentials/4.images-embeds","i-lucide-image",{"title":49,"path":50,"stem":51,"children":52},"Templates","/templates","templates",[53,56,61,65,70,74,78,83,87,91],{"title":49,"path":50,"stem":54,"icon":55},"templates/index","i-lucide-archive",{"title":57,"path":58,"stem":59,"icon":60},"Panduan Setup HTML/CSS - Dari Template Statis hingga Responsive Design","/templates/html-css-setup-guide","templates/html-css-setup-guide","i-lucide-file-text",{"title":62,"path":63,"stem":64,"icon":60},"Panduan Setup Laravel - Dari Template hingga Ready Production","/templates/laravel-setup-guide","templates/laravel-setup-guide",{"title":66,"path":67,"stem":68,"icon":69},"Next.js SaaS Starter Kit - Panduan Lengkap","/templates/nextjs-saas-starter","templates/nextjs-saas-starter","i-lucide-layout-template",{"title":71,"path":72,"stem":73,"icon":60},"Panduan Setup Next.js - Dari Template hingga Production Ready","/templates/nextjs-setup-guide","templates/nextjs-setup-guide",{"title":75,"path":76,"stem":77,"icon":16},"Panduan Membeli & Download Template","/templates/panduan-beli-download","templates/panduan-beli-download",{"title":79,"path":80,"stem":81,"icon":82},"Panduan Setup Lengkap Semua Tech-Stack","/templates/panduan-setup-all-stack","templates/panduan-setup-all-stack","i-lucide-rocket",{"title":84,"path":85,"stem":86,"icon":60},"Panduan Setup PHP - Dari Template Hingga Production Deployment","/templates/php-setup-guide","templates/php-setup-guide",{"title":88,"path":89,"stem":90,"icon":60},"Product Documentation Template","/templates/product-documentation","templates/product-documentation",{"title":92,"path":93,"stem":94,"icon":60},"Panduan Setup React - Dari Download hingga Konfigurasi","/templates/react-setup-guide","templates/react-setup-guide",{"id":96,"title":57,"body":97,"description":4653,"extension":4654,"links":4655,"meta":4656,"navigation":4657,"path":58,"seo":4658,"stem":59,"__hash__":4659},"docs/templates/html-css-setup-guide.md",{"type":98,"value":99,"toc":4593},"minimark",[100,105,109,114,119,148,152,174,178,182,187,202,207,222,227,242,247,262,267,285,289,832,836,840,888,892,900,904,962,966,970,1082,1086,1093,1266,1270,1534,1538,1542,1721,1724,1875,1878,2072,2076,2427,2431,2597,2601,2605,2914,2918,3132,3136,3363,3367,3371,3428,3432,3468,3472,3543,3547,3551,3569,3573,3662,3666,3670,3713,3717,3774,3778,3782,3888,3892,3951,3955,4007,4011,4041,4045,4089,4093,4097,4154,4158,4320,4324,4330,4350,4356,4386,4390,4394,4447,4451,4516,4520,4558,4561,4566,4589],[101,102,104],"h1",{"id":103},"panduan-setup-htmlcss-dari-template-statis-hingga-responsive-design","📄 Panduan Setup HTML/CSS - Dari Template Statis hingga Responsive Design",[106,107,108],"p",{},"Panduan lengkap setup website statis dengan HTML/CSS, dari pemilihan template hingga deployment ke hosting.",[110,111,113],"h2",{"id":112},"_1-persiapan-requirements","1. Persiapan & Requirements",[115,116,118],"h3",{"id":117},"kebutuhan-minimal","Kebutuhan Minimal",[120,121,122,130,136,142],"ul",{},[123,124,125,129],"li",{},[126,127,128],"strong",{},"Text Editor",": VS Code, Sublime, atau Notepad++",[123,131,132,135],{},[126,133,134],{},"Browser",": Chrome, Firefox, atau Safari untuk testing",[123,137,138,141],{},[126,139,140],{},"FTP Client"," (untuk upload): FileZilla, Cyberduck",[123,143,144,147],{},[126,145,146],{},"Git"," (optional): untuk version control",[115,149,151],{"id":150},"tools-yang-recommended","Tools yang Recommended",[120,153,154],{},[123,155,156,159,160],{},[126,157,158],{},"VS Code Extensions",":\n",[120,161,162,165,168,171],{},[123,163,164],{},"Live Server (untuk local server)",[123,166,167],{},"Prettier (code formatter)",[123,169,170],{},"HTML CSS Support",[123,172,173],{},"Thunder Client (untuk test API)",[110,175,177],{"id":176},"_2-memilih-template-htmlcss","2. Memilih Template HTML/CSS",[115,179,181],{"id":180},"opsi-a-marketplace-template-gratis","Opsi A: Marketplace Template Gratis",[106,183,184],{},[126,185,186],{},"1. Pexels, Unsplash, Pixabay",[120,188,189,199],{},[123,190,191,192],{},"Download template dari: ",[193,194,198],"a",{"href":195,"rel":196},"https://colorlib.com/wp",[197],"nofollow","colorlib.com/wp",[123,200,201],{},"Free responsive templates",[106,203,204],{},[126,205,206],{},"2. HTML5 Up",[120,208,209,216,219],{},[123,210,211],{},[193,212,215],{"href":213,"rel":214},"https://html5up.net",[197],"html5up.net",[123,217,218],{},"Beautiful, responsive templates gratis",[123,220,221],{},"Download & gunakan langsung",[106,223,224],{},[126,225,226],{},"3. Bootstrap Templates",[120,228,229,236,239],{},[123,230,231],{},[193,232,235],{"href":233,"rel":234},"https://getbootstrap.com",[197],"getbootstrap.com",[123,237,238],{},"Browse free Bootstrap themes",[123,240,241],{},"Full responsive framework",[106,243,244],{},[126,245,246],{},"4. Tailwind Templates",[120,248,249,256,259],{},[123,250,251],{},[193,252,255],{"href":253,"rel":254},"https://tailwindui.com",[197],"tailwindui.com",[123,257,258],{},"Component library",[123,260,261],{},"Free & premium templates",[106,263,264],{},[126,265,266],{},"5. Envato Elements / ThemeForest",[120,268,269,276,279,282],{},[123,270,271],{},[193,272,275],{"href":273,"rel":274},"https://themeforest.net",[197],"themeforest.net",[123,277,278],{},"Filter: \"HTML5\" atau \"Responsive HTML\"",[123,280,281],{},"Purchase atau subscribe",[123,283,284],{},"Download file",[115,286,288],{"id":287},"opsi-b-buat-dari-nol-html-boilerplate","Opsi B: Buat dari Nol (HTML Boilerplate)",[290,291,296],"pre",{"className":292,"code":293,"language":294,"meta":295,"style":295},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!DOCTYPE html>\n\u003Chtml lang=\"id\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Ctitle>Website Saya\u003C/title>\n    \u003Clink rel=\"stylesheet\" href=\"styles/main.css\">\n\u003C/head>\n\u003Cbody>\n    \u003Cheader>\n        \u003Cnav>\n            \u003Cul>\n                \u003Cli>\u003Ca href=\"#home\">Home\u003C/a>\u003C/li>\n                \u003Cli>\u003Ca href=\"#about\">About\u003C/a>\u003C/li>\n                \u003Cli>\u003Ca href=\"#services\">Services\u003C/a>\u003C/li>\n                \u003Cli>\u003Ca href=\"#contact\">Contact\u003C/a>\u003C/li>\n            \u003C/ul>\n        \u003C/nav>\n    \u003C/header>\n\n    \u003Cmain>\n        \u003Csection id=\"home\">\n            \u003Ch1>Welcome\u003C/h1>\n        \u003C/section>\n    \u003C/main>\n\n    \u003Cfooter>\n        \u003Cp>© 2024 Website Saya\u003C/p>\n    \u003C/footer>\n\u003C/body>\n\u003C/html>\n","html","",[297,298,299,319,344,354,377,410,432,466,475,485,495,506,516,556,593,630,667,677,687,697,704,714,736,754,763,772,777,787,805,814,823],"code",{"__ignoreMap":295},[300,301,304,308,312,316],"span",{"class":302,"line":303},"line",1,[300,305,307],{"class":306},"sMK4o","\u003C!",[300,309,311],{"class":310},"swJcz","DOCTYPE",[300,313,315],{"class":314},"spNyl"," html",[300,317,318],{"class":306},">\n",[300,320,322,325,327,330,333,336,340,342],{"class":302,"line":321},2,[300,323,324],{"class":306},"\u003C",[300,326,294],{"class":310},[300,328,329],{"class":314}," lang",[300,331,332],{"class":306},"=",[300,334,335],{"class":306},"\"",[300,337,339],{"class":338},"sfazB","id",[300,341,335],{"class":306},[300,343,318],{"class":306},[300,345,347,349,352],{"class":302,"line":346},3,[300,348,324],{"class":306},[300,350,351],{"class":310},"head",[300,353,318],{"class":306},[300,355,357,360,363,366,368,370,373,375],{"class":302,"line":356},4,[300,358,359],{"class":306},"    \u003C",[300,361,362],{"class":310},"meta",[300,364,365],{"class":314}," charset",[300,367,332],{"class":306},[300,369,335],{"class":306},[300,371,372],{"class":338},"UTF-8",[300,374,335],{"class":306},[300,376,318],{"class":306},[300,378,380,382,384,387,389,391,394,396,399,401,403,406,408],{"class":302,"line":379},5,[300,381,359],{"class":306},[300,383,362],{"class":310},[300,385,386],{"class":314}," name",[300,388,332],{"class":306},[300,390,335],{"class":306},[300,392,393],{"class":338},"viewport",[300,395,335],{"class":306},[300,397,398],{"class":314}," content",[300,400,332],{"class":306},[300,402,335],{"class":306},[300,404,405],{"class":338},"width=device-width, initial-scale=1.0",[300,407,335],{"class":306},[300,409,318],{"class":306},[300,411,413,415,418,421,425,428,430],{"class":302,"line":412},6,[300,414,359],{"class":306},[300,416,417],{"class":310},"title",[300,419,420],{"class":306},">",[300,422,424],{"class":423},"sTEyZ","Website Saya",[300,426,427],{"class":306},"\u003C/",[300,429,417],{"class":310},[300,431,318],{"class":306},[300,433,435,437,440,443,445,447,450,452,455,457,459,462,464],{"class":302,"line":434},7,[300,436,359],{"class":306},[300,438,439],{"class":310},"link",[300,441,442],{"class":314}," rel",[300,444,332],{"class":306},[300,446,335],{"class":306},[300,448,449],{"class":338},"stylesheet",[300,451,335],{"class":306},[300,453,454],{"class":314}," href",[300,456,332],{"class":306},[300,458,335],{"class":306},[300,460,461],{"class":338},"styles/main.css",[300,463,335],{"class":306},[300,465,318],{"class":306},[300,467,469,471,473],{"class":302,"line":468},8,[300,470,427],{"class":306},[300,472,351],{"class":310},[300,474,318],{"class":306},[300,476,478,480,483],{"class":302,"line":477},9,[300,479,324],{"class":306},[300,481,482],{"class":310},"body",[300,484,318],{"class":306},[300,486,488,490,493],{"class":302,"line":487},10,[300,489,359],{"class":306},[300,491,492],{"class":310},"header",[300,494,318],{"class":306},[300,496,498,501,504],{"class":302,"line":497},11,[300,499,500],{"class":306},"        \u003C",[300,502,503],{"class":310},"nav",[300,505,318],{"class":306},[300,507,509,512,514],{"class":302,"line":508},12,[300,510,511],{"class":306},"            \u003C",[300,513,120],{"class":310},[300,515,318],{"class":306},[300,517,519,522,524,527,529,531,533,535,538,540,542,545,547,549,552,554],{"class":302,"line":518},13,[300,520,521],{"class":306},"                \u003C",[300,523,123],{"class":310},[300,525,526],{"class":306},">\u003C",[300,528,193],{"class":310},[300,530,454],{"class":314},[300,532,332],{"class":306},[300,534,335],{"class":306},[300,536,537],{"class":338},"#home",[300,539,335],{"class":306},[300,541,420],{"class":306},[300,543,544],{"class":423},"Home",[300,546,427],{"class":306},[300,548,193],{"class":310},[300,550,551],{"class":306},">\u003C/",[300,553,123],{"class":310},[300,555,318],{"class":306},[300,557,559,561,563,565,567,569,571,573,576,578,580,583,585,587,589,591],{"class":302,"line":558},14,[300,560,521],{"class":306},[300,562,123],{"class":310},[300,564,526],{"class":306},[300,566,193],{"class":310},[300,568,454],{"class":314},[300,570,332],{"class":306},[300,572,335],{"class":306},[300,574,575],{"class":338},"#about",[300,577,335],{"class":306},[300,579,420],{"class":306},[300,581,582],{"class":423},"About",[300,584,427],{"class":306},[300,586,193],{"class":310},[300,588,551],{"class":306},[300,590,123],{"class":310},[300,592,318],{"class":306},[300,594,596,598,600,602,604,606,608,610,613,615,617,620,622,624,626,628],{"class":302,"line":595},15,[300,597,521],{"class":306},[300,599,123],{"class":310},[300,601,526],{"class":306},[300,603,193],{"class":310},[300,605,454],{"class":314},[300,607,332],{"class":306},[300,609,335],{"class":306},[300,611,612],{"class":338},"#services",[300,614,335],{"class":306},[300,616,420],{"class":306},[300,618,619],{"class":423},"Services",[300,621,427],{"class":306},[300,623,193],{"class":310},[300,625,551],{"class":306},[300,627,123],{"class":310},[300,629,318],{"class":306},[300,631,633,635,637,639,641,643,645,647,650,652,654,657,659,661,663,665],{"class":302,"line":632},16,[300,634,521],{"class":306},[300,636,123],{"class":310},[300,638,526],{"class":306},[300,640,193],{"class":310},[300,642,454],{"class":314},[300,644,332],{"class":306},[300,646,335],{"class":306},[300,648,649],{"class":338},"#contact",[300,651,335],{"class":306},[300,653,420],{"class":306},[300,655,656],{"class":423},"Contact",[300,658,427],{"class":306},[300,660,193],{"class":310},[300,662,551],{"class":306},[300,664,123],{"class":310},[300,666,318],{"class":306},[300,668,670,673,675],{"class":302,"line":669},17,[300,671,672],{"class":306},"            \u003C/",[300,674,120],{"class":310},[300,676,318],{"class":306},[300,678,680,683,685],{"class":302,"line":679},18,[300,681,682],{"class":306},"        \u003C/",[300,684,503],{"class":310},[300,686,318],{"class":306},[300,688,690,693,695],{"class":302,"line":689},19,[300,691,692],{"class":306},"    \u003C/",[300,694,492],{"class":310},[300,696,318],{"class":306},[300,698,700],{"class":302,"line":699},20,[300,701,703],{"emptyLinePlaceholder":702},true,"\n",[300,705,707,709,712],{"class":302,"line":706},21,[300,708,359],{"class":306},[300,710,711],{"class":310},"main",[300,713,318],{"class":306},[300,715,717,719,722,725,727,729,732,734],{"class":302,"line":716},22,[300,718,500],{"class":306},[300,720,721],{"class":310},"section",[300,723,724],{"class":314}," id",[300,726,332],{"class":306},[300,728,335],{"class":306},[300,730,731],{"class":338},"home",[300,733,335],{"class":306},[300,735,318],{"class":306},[300,737,739,741,743,745,748,750,752],{"class":302,"line":738},23,[300,740,511],{"class":306},[300,742,101],{"class":310},[300,744,420],{"class":306},[300,746,747],{"class":423},"Welcome",[300,749,427],{"class":306},[300,751,101],{"class":310},[300,753,318],{"class":306},[300,755,757,759,761],{"class":302,"line":756},24,[300,758,682],{"class":306},[300,760,721],{"class":310},[300,762,318],{"class":306},[300,764,766,768,770],{"class":302,"line":765},25,[300,767,692],{"class":306},[300,769,711],{"class":310},[300,771,318],{"class":306},[300,773,775],{"class":302,"line":774},26,[300,776,703],{"emptyLinePlaceholder":702},[300,778,780,782,785],{"class":302,"line":779},27,[300,781,359],{"class":306},[300,783,784],{"class":310},"footer",[300,786,318],{"class":306},[300,788,790,792,794,796,799,801,803],{"class":302,"line":789},28,[300,791,500],{"class":306},[300,793,106],{"class":310},[300,795,420],{"class":306},[300,797,798],{"class":423},"© 2024 Website Saya",[300,800,427],{"class":306},[300,802,106],{"class":310},[300,804,318],{"class":306},[300,806,808,810,812],{"class":302,"line":807},29,[300,809,692],{"class":306},[300,811,784],{"class":310},[300,813,318],{"class":306},[300,815,817,819,821],{"class":302,"line":816},30,[300,818,427],{"class":306},[300,820,482],{"class":310},[300,822,318],{"class":306},[300,824,826,828,830],{"class":302,"line":825},31,[300,827,427],{"class":306},[300,829,294],{"class":310},[300,831,318],{"class":306},[110,833,835],{"id":834},"_3-setup-template-yang-didownload","3. Setup Template yang Didownload",[115,837,839],{"id":838},"step-1-extract-organize","Step 1: Extract & Organize",[290,841,845],{"className":842,"code":843,"language":844,"meta":295,"style":295},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Extract template\nunzip template-html.zip\ncd template-html\n\n# Lihat struktur folder\nls -la\n","bash",[297,846,847,853,862,871,875,880],{"__ignoreMap":295},[300,848,849],{"class":302,"line":303},[300,850,852],{"class":851},"sHwdD","# Extract template\n",[300,854,855,859],{"class":302,"line":321},[300,856,858],{"class":857},"sBMFI","unzip",[300,860,861],{"class":338}," template-html.zip\n",[300,863,864,868],{"class":302,"line":346},[300,865,867],{"class":866},"s2Zo4","cd",[300,869,870],{"class":338}," template-html\n",[300,872,873],{"class":302,"line":356},[300,874,703],{"emptyLinePlaceholder":702},[300,876,877],{"class":302,"line":379},[300,878,879],{"class":851},"# Lihat struktur folder\n",[300,881,882,885],{"class":302,"line":412},[300,883,884],{"class":857},"ls",[300,886,887],{"class":338}," -la\n",[115,889,891],{"id":890},"step-2-struktur-folder-ideal","Step 2: Struktur Folder Ideal",[290,893,898],{"className":894,"code":896,"language":897},[895],"language-text","project/\n├── index.html              # Home page\n├── about.html              # About page\n├── services.html           # Services page\n├── contact.html            # Contact page\n│\n├── css/\n│   ├── style.css           # Main stylesheet\n│   ├── responsive.css      # Mobile responsive\n│   └── normalize.css       # Browser normalization\n│\n├── js/\n│   ├── main.js             # Main JavaScript\n│   ├── jquery.min.js       # jQuery (jika diperlukan)\n│   └── bootstrap.min.js    # Bootstrap JS\n│\n├── images/\n│   ├── logo.png\n│   ├── hero.jpg\n│   └── icons/\n│\n├── fonts/\n│   ├── roboto.woff2\n│   └── opensans.woff2\n│\n├── assets/\n│   └── downloads/\n│\n└── README.md\n","text",[297,899,896],{"__ignoreMap":295},[115,901,903],{"id":902},"step-3-jalankan-dengan-live-server","Step 3: Jalankan dengan Live Server",[290,905,907],{"className":842,"code":906,"language":844,"meta":295,"style":295},"# Jika menggunakan VS Code\n# 1. Install \"Live Server\" extension\n# 2. Right-click pada index.html\n# 3. Select \"Open with Live Server\"\n\n# Atau dengan Python\npython3 -m http.server 8000\n\n# Akses di http://localhost:8000\n",[297,908,909,914,919,924,929,933,938,953,957],{"__ignoreMap":295},[300,910,911],{"class":302,"line":303},[300,912,913],{"class":851},"# Jika menggunakan VS Code\n",[300,915,916],{"class":302,"line":321},[300,917,918],{"class":851},"# 1. Install \"Live Server\" extension\n",[300,920,921],{"class":302,"line":346},[300,922,923],{"class":851},"# 2. Right-click pada index.html\n",[300,925,926],{"class":302,"line":356},[300,927,928],{"class":851},"# 3. Select \"Open with Live Server\"\n",[300,930,931],{"class":302,"line":379},[300,932,703],{"emptyLinePlaceholder":702},[300,934,935],{"class":302,"line":412},[300,936,937],{"class":851},"# Atau dengan Python\n",[300,939,940,943,946,949],{"class":302,"line":434},[300,941,942],{"class":857},"python3",[300,944,945],{"class":338}," -m",[300,947,948],{"class":338}," http.server",[300,950,952],{"class":951},"sbssI"," 8000\n",[300,954,955],{"class":302,"line":468},[300,956,703],{"emptyLinePlaceholder":702},[300,958,959],{"class":302,"line":477},[300,960,961],{"class":851},"# Akses di http://localhost:8000\n",[110,963,965],{"id":964},"_4-customization-modification","4. Customization & Modification",[115,967,969],{"id":968},"edit-content-html","Edit Content HTML",[290,971,973],{"className":292,"code":972,"language":294,"meta":295,"style":295},"\u003C!-- Ubah judul website -->\n\u003Ctitle>Nama Website Saya\u003C/title>\n\n\u003C!-- Ubah logo -->\n\u003Cimg src=\"images/my-logo.png\" alt=\"Logo\">\n\n\u003C!-- Ubah teks -->\n\u003Ch1>Selamat Datang di Website Saya\u003C/h1>\n\u003Cp>Deskripsi website saya di sini\u003C/p>\n",[297,974,975,980,997,1001,1006,1039,1043,1048,1065],{"__ignoreMap":295},[300,976,977],{"class":302,"line":303},[300,978,979],{"class":851},"\u003C!-- Ubah judul website -->\n",[300,981,982,984,986,988,991,993,995],{"class":302,"line":321},[300,983,324],{"class":306},[300,985,417],{"class":310},[300,987,420],{"class":306},[300,989,990],{"class":423},"Nama Website Saya",[300,992,427],{"class":306},[300,994,417],{"class":310},[300,996,318],{"class":306},[300,998,999],{"class":302,"line":346},[300,1000,703],{"emptyLinePlaceholder":702},[300,1002,1003],{"class":302,"line":356},[300,1004,1005],{"class":851},"\u003C!-- Ubah logo -->\n",[300,1007,1008,1010,1013,1016,1018,1020,1023,1025,1028,1030,1032,1035,1037],{"class":302,"line":379},[300,1009,324],{"class":306},[300,1011,1012],{"class":310},"img",[300,1014,1015],{"class":314}," src",[300,1017,332],{"class":306},[300,1019,335],{"class":306},[300,1021,1022],{"class":338},"images/my-logo.png",[300,1024,335],{"class":306},[300,1026,1027],{"class":314}," alt",[300,1029,332],{"class":306},[300,1031,335],{"class":306},[300,1033,1034],{"class":338},"Logo",[300,1036,335],{"class":306},[300,1038,318],{"class":306},[300,1040,1041],{"class":302,"line":412},[300,1042,703],{"emptyLinePlaceholder":702},[300,1044,1045],{"class":302,"line":434},[300,1046,1047],{"class":851},"\u003C!-- Ubah teks -->\n",[300,1049,1050,1052,1054,1056,1059,1061,1063],{"class":302,"line":468},[300,1051,324],{"class":306},[300,1053,101],{"class":310},[300,1055,420],{"class":306},[300,1057,1058],{"class":423},"Selamat Datang di Website Saya",[300,1060,427],{"class":306},[300,1062,101],{"class":310},[300,1064,318],{"class":306},[300,1066,1067,1069,1071,1073,1076,1078,1080],{"class":302,"line":477},[300,1068,324],{"class":306},[300,1070,106],{"class":310},[300,1072,420],{"class":306},[300,1074,1075],{"class":423},"Deskripsi website saya di sini",[300,1077,427],{"class":306},[300,1079,106],{"class":310},[300,1081,318],{"class":306},[115,1083,1085],{"id":1084},"customize-colors-styling","Customize Colors & Styling",[106,1087,1088,1089,1092],{},"Edit ",[297,1090,1091],{},"css/style.css",":",[290,1094,1098],{"className":1095,"code":1096,"language":1097,"meta":295,"style":295},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","/* Root variables untuk color consistency */\n:root {\n  --primary-color: #3498db;\n  --secondary-color: #2ecc71;\n  --text-dark: #2c3e50;\n  --bg-light: #ecf0f1;\n}\n\n/* Gunakan variables */\nbody {\n  color: var(--text-dark);\n  background-color: var(--bg-light);\n}\n\n.btn-primary {\n  background-color: var(--primary-color);\n}\n","css",[297,1099,1100,1105,1115,1131,1145,1159,1173,1178,1182,1187,1193,1213,1229,1233,1237,1247,1262],{"__ignoreMap":295},[300,1101,1102],{"class":302,"line":303},[300,1103,1104],{"class":851},"/* Root variables untuk color consistency */\n",[300,1106,1107,1109,1112],{"class":302,"line":321},[300,1108,1092],{"class":306},[300,1110,1111],{"class":314},"root",[300,1113,1114],{"class":306}," {\n",[300,1116,1117,1120,1122,1125,1128],{"class":302,"line":346},[300,1118,1119],{"class":423},"  --primary-color",[300,1121,1092],{"class":306},[300,1123,1124],{"class":306}," #",[300,1126,1127],{"class":423},"3498db",[300,1129,1130],{"class":306},";\n",[300,1132,1133,1136,1138,1140,1143],{"class":302,"line":356},[300,1134,1135],{"class":423},"  --secondary-color",[300,1137,1092],{"class":306},[300,1139,1124],{"class":306},[300,1141,1142],{"class":423},"2ecc71",[300,1144,1130],{"class":306},[300,1146,1147,1150,1152,1154,1157],{"class":302,"line":379},[300,1148,1149],{"class":423},"  --text-dark",[300,1151,1092],{"class":306},[300,1153,1124],{"class":306},[300,1155,1156],{"class":423},"2c3e50",[300,1158,1130],{"class":306},[300,1160,1161,1164,1166,1168,1171],{"class":302,"line":412},[300,1162,1163],{"class":423},"  --bg-light",[300,1165,1092],{"class":306},[300,1167,1124],{"class":306},[300,1169,1170],{"class":423},"ecf0f1",[300,1172,1130],{"class":306},[300,1174,1175],{"class":302,"line":434},[300,1176,1177],{"class":306},"}\n",[300,1179,1180],{"class":302,"line":468},[300,1181,703],{"emptyLinePlaceholder":702},[300,1183,1184],{"class":302,"line":477},[300,1185,1186],{"class":851},"/* Gunakan variables */\n",[300,1188,1189,1191],{"class":302,"line":487},[300,1190,482],{"class":857},[300,1192,1114],{"class":306},[300,1194,1195,1199,1201,1204,1207,1210],{"class":302,"line":497},[300,1196,1198],{"class":1197},"sqsOY","  color",[300,1200,1092],{"class":306},[300,1202,1203],{"class":866}," var",[300,1205,1206],{"class":306},"(",[300,1208,1209],{"class":423},"--text-dark",[300,1211,1212],{"class":306},");\n",[300,1214,1215,1218,1220,1222,1224,1227],{"class":302,"line":508},[300,1216,1217],{"class":1197},"  background-color",[300,1219,1092],{"class":306},[300,1221,1203],{"class":866},[300,1223,1206],{"class":306},[300,1225,1226],{"class":423},"--bg-light",[300,1228,1212],{"class":306},[300,1230,1231],{"class":302,"line":518},[300,1232,1177],{"class":306},[300,1234,1235],{"class":302,"line":558},[300,1236,703],{"emptyLinePlaceholder":702},[300,1238,1239,1242,1245],{"class":302,"line":595},[300,1240,1241],{"class":306},".",[300,1243,1244],{"class":857},"btn-primary",[300,1246,1114],{"class":306},[300,1248,1249,1251,1253,1255,1257,1260],{"class":302,"line":632},[300,1250,1217],{"class":1197},[300,1252,1092],{"class":306},[300,1254,1203],{"class":866},[300,1256,1206],{"class":306},[300,1258,1259],{"class":423},"--primary-color",[300,1261,1212],{"class":306},[300,1263,1264],{"class":302,"line":669},[300,1265,1177],{"class":306},[115,1267,1269],{"id":1268},"responsive-design","Responsive Design",[290,1271,1273],{"className":1095,"code":1272,"language":1097,"meta":295,"style":295},"/* Desktop first (dari besar ke kecil) */\n.container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 20px;\n}\n\n/* Tablet - 768px and down */\n@media (max-width: 768px) {\n  .container {\n    padding: 15px;\n  }\n\n  .grid {\n    grid-template-columns: 1fr 1fr;\n  }\n}\n\n/* Mobile - 480px and down */\n@media (max-width: 480px) {\n  .container {\n    padding: 10px;\n  }\n\n  .grid {\n    grid-template-columns: 1fr;\n  }\n\n  nav ul {\n    flex-direction: column;\n  }\n}\n",[297,1274,1275,1280,1289,1301,1316,1328,1332,1336,1341,1363,1372,1384,1389,1393,1402,1416,1420,1424,1428,1433,1450,1458,1469,1473,1477,1485,1495,1499,1503,1513,1525,1529],{"__ignoreMap":295},[300,1276,1277],{"class":302,"line":303},[300,1278,1279],{"class":851},"/* Desktop first (dari besar ke kecil) */\n",[300,1281,1282,1284,1287],{"class":302,"line":321},[300,1283,1241],{"class":306},[300,1285,1286],{"class":857},"container",[300,1288,1114],{"class":306},[300,1290,1291,1294,1296,1299],{"class":302,"line":346},[300,1292,1293],{"class":1197},"  max-width",[300,1295,1092],{"class":306},[300,1297,1298],{"class":951}," 1200px",[300,1300,1130],{"class":306},[300,1302,1303,1306,1308,1311,1314],{"class":302,"line":356},[300,1304,1305],{"class":1197},"  margin",[300,1307,1092],{"class":306},[300,1309,1310],{"class":951}," 0",[300,1312,1313],{"class":423}," auto",[300,1315,1130],{"class":306},[300,1317,1318,1321,1323,1326],{"class":302,"line":379},[300,1319,1320],{"class":1197},"  padding",[300,1322,1092],{"class":306},[300,1324,1325],{"class":951}," 20px",[300,1327,1130],{"class":306},[300,1329,1330],{"class":302,"line":412},[300,1331,1177],{"class":306},[300,1333,1334],{"class":302,"line":434},[300,1335,703],{"emptyLinePlaceholder":702},[300,1337,1338],{"class":302,"line":468},[300,1339,1340],{"class":851},"/* Tablet - 768px and down */\n",[300,1342,1343,1347,1350,1353,1355,1358,1361],{"class":302,"line":477},[300,1344,1346],{"class":1345},"s7zQu","@media",[300,1348,1349],{"class":306}," (",[300,1351,1352],{"class":857},"max-width",[300,1354,1092],{"class":306},[300,1356,1357],{"class":951}," 768px",[300,1359,1360],{"class":306},")",[300,1362,1114],{"class":306},[300,1364,1365,1368,1370],{"class":302,"line":487},[300,1366,1367],{"class":306},"  .",[300,1369,1286],{"class":857},[300,1371,1114],{"class":306},[300,1373,1374,1377,1379,1382],{"class":302,"line":497},[300,1375,1376],{"class":1197},"    padding",[300,1378,1092],{"class":306},[300,1380,1381],{"class":951}," 15px",[300,1383,1130],{"class":306},[300,1385,1386],{"class":302,"line":508},[300,1387,1388],{"class":306},"  }\n",[300,1390,1391],{"class":302,"line":518},[300,1392,703],{"emptyLinePlaceholder":702},[300,1394,1395,1397,1400],{"class":302,"line":558},[300,1396,1367],{"class":306},[300,1398,1399],{"class":857},"grid",[300,1401,1114],{"class":306},[300,1403,1404,1407,1409,1412,1414],{"class":302,"line":595},[300,1405,1406],{"class":1197},"    grid-template-columns",[300,1408,1092],{"class":306},[300,1410,1411],{"class":951}," 1fr",[300,1413,1411],{"class":951},[300,1415,1130],{"class":306},[300,1417,1418],{"class":302,"line":632},[300,1419,1388],{"class":306},[300,1421,1422],{"class":302,"line":669},[300,1423,1177],{"class":306},[300,1425,1426],{"class":302,"line":679},[300,1427,703],{"emptyLinePlaceholder":702},[300,1429,1430],{"class":302,"line":689},[300,1431,1432],{"class":851},"/* Mobile - 480px and down */\n",[300,1434,1435,1437,1439,1441,1443,1446,1448],{"class":302,"line":699},[300,1436,1346],{"class":1345},[300,1438,1349],{"class":306},[300,1440,1352],{"class":857},[300,1442,1092],{"class":306},[300,1444,1445],{"class":951}," 480px",[300,1447,1360],{"class":306},[300,1449,1114],{"class":306},[300,1451,1452,1454,1456],{"class":302,"line":706},[300,1453,1367],{"class":306},[300,1455,1286],{"class":857},[300,1457,1114],{"class":306},[300,1459,1460,1462,1464,1467],{"class":302,"line":716},[300,1461,1376],{"class":1197},[300,1463,1092],{"class":306},[300,1465,1466],{"class":951}," 10px",[300,1468,1130],{"class":306},[300,1470,1471],{"class":302,"line":738},[300,1472,1388],{"class":306},[300,1474,1475],{"class":302,"line":756},[300,1476,703],{"emptyLinePlaceholder":702},[300,1478,1479,1481,1483],{"class":302,"line":765},[300,1480,1367],{"class":306},[300,1482,1399],{"class":857},[300,1484,1114],{"class":306},[300,1486,1487,1489,1491,1493],{"class":302,"line":774},[300,1488,1406],{"class":1197},[300,1490,1092],{"class":306},[300,1492,1411],{"class":951},[300,1494,1130],{"class":306},[300,1496,1497],{"class":302,"line":779},[300,1498,1388],{"class":306},[300,1500,1501],{"class":302,"line":789},[300,1502,703],{"emptyLinePlaceholder":702},[300,1504,1505,1508,1511],{"class":302,"line":807},[300,1506,1507],{"class":857},"  nav",[300,1509,1510],{"class":857}," ul",[300,1512,1114],{"class":306},[300,1514,1515,1518,1520,1523],{"class":302,"line":816},[300,1516,1517],{"class":1197},"    flex-direction",[300,1519,1092],{"class":306},[300,1521,1522],{"class":423}," column",[300,1524,1130],{"class":306},[300,1526,1527],{"class":302,"line":825},[300,1528,1388],{"class":306},[300,1530,1532],{"class":302,"line":1531},32,[300,1533,1177],{"class":306},[110,1535,1537],{"id":1536},"_5-add-functionality-dengan-javascript","5. Add Functionality dengan JavaScript",[115,1539,1541],{"id":1540},"navigation-mobile-menu","Navigation Mobile Menu",[290,1543,1547],{"className":1544,"code":1545,"language":1546,"meta":295,"style":295},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// File: js/mobile-menu.js\ndocument.addEventListener('DOMContentLoaded', function() {\n    const hamburger = document.querySelector('.hamburger');\n    const nav = document.querySelector('nav ul');\n\n    hamburger.addEventListener('click', function() {\n        nav.classList.toggle('active');\n    });\n});\n","javascript",[297,1548,1549,1554,1585,1617,1645,1649,1675,1703,1712],{"__ignoreMap":295},[300,1550,1551],{"class":302,"line":303},[300,1552,1553],{"class":851},"// File: js/mobile-menu.js\n",[300,1555,1556,1559,1561,1564,1566,1569,1572,1574,1577,1580,1583],{"class":302,"line":321},[300,1557,1558],{"class":423},"document",[300,1560,1241],{"class":306},[300,1562,1563],{"class":866},"addEventListener",[300,1565,1206],{"class":423},[300,1567,1568],{"class":306},"'",[300,1570,1571],{"class":338},"DOMContentLoaded",[300,1573,1568],{"class":306},[300,1575,1576],{"class":306},",",[300,1578,1579],{"class":314}," function",[300,1581,1582],{"class":306},"()",[300,1584,1114],{"class":306},[300,1586,1587,1590,1593,1596,1599,1601,1604,1606,1608,1611,1613,1615],{"class":302,"line":346},[300,1588,1589],{"class":314},"    const",[300,1591,1592],{"class":423}," hamburger",[300,1594,1595],{"class":306}," =",[300,1597,1598],{"class":423}," document",[300,1600,1241],{"class":306},[300,1602,1603],{"class":866},"querySelector",[300,1605,1206],{"class":310},[300,1607,1568],{"class":306},[300,1609,1610],{"class":338},".hamburger",[300,1612,1568],{"class":306},[300,1614,1360],{"class":310},[300,1616,1130],{"class":306},[300,1618,1619,1621,1624,1626,1628,1630,1632,1634,1636,1639,1641,1643],{"class":302,"line":356},[300,1620,1589],{"class":314},[300,1622,1623],{"class":423}," nav",[300,1625,1595],{"class":306},[300,1627,1598],{"class":423},[300,1629,1241],{"class":306},[300,1631,1603],{"class":866},[300,1633,1206],{"class":310},[300,1635,1568],{"class":306},[300,1637,1638],{"class":338},"nav ul",[300,1640,1568],{"class":306},[300,1642,1360],{"class":310},[300,1644,1130],{"class":306},[300,1646,1647],{"class":302,"line":379},[300,1648,703],{"emptyLinePlaceholder":702},[300,1650,1651,1654,1656,1658,1660,1662,1665,1667,1669,1671,1673],{"class":302,"line":412},[300,1652,1653],{"class":423},"    hamburger",[300,1655,1241],{"class":306},[300,1657,1563],{"class":866},[300,1659,1206],{"class":310},[300,1661,1568],{"class":306},[300,1663,1664],{"class":338},"click",[300,1666,1568],{"class":306},[300,1668,1576],{"class":306},[300,1670,1579],{"class":314},[300,1672,1582],{"class":306},[300,1674,1114],{"class":306},[300,1676,1677,1680,1682,1685,1687,1690,1692,1694,1697,1699,1701],{"class":302,"line":434},[300,1678,1679],{"class":423},"        nav",[300,1681,1241],{"class":306},[300,1683,1684],{"class":423},"classList",[300,1686,1241],{"class":306},[300,1688,1689],{"class":866},"toggle",[300,1691,1206],{"class":310},[300,1693,1568],{"class":306},[300,1695,1696],{"class":338},"active",[300,1698,1568],{"class":306},[300,1700,1360],{"class":310},[300,1702,1130],{"class":306},[300,1704,1705,1708,1710],{"class":302,"line":468},[300,1706,1707],{"class":306},"    }",[300,1709,1360],{"class":310},[300,1711,1130],{"class":306},[300,1713,1714,1717,1719],{"class":302,"line":477},[300,1715,1716],{"class":306},"}",[300,1718,1360],{"class":423},[300,1720,1130],{"class":306},[106,1722,1723],{},"HTML:",[290,1725,1727],{"className":292,"code":1726,"language":294,"meta":295,"style":295},"\u003Cheader>\n    \u003Cbutton class=\"hamburger\">☰\u003C/button>\n    \u003Cnav>\n        \u003Cul>\n            \u003Cli>\u003Ca href=\"#home\">Home\u003C/a>\u003C/li>\n            \u003Cli>\u003Ca href=\"#about\">About\u003C/a>\u003C/li>\n        \u003C/ul>\n    \u003C/nav>\n\u003C/header>\n",[297,1728,1729,1737,1767,1775,1783,1817,1851,1859,1867],{"__ignoreMap":295},[300,1730,1731,1733,1735],{"class":302,"line":303},[300,1732,324],{"class":306},[300,1734,492],{"class":310},[300,1736,318],{"class":306},[300,1738,1739,1741,1744,1747,1749,1751,1754,1756,1758,1761,1763,1765],{"class":302,"line":321},[300,1740,359],{"class":306},[300,1742,1743],{"class":310},"button",[300,1745,1746],{"class":314}," class",[300,1748,332],{"class":306},[300,1750,335],{"class":306},[300,1752,1753],{"class":338},"hamburger",[300,1755,335],{"class":306},[300,1757,420],{"class":306},[300,1759,1760],{"class":423},"☰",[300,1762,427],{"class":306},[300,1764,1743],{"class":310},[300,1766,318],{"class":306},[300,1768,1769,1771,1773],{"class":302,"line":346},[300,1770,359],{"class":306},[300,1772,503],{"class":310},[300,1774,318],{"class":306},[300,1776,1777,1779,1781],{"class":302,"line":356},[300,1778,500],{"class":306},[300,1780,120],{"class":310},[300,1782,318],{"class":306},[300,1784,1785,1787,1789,1791,1793,1795,1797,1799,1801,1803,1805,1807,1809,1811,1813,1815],{"class":302,"line":379},[300,1786,511],{"class":306},[300,1788,123],{"class":310},[300,1790,526],{"class":306},[300,1792,193],{"class":310},[300,1794,454],{"class":314},[300,1796,332],{"class":306},[300,1798,335],{"class":306},[300,1800,537],{"class":338},[300,1802,335],{"class":306},[300,1804,420],{"class":306},[300,1806,544],{"class":423},[300,1808,427],{"class":306},[300,1810,193],{"class":310},[300,1812,551],{"class":306},[300,1814,123],{"class":310},[300,1816,318],{"class":306},[300,1818,1819,1821,1823,1825,1827,1829,1831,1833,1835,1837,1839,1841,1843,1845,1847,1849],{"class":302,"line":412},[300,1820,511],{"class":306},[300,1822,123],{"class":310},[300,1824,526],{"class":306},[300,1826,193],{"class":310},[300,1828,454],{"class":314},[300,1830,332],{"class":306},[300,1832,335],{"class":306},[300,1834,575],{"class":338},[300,1836,335],{"class":306},[300,1838,420],{"class":306},[300,1840,582],{"class":423},[300,1842,427],{"class":306},[300,1844,193],{"class":310},[300,1846,551],{"class":306},[300,1848,123],{"class":310},[300,1850,318],{"class":306},[300,1852,1853,1855,1857],{"class":302,"line":434},[300,1854,682],{"class":306},[300,1856,120],{"class":310},[300,1858,318],{"class":306},[300,1860,1861,1863,1865],{"class":302,"line":468},[300,1862,692],{"class":306},[300,1864,503],{"class":310},[300,1866,318],{"class":306},[300,1868,1869,1871,1873],{"class":302,"line":477},[300,1870,427],{"class":306},[300,1872,492],{"class":310},[300,1874,318],{"class":306},[106,1876,1877],{},"CSS:",[290,1879,1881],{"className":1095,"code":1880,"language":1097,"meta":295,"style":295},".hamburger {\n    display: none;\n    background: none;\n    border: none;\n    font-size: 24px;\n    cursor: pointer;\n}\n\n@media (max-width: 768px) {\n    .hamburger {\n        display: block;\n    }\n\n    nav ul {\n        display: none;\n        flex-direction: column;\n    }\n\n    nav ul.active {\n        display: flex;\n    }\n}\n",[297,1882,1883,1891,1903,1914,1925,1937,1949,1953,1957,1973,1982,1994,1999,2003,2012,2022,2033,2037,2041,2053,2064,2068],{"__ignoreMap":295},[300,1884,1885,1887,1889],{"class":302,"line":303},[300,1886,1241],{"class":306},[300,1888,1753],{"class":857},[300,1890,1114],{"class":306},[300,1892,1893,1896,1898,1901],{"class":302,"line":321},[300,1894,1895],{"class":1197},"    display",[300,1897,1092],{"class":306},[300,1899,1900],{"class":423}," none",[300,1902,1130],{"class":306},[300,1904,1905,1908,1910,1912],{"class":302,"line":346},[300,1906,1907],{"class":1197},"    background",[300,1909,1092],{"class":306},[300,1911,1900],{"class":423},[300,1913,1130],{"class":306},[300,1915,1916,1919,1921,1923],{"class":302,"line":356},[300,1917,1918],{"class":1197},"    border",[300,1920,1092],{"class":306},[300,1922,1900],{"class":423},[300,1924,1130],{"class":306},[300,1926,1927,1930,1932,1935],{"class":302,"line":379},[300,1928,1929],{"class":1197},"    font-size",[300,1931,1092],{"class":306},[300,1933,1934],{"class":951}," 24px",[300,1936,1130],{"class":306},[300,1938,1939,1942,1944,1947],{"class":302,"line":412},[300,1940,1941],{"class":1197},"    cursor",[300,1943,1092],{"class":306},[300,1945,1946],{"class":423}," pointer",[300,1948,1130],{"class":306},[300,1950,1951],{"class":302,"line":434},[300,1952,1177],{"class":306},[300,1954,1955],{"class":302,"line":468},[300,1956,703],{"emptyLinePlaceholder":702},[300,1958,1959,1961,1963,1965,1967,1969,1971],{"class":302,"line":477},[300,1960,1346],{"class":1345},[300,1962,1349],{"class":306},[300,1964,1352],{"class":857},[300,1966,1092],{"class":306},[300,1968,1357],{"class":951},[300,1970,1360],{"class":306},[300,1972,1114],{"class":306},[300,1974,1975,1978,1980],{"class":302,"line":487},[300,1976,1977],{"class":306},"    .",[300,1979,1753],{"class":857},[300,1981,1114],{"class":306},[300,1983,1984,1987,1989,1992],{"class":302,"line":497},[300,1985,1986],{"class":1197},"        display",[300,1988,1092],{"class":306},[300,1990,1991],{"class":423}," block",[300,1993,1130],{"class":306},[300,1995,1996],{"class":302,"line":508},[300,1997,1998],{"class":306},"    }\n",[300,2000,2001],{"class":302,"line":518},[300,2002,703],{"emptyLinePlaceholder":702},[300,2004,2005,2008,2010],{"class":302,"line":558},[300,2006,2007],{"class":857},"    nav",[300,2009,1510],{"class":857},[300,2011,1114],{"class":306},[300,2013,2014,2016,2018,2020],{"class":302,"line":595},[300,2015,1986],{"class":1197},[300,2017,1092],{"class":306},[300,2019,1900],{"class":423},[300,2021,1130],{"class":306},[300,2023,2024,2027,2029,2031],{"class":302,"line":632},[300,2025,2026],{"class":1197},"        flex-direction",[300,2028,1092],{"class":306},[300,2030,1522],{"class":423},[300,2032,1130],{"class":306},[300,2034,2035],{"class":302,"line":669},[300,2036,1998],{"class":306},[300,2038,2039],{"class":302,"line":679},[300,2040,703],{"emptyLinePlaceholder":702},[300,2042,2043,2045,2047,2049,2051],{"class":302,"line":689},[300,2044,2007],{"class":857},[300,2046,1510],{"class":857},[300,2048,1241],{"class":306},[300,2050,1696],{"class":857},[300,2052,1114],{"class":306},[300,2054,2055,2057,2059,2062],{"class":302,"line":699},[300,2056,1986],{"class":1197},[300,2058,1092],{"class":306},[300,2060,2061],{"class":423}," flex",[300,2063,1130],{"class":306},[300,2065,2066],{"class":302,"line":706},[300,2067,1998],{"class":306},[300,2069,2070],{"class":302,"line":716},[300,2071,1177],{"class":306},[115,2073,2075],{"id":2074},"form-dengan-validation","Form dengan Validation",[290,2077,2079],{"className":1544,"code":2078,"language":1546,"meta":295,"style":295},"// File: js/form-validation.js\ndocument.getElementById('contactForm').addEventListener('submit', function(e) {\n    e.preventDefault();\n\n    const email = document.getElementById('email');\n    const name = document.getElementById('name');\n\n    // Simple validation\n    if (name.value.trim() === '') {\n        alert('Nama tidak boleh kosong');\n        return;\n    }\n\n    if (email.value.indexOf('@') === -1) {\n        alert('Email tidak valid');\n        return;\n    }\n\n    // Send form\n    console.log('Form submitted:', {\n        name: name.value,\n        email: email.value\n    });\n});\n",[297,2080,2081,2086,2133,2147,2151,2179,2206,2210,2215,2249,2267,2274,2278,2282,2322,2339,2345,2349,2353,2358,2381,2397,2411,2419],{"__ignoreMap":295},[300,2082,2083],{"class":302,"line":303},[300,2084,2085],{"class":851},"// File: js/form-validation.js\n",[300,2087,2088,2090,2092,2095,2097,2099,2102,2104,2106,2108,2110,2112,2114,2117,2119,2121,2123,2125,2129,2131],{"class":302,"line":321},[300,2089,1558],{"class":423},[300,2091,1241],{"class":306},[300,2093,2094],{"class":866},"getElementById",[300,2096,1206],{"class":423},[300,2098,1568],{"class":306},[300,2100,2101],{"class":338},"contactForm",[300,2103,1568],{"class":306},[300,2105,1360],{"class":423},[300,2107,1241],{"class":306},[300,2109,1563],{"class":866},[300,2111,1206],{"class":423},[300,2113,1568],{"class":306},[300,2115,2116],{"class":338},"submit",[300,2118,1568],{"class":306},[300,2120,1576],{"class":306},[300,2122,1579],{"class":314},[300,2124,1206],{"class":306},[300,2126,2128],{"class":2127},"sHdIc","e",[300,2130,1360],{"class":306},[300,2132,1114],{"class":306},[300,2134,2135,2138,2140,2143,2145],{"class":302,"line":346},[300,2136,2137],{"class":423},"    e",[300,2139,1241],{"class":306},[300,2141,2142],{"class":866},"preventDefault",[300,2144,1582],{"class":310},[300,2146,1130],{"class":306},[300,2148,2149],{"class":302,"line":356},[300,2150,703],{"emptyLinePlaceholder":702},[300,2152,2153,2155,2158,2160,2162,2164,2166,2168,2170,2173,2175,2177],{"class":302,"line":379},[300,2154,1589],{"class":314},[300,2156,2157],{"class":423}," email",[300,2159,1595],{"class":306},[300,2161,1598],{"class":423},[300,2163,1241],{"class":306},[300,2165,2094],{"class":866},[300,2167,1206],{"class":310},[300,2169,1568],{"class":306},[300,2171,2172],{"class":338},"email",[300,2174,1568],{"class":306},[300,2176,1360],{"class":310},[300,2178,1130],{"class":306},[300,2180,2181,2183,2185,2187,2189,2191,2193,2195,2197,2200,2202,2204],{"class":302,"line":412},[300,2182,1589],{"class":314},[300,2184,386],{"class":423},[300,2186,1595],{"class":306},[300,2188,1598],{"class":423},[300,2190,1241],{"class":306},[300,2192,2094],{"class":866},[300,2194,1206],{"class":310},[300,2196,1568],{"class":306},[300,2198,2199],{"class":338},"name",[300,2201,1568],{"class":306},[300,2203,1360],{"class":310},[300,2205,1130],{"class":306},[300,2207,2208],{"class":302,"line":434},[300,2209,703],{"emptyLinePlaceholder":702},[300,2211,2212],{"class":302,"line":468},[300,2213,2214],{"class":851},"    // Simple validation\n",[300,2216,2217,2220,2222,2224,2226,2229,2231,2234,2237,2240,2243,2246],{"class":302,"line":477},[300,2218,2219],{"class":1345},"    if",[300,2221,1349],{"class":310},[300,2223,2199],{"class":423},[300,2225,1241],{"class":306},[300,2227,2228],{"class":423},"value",[300,2230,1241],{"class":306},[300,2232,2233],{"class":866},"trim",[300,2235,2236],{"class":310},"() ",[300,2238,2239],{"class":306},"===",[300,2241,2242],{"class":306}," ''",[300,2244,2245],{"class":310},") ",[300,2247,2248],{"class":306},"{\n",[300,2250,2251,2254,2256,2258,2261,2263,2265],{"class":302,"line":487},[300,2252,2253],{"class":866},"        alert",[300,2255,1206],{"class":310},[300,2257,1568],{"class":306},[300,2259,2260],{"class":338},"Nama tidak boleh kosong",[300,2262,1568],{"class":306},[300,2264,1360],{"class":310},[300,2266,1130],{"class":306},[300,2268,2269,2272],{"class":302,"line":497},[300,2270,2271],{"class":1345},"        return",[300,2273,1130],{"class":306},[300,2275,2276],{"class":302,"line":508},[300,2277,1998],{"class":306},[300,2279,2280],{"class":302,"line":518},[300,2281,703],{"emptyLinePlaceholder":702},[300,2283,2284,2286,2288,2290,2292,2294,2296,2299,2301,2303,2306,2308,2310,2312,2315,2318,2320],{"class":302,"line":558},[300,2285,2219],{"class":1345},[300,2287,1349],{"class":310},[300,2289,2172],{"class":423},[300,2291,1241],{"class":306},[300,2293,2228],{"class":423},[300,2295,1241],{"class":306},[300,2297,2298],{"class":866},"indexOf",[300,2300,1206],{"class":310},[300,2302,1568],{"class":306},[300,2304,2305],{"class":338},"@",[300,2307,1568],{"class":306},[300,2309,2245],{"class":310},[300,2311,2239],{"class":306},[300,2313,2314],{"class":306}," -",[300,2316,2317],{"class":951},"1",[300,2319,2245],{"class":310},[300,2321,2248],{"class":306},[300,2323,2324,2326,2328,2330,2333,2335,2337],{"class":302,"line":595},[300,2325,2253],{"class":866},[300,2327,1206],{"class":310},[300,2329,1568],{"class":306},[300,2331,2332],{"class":338},"Email tidak valid",[300,2334,1568],{"class":306},[300,2336,1360],{"class":310},[300,2338,1130],{"class":306},[300,2340,2341,2343],{"class":302,"line":632},[300,2342,2271],{"class":1345},[300,2344,1130],{"class":306},[300,2346,2347],{"class":302,"line":669},[300,2348,1998],{"class":306},[300,2350,2351],{"class":302,"line":679},[300,2352,703],{"emptyLinePlaceholder":702},[300,2354,2355],{"class":302,"line":689},[300,2356,2357],{"class":851},"    // Send form\n",[300,2359,2360,2363,2365,2368,2370,2372,2375,2377,2379],{"class":302,"line":699},[300,2361,2362],{"class":423},"    console",[300,2364,1241],{"class":306},[300,2366,2367],{"class":866},"log",[300,2369,1206],{"class":310},[300,2371,1568],{"class":306},[300,2373,2374],{"class":338},"Form submitted:",[300,2376,1568],{"class":306},[300,2378,1576],{"class":306},[300,2380,1114],{"class":306},[300,2382,2383,2386,2388,2390,2392,2394],{"class":302,"line":706},[300,2384,2385],{"class":310},"        name",[300,2387,1092],{"class":306},[300,2389,386],{"class":423},[300,2391,1241],{"class":306},[300,2393,2228],{"class":423},[300,2395,2396],{"class":306},",\n",[300,2398,2399,2402,2404,2406,2408],{"class":302,"line":716},[300,2400,2401],{"class":310},"        email",[300,2403,1092],{"class":306},[300,2405,2157],{"class":423},[300,2407,1241],{"class":306},[300,2409,2410],{"class":423},"value\n",[300,2412,2413,2415,2417],{"class":302,"line":738},[300,2414,1707],{"class":306},[300,2416,1360],{"class":310},[300,2418,1130],{"class":306},[300,2420,2421,2423,2425],{"class":302,"line":756},[300,2422,1716],{"class":306},[300,2424,1360],{"class":423},[300,2426,1130],{"class":306},[115,2428,2430],{"id":2429},"smooth-scroll","Smooth Scroll",[290,2432,2434],{"className":1544,"code":2433,"language":1546,"meta":295,"style":295},"// Smooth scroll untuk anchor links\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n    anchor.addEventListener('click', function (e) {\n        e.preventDefault();\n        document.querySelector(this.getAttribute('href')).scrollIntoView({\n            behavior: 'smooth'\n        });\n    });\n});\n",[297,2435,2436,2441,2476,2505,2518,2556,2572,2581,2589],{"__ignoreMap":295},[300,2437,2438],{"class":302,"line":303},[300,2439,2440],{"class":851},"// Smooth scroll untuk anchor links\n",[300,2442,2443,2445,2447,2450,2452,2454,2457,2459,2461,2463,2466,2468,2471,2474],{"class":302,"line":321},[300,2444,1558],{"class":423},[300,2446,1241],{"class":306},[300,2448,2449],{"class":866},"querySelectorAll",[300,2451,1206],{"class":423},[300,2453,1568],{"class":306},[300,2455,2456],{"class":338},"a[href^=\"#\"]",[300,2458,1568],{"class":306},[300,2460,1360],{"class":423},[300,2462,1241],{"class":306},[300,2464,2465],{"class":866},"forEach",[300,2467,1206],{"class":423},[300,2469,2470],{"class":2127},"anchor",[300,2472,2473],{"class":314}," =>",[300,2475,1114],{"class":306},[300,2477,2478,2481,2483,2485,2487,2489,2491,2493,2495,2497,2499,2501,2503],{"class":302,"line":346},[300,2479,2480],{"class":423},"    anchor",[300,2482,1241],{"class":306},[300,2484,1563],{"class":866},[300,2486,1206],{"class":310},[300,2488,1568],{"class":306},[300,2490,1664],{"class":338},[300,2492,1568],{"class":306},[300,2494,1576],{"class":306},[300,2496,1579],{"class":314},[300,2498,1349],{"class":306},[300,2500,2128],{"class":2127},[300,2502,1360],{"class":306},[300,2504,1114],{"class":306},[300,2506,2507,2510,2512,2514,2516],{"class":302,"line":356},[300,2508,2509],{"class":423},"        e",[300,2511,1241],{"class":306},[300,2513,2142],{"class":866},[300,2515,1582],{"class":310},[300,2517,1130],{"class":306},[300,2519,2520,2523,2525,2527,2529,2532,2535,2537,2539,2542,2544,2547,2549,2552,2554],{"class":302,"line":379},[300,2521,2522],{"class":423},"        document",[300,2524,1241],{"class":306},[300,2526,1603],{"class":866},[300,2528,1206],{"class":310},[300,2530,2531],{"class":306},"this.",[300,2533,2534],{"class":866},"getAttribute",[300,2536,1206],{"class":310},[300,2538,1568],{"class":306},[300,2540,2541],{"class":338},"href",[300,2543,1568],{"class":306},[300,2545,2546],{"class":310},"))",[300,2548,1241],{"class":306},[300,2550,2551],{"class":866},"scrollIntoView",[300,2553,1206],{"class":310},[300,2555,2248],{"class":306},[300,2557,2558,2561,2563,2566,2569],{"class":302,"line":412},[300,2559,2560],{"class":310},"            behavior",[300,2562,1092],{"class":306},[300,2564,2565],{"class":306}," '",[300,2567,2568],{"class":338},"smooth",[300,2570,2571],{"class":306},"'\n",[300,2573,2574,2577,2579],{"class":302,"line":434},[300,2575,2576],{"class":306},"        }",[300,2578,1360],{"class":310},[300,2580,1130],{"class":306},[300,2582,2583,2585,2587],{"class":302,"line":468},[300,2584,1707],{"class":306},[300,2586,1360],{"class":310},[300,2588,1130],{"class":306},[300,2590,2591,2593,2595],{"class":302,"line":477},[300,2592,1716],{"class":306},[300,2594,1360],{"class":423},[300,2596,1130],{"class":306},[110,2598,2600],{"id":2599},"_6-seo-optimization","6. SEO Optimization",[115,2602,2604],{"id":2603},"meta-tags","Meta Tags",[290,2606,2608],{"className":292,"code":2607,"language":294,"meta":295,"style":295},"\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Cmeta name=\"description\" content=\"Deskripsi website untuk search engine\">\n    \u003Cmeta name=\"keywords\" content=\"keyword1, keyword2, keyword3\">\n    \u003Cmeta name=\"author\" content=\"Nama Penulis\">\n    \n    \u003C!-- Open Graph untuk social media -->\n    \u003Cmeta property=\"og:title\" content=\"Judul Website\">\n    \u003Cmeta property=\"og:description\" content=\"Deskripsi\">\n    \u003Cmeta property=\"og:image\" content=\"images/og-image.jpg\">\n    \u003Cmeta property=\"og:url\" content=\"https://website.com\">\n    \n    \u003Ctitle>Judul Website | Subtitle\u003C/title>\n\u003C/head>\n",[297,2609,2610,2618,2636,2664,2694,2724,2754,2759,2764,2795,2825,2855,2885,2889,2906],{"__ignoreMap":295},[300,2611,2612,2614,2616],{"class":302,"line":303},[300,2613,324],{"class":306},[300,2615,351],{"class":310},[300,2617,318],{"class":306},[300,2619,2620,2622,2624,2626,2628,2630,2632,2634],{"class":302,"line":321},[300,2621,359],{"class":306},[300,2623,362],{"class":310},[300,2625,365],{"class":314},[300,2627,332],{"class":306},[300,2629,335],{"class":306},[300,2631,372],{"class":338},[300,2633,335],{"class":306},[300,2635,318],{"class":306},[300,2637,2638,2640,2642,2644,2646,2648,2650,2652,2654,2656,2658,2660,2662],{"class":302,"line":346},[300,2639,359],{"class":306},[300,2641,362],{"class":310},[300,2643,386],{"class":314},[300,2645,332],{"class":306},[300,2647,335],{"class":306},[300,2649,393],{"class":338},[300,2651,335],{"class":306},[300,2653,398],{"class":314},[300,2655,332],{"class":306},[300,2657,335],{"class":306},[300,2659,405],{"class":338},[300,2661,335],{"class":306},[300,2663,318],{"class":306},[300,2665,2666,2668,2670,2672,2674,2676,2679,2681,2683,2685,2687,2690,2692],{"class":302,"line":356},[300,2667,359],{"class":306},[300,2669,362],{"class":310},[300,2671,386],{"class":314},[300,2673,332],{"class":306},[300,2675,335],{"class":306},[300,2677,2678],{"class":338},"description",[300,2680,335],{"class":306},[300,2682,398],{"class":314},[300,2684,332],{"class":306},[300,2686,335],{"class":306},[300,2688,2689],{"class":338},"Deskripsi website untuk search engine",[300,2691,335],{"class":306},[300,2693,318],{"class":306},[300,2695,2696,2698,2700,2702,2704,2706,2709,2711,2713,2715,2717,2720,2722],{"class":302,"line":379},[300,2697,359],{"class":306},[300,2699,362],{"class":310},[300,2701,386],{"class":314},[300,2703,332],{"class":306},[300,2705,335],{"class":306},[300,2707,2708],{"class":338},"keywords",[300,2710,335],{"class":306},[300,2712,398],{"class":314},[300,2714,332],{"class":306},[300,2716,335],{"class":306},[300,2718,2719],{"class":338},"keyword1, keyword2, keyword3",[300,2721,335],{"class":306},[300,2723,318],{"class":306},[300,2725,2726,2728,2730,2732,2734,2736,2739,2741,2743,2745,2747,2750,2752],{"class":302,"line":412},[300,2727,359],{"class":306},[300,2729,362],{"class":310},[300,2731,386],{"class":314},[300,2733,332],{"class":306},[300,2735,335],{"class":306},[300,2737,2738],{"class":338},"author",[300,2740,335],{"class":306},[300,2742,398],{"class":314},[300,2744,332],{"class":306},[300,2746,335],{"class":306},[300,2748,2749],{"class":338},"Nama Penulis",[300,2751,335],{"class":306},[300,2753,318],{"class":306},[300,2755,2756],{"class":302,"line":434},[300,2757,2758],{"class":423},"    \n",[300,2760,2761],{"class":302,"line":468},[300,2762,2763],{"class":851},"    \u003C!-- Open Graph untuk social media -->\n",[300,2765,2766,2768,2770,2773,2775,2777,2780,2782,2784,2786,2788,2791,2793],{"class":302,"line":477},[300,2767,359],{"class":306},[300,2769,362],{"class":310},[300,2771,2772],{"class":314}," property",[300,2774,332],{"class":306},[300,2776,335],{"class":306},[300,2778,2779],{"class":338},"og:title",[300,2781,335],{"class":306},[300,2783,398],{"class":314},[300,2785,332],{"class":306},[300,2787,335],{"class":306},[300,2789,2790],{"class":338},"Judul Website",[300,2792,335],{"class":306},[300,2794,318],{"class":306},[300,2796,2797,2799,2801,2803,2805,2807,2810,2812,2814,2816,2818,2821,2823],{"class":302,"line":487},[300,2798,359],{"class":306},[300,2800,362],{"class":310},[300,2802,2772],{"class":314},[300,2804,332],{"class":306},[300,2806,335],{"class":306},[300,2808,2809],{"class":338},"og:description",[300,2811,335],{"class":306},[300,2813,398],{"class":314},[300,2815,332],{"class":306},[300,2817,335],{"class":306},[300,2819,2820],{"class":338},"Deskripsi",[300,2822,335],{"class":306},[300,2824,318],{"class":306},[300,2826,2827,2829,2831,2833,2835,2837,2840,2842,2844,2846,2848,2851,2853],{"class":302,"line":497},[300,2828,359],{"class":306},[300,2830,362],{"class":310},[300,2832,2772],{"class":314},[300,2834,332],{"class":306},[300,2836,335],{"class":306},[300,2838,2839],{"class":338},"og:image",[300,2841,335],{"class":306},[300,2843,398],{"class":314},[300,2845,332],{"class":306},[300,2847,335],{"class":306},[300,2849,2850],{"class":338},"images/og-image.jpg",[300,2852,335],{"class":306},[300,2854,318],{"class":306},[300,2856,2857,2859,2861,2863,2865,2867,2870,2872,2874,2876,2878,2881,2883],{"class":302,"line":508},[300,2858,359],{"class":306},[300,2860,362],{"class":310},[300,2862,2772],{"class":314},[300,2864,332],{"class":306},[300,2866,335],{"class":306},[300,2868,2869],{"class":338},"og:url",[300,2871,335],{"class":306},[300,2873,398],{"class":314},[300,2875,332],{"class":306},[300,2877,335],{"class":306},[300,2879,2880],{"class":338},"https://website.com",[300,2882,335],{"class":306},[300,2884,318],{"class":306},[300,2886,2887],{"class":302,"line":518},[300,2888,2758],{"class":423},[300,2890,2891,2893,2895,2897,2900,2902,2904],{"class":302,"line":558},[300,2892,359],{"class":306},[300,2894,417],{"class":310},[300,2896,420],{"class":306},[300,2898,2899],{"class":423},"Judul Website | Subtitle",[300,2901,427],{"class":306},[300,2903,417],{"class":310},[300,2905,318],{"class":306},[300,2907,2908,2910,2912],{"class":302,"line":595},[300,2909,427],{"class":306},[300,2911,351],{"class":310},[300,2913,318],{"class":306},[115,2915,2917],{"id":2916},"semantic-html","Semantic HTML",[290,2919,2921],{"className":292,"code":2920,"language":294,"meta":295,"style":295},"\u003C!-- BAIK - Semantic -->\n\u003Cheader>\n    \u003Cnav>Navigation\u003C/nav>\n\u003C/header>\n\n\u003Cmain>\n    \u003Carticle>\n        \u003Ch1>Judul Artikel\u003C/h1>\n        \u003Cp>Konten artikel\u003C/p>\n    \u003C/article>\n\u003C/main>\n\n\u003Cfooter>\n    \u003Csmall>© 2024\u003C/small>\n\u003C/footer>\n\n\u003C!-- TIDAK BAIK - Non-semantic -->\n\u003Cdiv id=\"header\">\n    \u003Cdiv id=\"nav\">Navigation\u003C/div>\n\u003C/div>\n",[297,2922,2923,2928,2936,2953,2961,2965,2973,2982,2999,3016,3024,3032,3036,3044,3062,3070,3074,3079,3098,3124],{"__ignoreMap":295},[300,2924,2925],{"class":302,"line":303},[300,2926,2927],{"class":851},"\u003C!-- BAIK - Semantic -->\n",[300,2929,2930,2932,2934],{"class":302,"line":321},[300,2931,324],{"class":306},[300,2933,492],{"class":310},[300,2935,318],{"class":306},[300,2937,2938,2940,2942,2944,2947,2949,2951],{"class":302,"line":346},[300,2939,359],{"class":306},[300,2941,503],{"class":310},[300,2943,420],{"class":306},[300,2945,2946],{"class":423},"Navigation",[300,2948,427],{"class":306},[300,2950,503],{"class":310},[300,2952,318],{"class":306},[300,2954,2955,2957,2959],{"class":302,"line":356},[300,2956,427],{"class":306},[300,2958,492],{"class":310},[300,2960,318],{"class":306},[300,2962,2963],{"class":302,"line":379},[300,2964,703],{"emptyLinePlaceholder":702},[300,2966,2967,2969,2971],{"class":302,"line":412},[300,2968,324],{"class":306},[300,2970,711],{"class":310},[300,2972,318],{"class":306},[300,2974,2975,2977,2980],{"class":302,"line":434},[300,2976,359],{"class":306},[300,2978,2979],{"class":310},"article",[300,2981,318],{"class":306},[300,2983,2984,2986,2988,2990,2993,2995,2997],{"class":302,"line":468},[300,2985,500],{"class":306},[300,2987,101],{"class":310},[300,2989,420],{"class":306},[300,2991,2992],{"class":423},"Judul Artikel",[300,2994,427],{"class":306},[300,2996,101],{"class":310},[300,2998,318],{"class":306},[300,3000,3001,3003,3005,3007,3010,3012,3014],{"class":302,"line":477},[300,3002,500],{"class":306},[300,3004,106],{"class":310},[300,3006,420],{"class":306},[300,3008,3009],{"class":423},"Konten artikel",[300,3011,427],{"class":306},[300,3013,106],{"class":310},[300,3015,318],{"class":306},[300,3017,3018,3020,3022],{"class":302,"line":487},[300,3019,692],{"class":306},[300,3021,2979],{"class":310},[300,3023,318],{"class":306},[300,3025,3026,3028,3030],{"class":302,"line":497},[300,3027,427],{"class":306},[300,3029,711],{"class":310},[300,3031,318],{"class":306},[300,3033,3034],{"class":302,"line":508},[300,3035,703],{"emptyLinePlaceholder":702},[300,3037,3038,3040,3042],{"class":302,"line":518},[300,3039,324],{"class":306},[300,3041,784],{"class":310},[300,3043,318],{"class":306},[300,3045,3046,3048,3051,3053,3056,3058,3060],{"class":302,"line":558},[300,3047,359],{"class":306},[300,3049,3050],{"class":310},"small",[300,3052,420],{"class":306},[300,3054,3055],{"class":423},"© 2024",[300,3057,427],{"class":306},[300,3059,3050],{"class":310},[300,3061,318],{"class":306},[300,3063,3064,3066,3068],{"class":302,"line":595},[300,3065,427],{"class":306},[300,3067,784],{"class":310},[300,3069,318],{"class":306},[300,3071,3072],{"class":302,"line":632},[300,3073,703],{"emptyLinePlaceholder":702},[300,3075,3076],{"class":302,"line":669},[300,3077,3078],{"class":851},"\u003C!-- TIDAK BAIK - Non-semantic -->\n",[300,3080,3081,3083,3086,3088,3090,3092,3094,3096],{"class":302,"line":679},[300,3082,324],{"class":306},[300,3084,3085],{"class":310},"div",[300,3087,724],{"class":314},[300,3089,332],{"class":306},[300,3091,335],{"class":306},[300,3093,492],{"class":338},[300,3095,335],{"class":306},[300,3097,318],{"class":306},[300,3099,3100,3102,3104,3106,3108,3110,3112,3114,3116,3118,3120,3122],{"class":302,"line":689},[300,3101,359],{"class":306},[300,3103,3085],{"class":310},[300,3105,724],{"class":314},[300,3107,332],{"class":306},[300,3109,335],{"class":306},[300,3111,503],{"class":338},[300,3113,335],{"class":306},[300,3115,420],{"class":306},[300,3117,2946],{"class":423},[300,3119,427],{"class":306},[300,3121,3085],{"class":310},[300,3123,318],{"class":306},[300,3125,3126,3128,3130],{"class":302,"line":699},[300,3127,427],{"class":306},[300,3129,3085],{"class":310},[300,3131,318],{"class":306},[115,3133,3135],{"id":3134},"image-optimization","Image Optimization",[290,3137,3139],{"className":292,"code":3138,"language":294,"meta":295,"style":295},"\u003C!-- Gunakan sizes untuk responsive images -->\n\u003Cimg \n    src=\"images/hero.jpg\" \n    alt=\"Deskripsi gambar\"\n    title=\"Judul gambar\"\n    loading=\"lazy\"\n    width=\"1200\"\n    height=\"600\"\n>\n\n\u003C!-- Picture element untuk different formats -->\n\u003Cpicture>\n    \u003Csource srcset=\"images/hero.webp\" type=\"image/webp\">\n    \u003Csource srcset=\"images/hero.jpg\" type=\"image/jpeg\">\n    \u003Cimg src=\"images/hero.jpg\" alt=\"Hero\">\n\u003C/picture>\n",[297,3140,3141,3146,3155,3171,3186,3200,3214,3228,3242,3246,3250,3255,3264,3297,3326,3355],{"__ignoreMap":295},[300,3142,3143],{"class":302,"line":303},[300,3144,3145],{"class":851},"\u003C!-- Gunakan sizes untuk responsive images -->\n",[300,3147,3148,3150,3152],{"class":302,"line":321},[300,3149,324],{"class":306},[300,3151,1012],{"class":310},[300,3153,3154],{"class":306}," \n",[300,3156,3157,3160,3162,3164,3167,3169],{"class":302,"line":346},[300,3158,3159],{"class":314},"    src",[300,3161,332],{"class":306},[300,3163,335],{"class":306},[300,3165,3166],{"class":338},"images/hero.jpg",[300,3168,335],{"class":306},[300,3170,3154],{"class":306},[300,3172,3173,3176,3178,3180,3183],{"class":302,"line":356},[300,3174,3175],{"class":314},"    alt",[300,3177,332],{"class":306},[300,3179,335],{"class":306},[300,3181,3182],{"class":338},"Deskripsi gambar",[300,3184,3185],{"class":306},"\"\n",[300,3187,3188,3191,3193,3195,3198],{"class":302,"line":379},[300,3189,3190],{"class":314},"    title",[300,3192,332],{"class":306},[300,3194,335],{"class":306},[300,3196,3197],{"class":338},"Judul gambar",[300,3199,3185],{"class":306},[300,3201,3202,3205,3207,3209,3212],{"class":302,"line":412},[300,3203,3204],{"class":314},"    loading",[300,3206,332],{"class":306},[300,3208,335],{"class":306},[300,3210,3211],{"class":338},"lazy",[300,3213,3185],{"class":306},[300,3215,3216,3219,3221,3223,3226],{"class":302,"line":434},[300,3217,3218],{"class":314},"    width",[300,3220,332],{"class":306},[300,3222,335],{"class":306},[300,3224,3225],{"class":338},"1200",[300,3227,3185],{"class":306},[300,3229,3230,3233,3235,3237,3240],{"class":302,"line":468},[300,3231,3232],{"class":314},"    height",[300,3234,332],{"class":306},[300,3236,335],{"class":306},[300,3238,3239],{"class":338},"600",[300,3241,3185],{"class":306},[300,3243,3244],{"class":302,"line":477},[300,3245,318],{"class":306},[300,3247,3248],{"class":302,"line":487},[300,3249,703],{"emptyLinePlaceholder":702},[300,3251,3252],{"class":302,"line":497},[300,3253,3254],{"class":851},"\u003C!-- Picture element untuk different formats -->\n",[300,3256,3257,3259,3262],{"class":302,"line":508},[300,3258,324],{"class":306},[300,3260,3261],{"class":310},"picture",[300,3263,318],{"class":306},[300,3265,3266,3268,3271,3274,3276,3278,3281,3283,3286,3288,3290,3293,3295],{"class":302,"line":518},[300,3267,359],{"class":306},[300,3269,3270],{"class":310},"source",[300,3272,3273],{"class":314}," srcset",[300,3275,332],{"class":306},[300,3277,335],{"class":306},[300,3279,3280],{"class":338},"images/hero.webp",[300,3282,335],{"class":306},[300,3284,3285],{"class":314}," type",[300,3287,332],{"class":306},[300,3289,335],{"class":306},[300,3291,3292],{"class":338},"image/webp",[300,3294,335],{"class":306},[300,3296,318],{"class":306},[300,3298,3299,3301,3303,3305,3307,3309,3311,3313,3315,3317,3319,3322,3324],{"class":302,"line":558},[300,3300,359],{"class":306},[300,3302,3270],{"class":310},[300,3304,3273],{"class":314},[300,3306,332],{"class":306},[300,3308,335],{"class":306},[300,3310,3166],{"class":338},[300,3312,335],{"class":306},[300,3314,3285],{"class":314},[300,3316,332],{"class":306},[300,3318,335],{"class":306},[300,3320,3321],{"class":338},"image/jpeg",[300,3323,335],{"class":306},[300,3325,318],{"class":306},[300,3327,3328,3330,3332,3334,3336,3338,3340,3342,3344,3346,3348,3351,3353],{"class":302,"line":595},[300,3329,359],{"class":306},[300,3331,1012],{"class":310},[300,3333,1015],{"class":314},[300,3335,332],{"class":306},[300,3337,335],{"class":306},[300,3339,3166],{"class":338},[300,3341,335],{"class":306},[300,3343,1027],{"class":314},[300,3345,332],{"class":306},[300,3347,335],{"class":306},[300,3349,3350],{"class":338},"Hero",[300,3352,335],{"class":306},[300,3354,318],{"class":306},[300,3356,3357,3359,3361],{"class":302,"line":632},[300,3358,427],{"class":306},[300,3360,3261],{"class":310},[300,3362,318],{"class":306},[110,3364,3366],{"id":3365},"_7-performance-optimization","7. Performance Optimization",[115,3368,3370],{"id":3369},"minify-css-javascript","Minify CSS & JavaScript",[290,3372,3374],{"className":842,"code":3373,"language":844,"meta":295,"style":295},"# Gunakan online minifiers\n# https://www.minifier.org/\n# https://cssminifier.com/\n\n# Atau dengan CLI tools\nnpm install -g terser\nterser js/main.js -o js/main.min.js\n",[297,3375,3376,3381,3386,3391,3395,3400,3414],{"__ignoreMap":295},[300,3377,3378],{"class":302,"line":303},[300,3379,3380],{"class":851},"# Gunakan online minifiers\n",[300,3382,3383],{"class":302,"line":321},[300,3384,3385],{"class":851},"# https://www.minifier.org/\n",[300,3387,3388],{"class":302,"line":346},[300,3389,3390],{"class":851},"# https://cssminifier.com/\n",[300,3392,3393],{"class":302,"line":356},[300,3394,703],{"emptyLinePlaceholder":702},[300,3396,3397],{"class":302,"line":379},[300,3398,3399],{"class":851},"# Atau dengan CLI tools\n",[300,3401,3402,3405,3408,3411],{"class":302,"line":412},[300,3403,3404],{"class":857},"npm",[300,3406,3407],{"class":338}," install",[300,3409,3410],{"class":338}," -g",[300,3412,3413],{"class":338}," terser\n",[300,3415,3416,3419,3422,3425],{"class":302,"line":434},[300,3417,3418],{"class":857},"terser",[300,3420,3421],{"class":338}," js/main.js",[300,3423,3424],{"class":338}," -o",[300,3426,3427],{"class":338}," js/main.min.js\n",[115,3429,3431],{"id":3430},"optimize-images","Optimize Images",[290,3433,3435],{"className":842,"code":3434,"language":844,"meta":295,"style":295},"# Gunakan ImageMagick\nconvert large-image.jpg -resize 1200x600 optimized.jpg\n\n# Online tools: TinyPNG, Compressor.io\n",[297,3436,3437,3442,3459,3463],{"__ignoreMap":295},[300,3438,3439],{"class":302,"line":303},[300,3440,3441],{"class":851},"# Gunakan ImageMagick\n",[300,3443,3444,3447,3450,3453,3456],{"class":302,"line":321},[300,3445,3446],{"class":857},"convert",[300,3448,3449],{"class":338}," large-image.jpg",[300,3451,3452],{"class":338}," -resize",[300,3454,3455],{"class":338}," 1200x600",[300,3457,3458],{"class":338}," optimized.jpg\n",[300,3460,3461],{"class":302,"line":346},[300,3462,703],{"emptyLinePlaceholder":702},[300,3464,3465],{"class":302,"line":356},[300,3466,3467],{"class":851},"# Online tools: TinyPNG, Compressor.io\n",[115,3469,3471],{"id":3470},"lazy-loading","Lazy Loading",[290,3473,3475],{"className":292,"code":3474,"language":294,"meta":295,"style":295},"\u003Cimg \n    src=\"images/small.jpg\" \n    data-src=\"images/large.jpg\"\n    alt=\"Image\"\n    loading=\"lazy\"\n>\n",[297,3476,3477,3485,3500,3514,3527,3539],{"__ignoreMap":295},[300,3478,3479,3481,3483],{"class":302,"line":303},[300,3480,324],{"class":306},[300,3482,1012],{"class":310},[300,3484,3154],{"class":306},[300,3486,3487,3489,3491,3493,3496,3498],{"class":302,"line":321},[300,3488,3159],{"class":314},[300,3490,332],{"class":306},[300,3492,335],{"class":306},[300,3494,3495],{"class":338},"images/small.jpg",[300,3497,335],{"class":306},[300,3499,3154],{"class":306},[300,3501,3502,3505,3507,3509,3512],{"class":302,"line":346},[300,3503,3504],{"class":314},"    data-src",[300,3506,332],{"class":306},[300,3508,335],{"class":306},[300,3510,3511],{"class":338},"images/large.jpg",[300,3513,3185],{"class":306},[300,3515,3516,3518,3520,3522,3525],{"class":302,"line":356},[300,3517,3175],{"class":314},[300,3519,332],{"class":306},[300,3521,335],{"class":306},[300,3523,3524],{"class":338},"Image",[300,3526,3185],{"class":306},[300,3528,3529,3531,3533,3535,3537],{"class":302,"line":379},[300,3530,3204],{"class":314},[300,3532,332],{"class":306},[300,3534,335],{"class":306},[300,3536,3211],{"class":338},[300,3538,3185],{"class":306},[300,3540,3541],{"class":302,"line":412},[300,3542,318],{"class":306},[110,3544,3546],{"id":3545},"_8-browser-compatibility","8. Browser Compatibility",[115,3548,3550],{"id":3549},"check-compatibility","Check Compatibility",[120,3552,3553,3561],{},[123,3554,3555,3560],{},[193,3556,3559],{"href":3557,"rel":3558},"https://caniuse.com",[197],"caniuse.com"," - Check CSS/JS support",[123,3562,3563,3568],{},[193,3564,3567],{"href":3565,"rel":3566},"https://browserstack.com",[197],"browserstack.com"," - Test di berbagai browser",[115,3570,3572],{"id":3571},"fallback-untuk-old-browsers","Fallback untuk Old Browsers",[290,3574,3576],{"className":1095,"code":3575,"language":1097,"meta":295,"style":295},"/* Fallback untuk IE */\n.grid {\n    display: -ms-grid;  /* IE 10-11 */\n    display: grid;\n}\n\n.flex {\n    display: -webkit-box;  /* Safari */\n    display: flex;\n}\n",[297,3577,3578,3583,3591,3606,3617,3621,3625,3634,3648,3658],{"__ignoreMap":295},[300,3579,3580],{"class":302,"line":303},[300,3581,3582],{"class":851},"/* Fallback untuk IE */\n",[300,3584,3585,3587,3589],{"class":302,"line":321},[300,3586,1241],{"class":306},[300,3588,1399],{"class":857},[300,3590,1114],{"class":306},[300,3592,3593,3595,3597,3600,3603],{"class":302,"line":346},[300,3594,1895],{"class":1197},[300,3596,1092],{"class":306},[300,3598,3599],{"class":423}," -ms-grid",[300,3601,3602],{"class":306},";",[300,3604,3605],{"class":851},"  /* IE 10-11 */\n",[300,3607,3608,3610,3612,3615],{"class":302,"line":356},[300,3609,1895],{"class":1197},[300,3611,1092],{"class":306},[300,3613,3614],{"class":423}," grid",[300,3616,1130],{"class":306},[300,3618,3619],{"class":302,"line":379},[300,3620,1177],{"class":306},[300,3622,3623],{"class":302,"line":412},[300,3624,703],{"emptyLinePlaceholder":702},[300,3626,3627,3629,3632],{"class":302,"line":434},[300,3628,1241],{"class":306},[300,3630,3631],{"class":857},"flex",[300,3633,1114],{"class":306},[300,3635,3636,3638,3640,3643,3645],{"class":302,"line":468},[300,3637,1895],{"class":1197},[300,3639,1092],{"class":306},[300,3641,3642],{"class":423}," -webkit-box",[300,3644,3602],{"class":306},[300,3646,3647],{"class":851},"  /* Safari */\n",[300,3649,3650,3652,3654,3656],{"class":302,"line":477},[300,3651,1895],{"class":1197},[300,3653,1092],{"class":306},[300,3655,2061],{"class":423},[300,3657,1130],{"class":306},[300,3659,3660],{"class":302,"line":487},[300,3661,1177],{"class":306},[110,3663,3665],{"id":3664},"_9-testing","9. Testing",[115,3667,3669],{"id":3668},"manual-testing-checklist","Manual Testing Checklist",[120,3671,3674,3683,3689,3695,3701,3707],{"className":3672},[3673],"contains-task-list",[123,3675,3678,3682],{"className":3676},[3677],"task-list-item",[3679,3680],"input",{"disabled":702,"type":3681},"checkbox"," Tested di Chrome, Firefox, Safari",[123,3684,3686,3688],{"className":3685},[3677],[3679,3687],{"disabled":702,"type":3681}," Responsive design (desktop, tablet, mobile)",[123,3690,3692,3694],{"className":3691},[3677],[3679,3693],{"disabled":702,"type":3681}," Forms berfungsi dengan baik",[123,3696,3698,3700],{"className":3697},[3677],[3679,3699],{"disabled":702,"type":3681}," Links tidak ada yang broken",[123,3702,3704,3706],{"className":3703},[3677],[3679,3705],{"disabled":702,"type":3681}," Images loading dengan baik",[123,3708,3710,3712],{"className":3709},[3677],[3679,3711],{"disabled":702,"type":3681}," No console errors",[115,3714,3716],{"id":3715},"automated-testing","Automated Testing",[290,3718,3720],{"className":842,"code":3719,"language":844,"meta":295,"style":295},"# HTML Validator\nnpm install -g html-validator-cli\nhtml-validator index.html\n\n# Accessibility check\nnpm install -g pa11y-ci\npa11y http://localhost:8000\n",[297,3721,3722,3727,3738,3746,3750,3755,3766],{"__ignoreMap":295},[300,3723,3724],{"class":302,"line":303},[300,3725,3726],{"class":851},"# HTML Validator\n",[300,3728,3729,3731,3733,3735],{"class":302,"line":321},[300,3730,3404],{"class":857},[300,3732,3407],{"class":338},[300,3734,3410],{"class":338},[300,3736,3737],{"class":338}," html-validator-cli\n",[300,3739,3740,3743],{"class":302,"line":346},[300,3741,3742],{"class":857},"html-validator",[300,3744,3745],{"class":338}," index.html\n",[300,3747,3748],{"class":302,"line":356},[300,3749,703],{"emptyLinePlaceholder":702},[300,3751,3752],{"class":302,"line":379},[300,3753,3754],{"class":851},"# Accessibility check\n",[300,3756,3757,3759,3761,3763],{"class":302,"line":412},[300,3758,3404],{"class":857},[300,3760,3407],{"class":338},[300,3762,3410],{"class":338},[300,3764,3765],{"class":338}," pa11y-ci\n",[300,3767,3768,3771],{"class":302,"line":434},[300,3769,3770],{"class":857},"pa11y",[300,3772,3773],{"class":338}," http://localhost:8000\n",[110,3775,3777],{"id":3776},"_10-deployment","10. Deployment",[115,3779,3781],{"id":3780},"deploy-ke-github-pages","Deploy ke GitHub Pages",[290,3783,3785],{"className":842,"code":3784,"language":844,"meta":295,"style":295},"# 1. Create GitHub repo\n# 2. Push HTML files\ngit init\ngit add .\ngit commit -m \"Initial commit\"\ngit branch -M main\ngit remote add origin https://github.com/username/repo.git\ngit push -u origin main\n\n# 3. Enable Pages di GitHub Settings\n# 4. Website live di: https://username.github.io/repo\n",[297,3786,3787,3792,3797,3805,3815,3832,3845,3860,3874,3878,3883],{"__ignoreMap":295},[300,3788,3789],{"class":302,"line":303},[300,3790,3791],{"class":851},"# 1. Create GitHub repo\n",[300,3793,3794],{"class":302,"line":321},[300,3795,3796],{"class":851},"# 2. Push HTML files\n",[300,3798,3799,3802],{"class":302,"line":346},[300,3800,3801],{"class":857},"git",[300,3803,3804],{"class":338}," init\n",[300,3806,3807,3809,3812],{"class":302,"line":356},[300,3808,3801],{"class":857},[300,3810,3811],{"class":338}," add",[300,3813,3814],{"class":338}," .\n",[300,3816,3817,3819,3822,3824,3827,3830],{"class":302,"line":379},[300,3818,3801],{"class":857},[300,3820,3821],{"class":338}," commit",[300,3823,945],{"class":338},[300,3825,3826],{"class":306}," \"",[300,3828,3829],{"class":338},"Initial commit",[300,3831,3185],{"class":306},[300,3833,3834,3836,3839,3842],{"class":302,"line":412},[300,3835,3801],{"class":857},[300,3837,3838],{"class":338}," branch",[300,3840,3841],{"class":338}," -M",[300,3843,3844],{"class":338}," main\n",[300,3846,3847,3849,3852,3854,3857],{"class":302,"line":434},[300,3848,3801],{"class":857},[300,3850,3851],{"class":338}," remote",[300,3853,3811],{"class":338},[300,3855,3856],{"class":338}," origin",[300,3858,3859],{"class":338}," https://github.com/username/repo.git\n",[300,3861,3862,3864,3867,3870,3872],{"class":302,"line":468},[300,3863,3801],{"class":857},[300,3865,3866],{"class":338}," push",[300,3868,3869],{"class":338}," -u",[300,3871,3856],{"class":338},[300,3873,3844],{"class":338},[300,3875,3876],{"class":302,"line":477},[300,3877,703],{"emptyLinePlaceholder":702},[300,3879,3880],{"class":302,"line":487},[300,3881,3882],{"class":851},"# 3. Enable Pages di GitHub Settings\n",[300,3884,3885],{"class":302,"line":497},[300,3886,3887],{"class":851},"# 4. Website live di: https://username.github.io/repo\n",[115,3889,3891],{"id":3890},"deploy-ke-netlify","Deploy ke Netlify",[290,3893,3895],{"className":842,"code":3894,"language":844,"meta":295,"style":295},"# Method 1: Drag & Drop\n# 1. Buka netlify.com\n# 2. Drag folder project ke area upload\n# 3. Selesai!\n\n# Method 2: CLI\nnpm install -g netlify-cli\nnetlify deploy --prod --dir=.\n",[297,3896,3897,3902,3907,3912,3917,3921,3926,3937],{"__ignoreMap":295},[300,3898,3899],{"class":302,"line":303},[300,3900,3901],{"class":851},"# Method 1: Drag & Drop\n",[300,3903,3904],{"class":302,"line":321},[300,3905,3906],{"class":851},"# 1. Buka netlify.com\n",[300,3908,3909],{"class":302,"line":346},[300,3910,3911],{"class":851},"# 2. Drag folder project ke area upload\n",[300,3913,3914],{"class":302,"line":356},[300,3915,3916],{"class":851},"# 3. Selesai!\n",[300,3918,3919],{"class":302,"line":379},[300,3920,703],{"emptyLinePlaceholder":702},[300,3922,3923],{"class":302,"line":412},[300,3924,3925],{"class":851},"# Method 2: CLI\n",[300,3927,3928,3930,3932,3934],{"class":302,"line":434},[300,3929,3404],{"class":857},[300,3931,3407],{"class":338},[300,3933,3410],{"class":338},[300,3935,3936],{"class":338}," netlify-cli\n",[300,3938,3939,3942,3945,3948],{"class":302,"line":468},[300,3940,3941],{"class":857},"netlify",[300,3943,3944],{"class":338}," deploy",[300,3946,3947],{"class":338}," --prod",[300,3949,3950],{"class":338}," --dir=.\n",[115,3952,3954],{"id":3953},"deploy-ke-shared-hosting-cpanel","Deploy ke Shared Hosting (cPanel)",[290,3956,3958],{"className":842,"code":3957,"language":844,"meta":295,"style":295},"# 1. Compress folder\nzip -r website.zip .\n\n# 2. Login ke cPanel\n# 3. File Manager → upload website.zip\n# 4. Extract file\n# 5. Edit index.html jika perlu\n# 6. Website live di: https://domain.com\n",[297,3959,3960,3965,3978,3982,3987,3992,3997,4002],{"__ignoreMap":295},[300,3961,3962],{"class":302,"line":303},[300,3963,3964],{"class":851},"# 1. Compress folder\n",[300,3966,3967,3970,3973,3976],{"class":302,"line":321},[300,3968,3969],{"class":857},"zip",[300,3971,3972],{"class":338}," -r",[300,3974,3975],{"class":338}," website.zip",[300,3977,3814],{"class":338},[300,3979,3980],{"class":302,"line":346},[300,3981,703],{"emptyLinePlaceholder":702},[300,3983,3984],{"class":302,"line":356},[300,3985,3986],{"class":851},"# 2. Login ke cPanel\n",[300,3988,3989],{"class":302,"line":379},[300,3990,3991],{"class":851},"# 3. File Manager → upload website.zip\n",[300,3993,3994],{"class":302,"line":412},[300,3995,3996],{"class":851},"# 4. Extract file\n",[300,3998,3999],{"class":302,"line":434},[300,4000,4001],{"class":851},"# 5. Edit index.html jika perlu\n",[300,4003,4004],{"class":302,"line":468},[300,4005,4006],{"class":851},"# 6. Website live di: https://domain.com\n",[115,4008,4010],{"id":4009},"deploy-ke-vps-dengan-ftp","Deploy ke VPS dengan FTP",[290,4012,4014],{"className":842,"code":4013,"language":844,"meta":295,"style":295},"# Gunakan FileZilla atau WinSCP\n# 1. Koneksi ke server via FTP\n# 2. Upload semua files ke folder public_html\n# 3. Verify permissions (chmod 644 untuk files, 755 untuk folders)\n# 4. Website live\n",[297,4015,4016,4021,4026,4031,4036],{"__ignoreMap":295},[300,4017,4018],{"class":302,"line":303},[300,4019,4020],{"class":851},"# Gunakan FileZilla atau WinSCP\n",[300,4022,4023],{"class":302,"line":321},[300,4024,4025],{"class":851},"# 1. Koneksi ke server via FTP\n",[300,4027,4028],{"class":302,"line":346},[300,4029,4030],{"class":851},"# 2. Upload semua files ke folder public_html\n",[300,4032,4033],{"class":302,"line":356},[300,4034,4035],{"class":851},"# 3. Verify permissions (chmod 644 untuk files, 755 untuk folders)\n",[300,4037,4038],{"class":302,"line":379},[300,4039,4040],{"class":851},"# 4. Website live\n",[115,4042,4044],{"id":4043},"deploy-dengan-vercel-untuk-static-sites","Deploy dengan Vercel (untuk Static Sites)",[290,4046,4048],{"className":842,"code":4047,"language":844,"meta":295,"style":295},"# 1. Install Vercel CLI\nnpm install -g vercel\n\n# 2. Deploy\nvercel\n\n# 3. Website live di: https://[name].vercel.app\n",[297,4049,4050,4055,4066,4070,4075,4080,4084],{"__ignoreMap":295},[300,4051,4052],{"class":302,"line":303},[300,4053,4054],{"class":851},"# 1. Install Vercel CLI\n",[300,4056,4057,4059,4061,4063],{"class":302,"line":321},[300,4058,3404],{"class":857},[300,4060,3407],{"class":338},[300,4062,3410],{"class":338},[300,4064,4065],{"class":338}," vercel\n",[300,4067,4068],{"class":302,"line":346},[300,4069,703],{"emptyLinePlaceholder":702},[300,4071,4072],{"class":302,"line":356},[300,4073,4074],{"class":851},"# 2. Deploy\n",[300,4076,4077],{"class":302,"line":379},[300,4078,4079],{"class":857},"vercel\n",[300,4081,4082],{"class":302,"line":412},[300,4083,703],{"emptyLinePlaceholder":702},[300,4085,4086],{"class":302,"line":434},[300,4087,4088],{"class":851},"# 3. Website live di: https://[name].vercel.app\n",[110,4090,4092],{"id":4091},"_11-maintenance-updates","11. Maintenance & Updates",[115,4094,4096],{"id":4095},"regular-updates","Regular Updates",[290,4098,4100],{"className":842,"code":4099,"language":844,"meta":295,"style":295},"# Keep template updated\n# 1. Check for security updates\n# 2. Update external libraries\n# 3. Test thoroughly before pushing to production\n\n# Use CDN for libraries\n\u003Cscript src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js\">\u003C/script>\n",[297,4101,4102,4107,4112,4117,4122,4126,4131],{"__ignoreMap":295},[300,4103,4104],{"class":302,"line":303},[300,4105,4106],{"class":851},"# Keep template updated\n",[300,4108,4109],{"class":302,"line":321},[300,4110,4111],{"class":851},"# 1. Check for security updates\n",[300,4113,4114],{"class":302,"line":346},[300,4115,4116],{"class":851},"# 2. Update external libraries\n",[300,4118,4119],{"class":302,"line":356},[300,4120,4121],{"class":851},"# 3. Test thoroughly before pushing to production\n",[300,4123,4124],{"class":302,"line":379},[300,4125,703],{"emptyLinePlaceholder":702},[300,4127,4128],{"class":302,"line":412},[300,4129,4130],{"class":851},"# Use CDN for libraries\n",[300,4132,4133,4135,4138,4140,4142,4145,4147,4149,4152],{"class":302,"line":434},[300,4134,324],{"class":306},[300,4136,4137],{"class":423},"script src",[300,4139,332],{"class":306},[300,4141,335],{"class":306},[300,4143,4144],{"class":338},"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js",[300,4146,335],{"class":306},[300,4148,526],{"class":423},[300,4150,4151],{"class":338},"/script",[300,4153,318],{"class":306},[115,4155,4157],{"id":4156},"analytics-monitoring","Analytics & Monitoring",[290,4159,4161],{"className":292,"code":4160,"language":294,"meta":295,"style":295},"\u003C!-- Google Analytics -->\n\u003Cscript async src=\"https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID\">\u003C/script>\n\u003Cscript>\n  window.dataLayer = window.dataLayer || [];\n  function gtag(){dataLayer.push(arguments);}\n  gtag('js', new Date());\n  gtag('config', 'GA_MEASUREMENT_ID');\n\u003C/script>\n",[297,4162,4163,4168,4195,4203,4230,4259,4286,4312],{"__ignoreMap":295},[300,4164,4165],{"class":302,"line":303},[300,4166,4167],{"class":851},"\u003C!-- Google Analytics -->\n",[300,4169,4170,4172,4175,4178,4180,4182,4184,4187,4189,4191,4193],{"class":302,"line":321},[300,4171,324],{"class":306},[300,4173,4174],{"class":310},"script",[300,4176,4177],{"class":314}," async",[300,4179,1015],{"class":314},[300,4181,332],{"class":306},[300,4183,335],{"class":306},[300,4185,4186],{"class":338},"https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID",[300,4188,335],{"class":306},[300,4190,551],{"class":306},[300,4192,4174],{"class":310},[300,4194,318],{"class":306},[300,4196,4197,4199,4201],{"class":302,"line":346},[300,4198,324],{"class":306},[300,4200,4174],{"class":310},[300,4202,318],{"class":306},[300,4204,4205,4208,4210,4213,4215,4218,4220,4222,4225,4228],{"class":302,"line":356},[300,4206,4207],{"class":423},"  window",[300,4209,1241],{"class":306},[300,4211,4212],{"class":423},"dataLayer ",[300,4214,332],{"class":306},[300,4216,4217],{"class":423}," window",[300,4219,1241],{"class":306},[300,4221,4212],{"class":423},[300,4223,4224],{"class":306},"||",[300,4226,4227],{"class":423}," []",[300,4229,1130],{"class":306},[300,4231,4232,4235,4238,4241,4244,4246,4249,4251,4254,4256],{"class":302,"line":379},[300,4233,4234],{"class":314},"  function",[300,4236,4237],{"class":866}," gtag",[300,4239,4240],{"class":306},"(){",[300,4242,4243],{"class":423},"dataLayer",[300,4245,1241],{"class":306},[300,4247,4248],{"class":866},"push",[300,4250,1206],{"class":310},[300,4252,4253],{"class":423},"arguments",[300,4255,1360],{"class":310},[300,4257,4258],{"class":306},";}\n",[300,4260,4261,4264,4266,4268,4271,4273,4275,4278,4281,4284],{"class":302,"line":412},[300,4262,4263],{"class":866},"  gtag",[300,4265,1206],{"class":423},[300,4267,1568],{"class":306},[300,4269,4270],{"class":338},"js",[300,4272,1568],{"class":306},[300,4274,1576],{"class":306},[300,4276,4277],{"class":306}," new",[300,4279,4280],{"class":866}," Date",[300,4282,4283],{"class":423},"())",[300,4285,1130],{"class":306},[300,4287,4288,4290,4292,4294,4297,4299,4301,4303,4306,4308,4310],{"class":302,"line":434},[300,4289,4263],{"class":866},[300,4291,1206],{"class":423},[300,4293,1568],{"class":306},[300,4295,4296],{"class":338},"config",[300,4298,1568],{"class":306},[300,4300,1576],{"class":306},[300,4302,2565],{"class":306},[300,4304,4305],{"class":338},"GA_MEASUREMENT_ID",[300,4307,1568],{"class":306},[300,4309,1360],{"class":423},[300,4311,1130],{"class":306},[300,4313,4314,4316,4318],{"class":302,"line":468},[300,4315,427],{"class":306},[300,4317,4174],{"class":310},[300,4319,318],{"class":306},[110,4321,4323],{"id":4322},"_12-best-practices","12. Best Practices",[106,4325,4326,4327],{},"✅ ",[126,4328,4329],{},"GUNAKAN:",[120,4331,4332,4335,4338,4341,4344,4347],{},[123,4333,4334],{},"Semantic HTML tags",[123,4336,4337],{},"Mobile-first responsive design",[123,4339,4340],{},"External CSS & JS files",[123,4342,4343],{},"Meaningful alt text untuk images",[123,4345,4346],{},"Proper heading hierarchy (H1 → H2 → H3)",[123,4348,4349],{},"CSS classes daripada inline styles",[106,4351,4352,4353],{},"❌ ",[126,4354,4355],{},"HINDARI:",[120,4357,4358,4361,4374,4377,4380,4383],{},[123,4359,4360],{},"Inline styles (gunakan CSS classes)",[123,4362,4363,4364,4367,4368,4367,4371,1360],{},"Deprecated HTML tags (",[297,4365,4366],{},"\u003Cb>",", ",[297,4369,4370],{},"\u003Ci>",[297,4372,4373],{},"\u003Ccenter>",[123,4375,4376],{},"Excessive JavaScript",[123,4378,4379],{},"Large unoptimized images",[123,4381,4382],{},"Broken links",[123,4384,4385],{},"Auto-playing videos/music",[110,4387,4389],{"id":4388},"_13-troubleshooting","13. Troubleshooting",[115,4391,4393],{"id":4392},"css-tidak-loading","CSS tidak loading",[290,4395,4397],{"className":292,"code":4396,"language":294,"meta":295,"style":295},"\u003C!-- Pastikan path benar -->\n\u003Clink rel=\"stylesheet\" href=\"./css/style.css\">\n\n\u003C!-- Check browser console untuk errors -->\n\u003C!-- F12 → Console tab -->\n",[297,4398,4399,4404,4433,4437,4442],{"__ignoreMap":295},[300,4400,4401],{"class":302,"line":303},[300,4402,4403],{"class":851},"\u003C!-- Pastikan path benar -->\n",[300,4405,4406,4408,4410,4412,4414,4416,4418,4420,4422,4424,4426,4429,4431],{"class":302,"line":321},[300,4407,324],{"class":306},[300,4409,439],{"class":310},[300,4411,442],{"class":314},[300,4413,332],{"class":306},[300,4415,335],{"class":306},[300,4417,449],{"class":338},[300,4419,335],{"class":306},[300,4421,454],{"class":314},[300,4423,332],{"class":306},[300,4425,335],{"class":306},[300,4427,4428],{"class":338},"./css/style.css",[300,4430,335],{"class":306},[300,4432,318],{"class":306},[300,4434,4435],{"class":302,"line":346},[300,4436,703],{"emptyLinePlaceholder":702},[300,4438,4439],{"class":302,"line":356},[300,4440,4441],{"class":851},"\u003C!-- Check browser console untuk errors -->\n",[300,4443,4444],{"class":302,"line":379},[300,4445,4446],{"class":851},"\u003C!-- F12 → Console tab -->\n",[115,4448,4450],{"id":4449},"javascript-errors","JavaScript errors",[290,4452,4454],{"className":1544,"code":4453,"language":1546,"meta":295,"style":295},"// Gunakan try-catch untuk error handling\ntry {\n    // code\n} catch (error) {\n    console.error('Error:', error);\n}\n",[297,4455,4456,4461,4468,4473,4485,4512],{"__ignoreMap":295},[300,4457,4458],{"class":302,"line":303},[300,4459,4460],{"class":851},"// Gunakan try-catch untuk error handling\n",[300,4462,4463,4466],{"class":302,"line":321},[300,4464,4465],{"class":1345},"try",[300,4467,1114],{"class":306},[300,4469,4470],{"class":302,"line":346},[300,4471,4472],{"class":851},"    // code\n",[300,4474,4475,4477,4480,4483],{"class":302,"line":356},[300,4476,1716],{"class":306},[300,4478,4479],{"class":1345}," catch",[300,4481,4482],{"class":423}," (error) ",[300,4484,2248],{"class":306},[300,4486,4487,4489,4491,4494,4496,4498,4501,4503,4505,4508,4510],{"class":302,"line":379},[300,4488,2362],{"class":423},[300,4490,1241],{"class":306},[300,4492,4493],{"class":866},"error",[300,4495,1206],{"class":310},[300,4497,1568],{"class":306},[300,4499,4500],{"class":338},"Error:",[300,4502,1568],{"class":306},[300,4504,1576],{"class":306},[300,4506,4507],{"class":423}," error",[300,4509,1360],{"class":310},[300,4511,1130],{"class":306},[300,4513,4514],{"class":302,"line":412},[300,4515,1177],{"class":306},[115,4517,4519],{"id":4518},"responsive-design-tidak-bekerja","Responsive design tidak bekerja",[290,4521,4523],{"className":292,"code":4522,"language":294,"meta":295,"style":295},"\u003C!-- Pastikan viewport meta tag ada -->\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",[297,4524,4525,4530],{"__ignoreMap":295},[300,4526,4527],{"class":302,"line":303},[300,4528,4529],{"class":851},"\u003C!-- Pastikan viewport meta tag ada -->\n",[300,4531,4532,4534,4536,4538,4540,4542,4544,4546,4548,4550,4552,4554,4556],{"class":302,"line":321},[300,4533,324],{"class":306},[300,4535,362],{"class":310},[300,4537,386],{"class":314},[300,4539,332],{"class":306},[300,4541,335],{"class":306},[300,4543,393],{"class":338},[300,4545,335],{"class":306},[300,4547,398],{"class":314},[300,4549,332],{"class":306},[300,4551,335],{"class":306},[300,4553,405],{"class":338},[300,4555,335],{"class":306},[300,4557,318],{"class":306},[4559,4560],"hr",{},[106,4562,4563],{},[126,4564,4565],{},"Resources Berguna:",[120,4567,4568,4575,4582],{},[123,4569,4570],{},[193,4571,4574],{"href":4572,"rel":4573},"https://developer.mozilla.org",[197],"MDN Web Docs",[123,4576,4577],{},[193,4578,4581],{"href":4579,"rel":4580},"https://w3schools.com",[197],"W3Schools",[123,4583,4584],{},[193,4585,4588],{"href":4586,"rel":4587},"https://css-tricks.com",[197],"CSS Tricks",[4590,4591,4592],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":295,"searchDepth":303,"depth":321,"links":4594},[4595,4599,4603,4608,4613,4618,4623,4628,4632,4636,4643,4647,4648],{"id":112,"depth":321,"text":113,"children":4596},[4597,4598],{"id":117,"depth":346,"text":118},{"id":150,"depth":346,"text":151},{"id":176,"depth":321,"text":177,"children":4600},[4601,4602],{"id":180,"depth":346,"text":181},{"id":287,"depth":346,"text":288},{"id":834,"depth":321,"text":835,"children":4604},[4605,4606,4607],{"id":838,"depth":346,"text":839},{"id":890,"depth":346,"text":891},{"id":902,"depth":346,"text":903},{"id":964,"depth":321,"text":965,"children":4609},[4610,4611,4612],{"id":968,"depth":346,"text":969},{"id":1084,"depth":346,"text":1085},{"id":1268,"depth":346,"text":1269},{"id":1536,"depth":321,"text":1537,"children":4614},[4615,4616,4617],{"id":1540,"depth":346,"text":1541},{"id":2074,"depth":346,"text":2075},{"id":2429,"depth":346,"text":2430},{"id":2599,"depth":321,"text":2600,"children":4619},[4620,4621,4622],{"id":2603,"depth":346,"text":2604},{"id":2916,"depth":346,"text":2917},{"id":3134,"depth":346,"text":3135},{"id":3365,"depth":321,"text":3366,"children":4624},[4625,4626,4627],{"id":3369,"depth":346,"text":3370},{"id":3430,"depth":346,"text":3431},{"id":3470,"depth":346,"text":3471},{"id":3545,"depth":321,"text":3546,"children":4629},[4630,4631],{"id":3549,"depth":346,"text":3550},{"id":3571,"depth":346,"text":3572},{"id":3664,"depth":321,"text":3665,"children":4633},[4634,4635],{"id":3668,"depth":346,"text":3669},{"id":3715,"depth":346,"text":3716},{"id":3776,"depth":321,"text":3777,"children":4637},[4638,4639,4640,4641,4642],{"id":3780,"depth":346,"text":3781},{"id":3890,"depth":346,"text":3891},{"id":3953,"depth":346,"text":3954},{"id":4009,"depth":346,"text":4010},{"id":4043,"depth":346,"text":4044},{"id":4091,"depth":321,"text":4092,"children":4644},[4645,4646],{"id":4095,"depth":346,"text":4096},{"id":4156,"depth":346,"text":4157},{"id":4322,"depth":321,"text":4323},{"id":4388,"depth":321,"text":4389,"children":4649},[4650,4651,4652],{"id":4392,"depth":346,"text":4393},{"id":4449,"depth":346,"text":4450},{"id":4518,"depth":346,"text":4519},"Tutorial lengkap setup HTML dan CSS dari download template, struktur folder, customization, hingga deployment website statis","md",null,{},{"icon":60},{"title":57,"description":4653},"Ozzlk-pHsY2E_fGGqE3j87QfSLEOcd9Q6M039yVpUPs",[4661,4663],{"title":49,"path":50,"stem":54,"description":4662,"icon":55,"children":-1},"Koleksi template dokumentasi yang bisa digunakan sebagai dasar untuk produk digital",{"title":62,"path":63,"stem":64,"description":4664,"icon":60,"children":-1},"Tutorial lengkap setup Laravel dari download template, instalasi dependencies, database, hingga deployment ke server",1763121030926]