Februari 2025 ~ GitLab OZX Craft

FREE FRONTED

Februari 22, 2025No comments

Cara Memulai Website Seperti FreeFrontend.com

Website seperti FreeFrontend.com adalah situs kumpulan snippet frontend (CSS, HTML, JavaScript) yang menyediakan berbagai elemen UI siap pakai. Jika Anda ingin membuat website serupa, berikut adalah langkah-langkah sistematis untuk memulai:

1. Tentukan Konsep dan Fokus Website

Sebelum mulai coding, tentukan dulu niche utama:
✅ Apakah khusus loader animations?
✅ Atau lebih luas, seperti hover effects, navigasi, tombol, dll?
✅ Apakah akan ada kontribusi dari pengguna?

🔹 Contoh Fokus:

Simple Snippet Hub: Kumpulan snippet sederhana (loader, navigasi, efek hover).
Advanced Components: Komponen UI yang lebih kompleks (modals, cards, tabel interaktif).

Saran: Mulai dengan kategori kecil dulu, misalnya "Loader Animations", lalu kembangkan.

2. Pilih Teknologi yang Digunakan

Website seperti FreeFrontend bisa dibangun dengan beberapa stack teknologi.

🔹 Stack Minimal untuk Memulai

✅ Frontend:

HTML + CSS + Tailwind CSS / Bootstrap (untuk tampilan cepat)
JavaScript (untuk interaktivitas sederhana)
Highlight.js (menampilkan kode dengan warna syntax highlight)

✅ Backend (Opsional jika ingin pengguna bisa mengunggah kode)

PHP + MySQL (untuk menyimpan kode pengguna)
Node.js + Express + MongoDB (untuk sistem API lebih modern)

✅ Static Site Generator (Opsional)

Hugo / Jekyll / Eleventy (untuk situs statis tanpa backend)

3. Struktur Halaman Website

Contoh Struktur Halaman:

Home Page: Daftar snippet terbaru.
Category Page: Halaman berdasarkan kategori (misalnya: Loader, Button, Hover).
Detail Page: Setiap snippet punya halaman sendiri + kode siap copy-paste.

Struktur Direktori:

bash
/public
   /css
   /js
   /images
   index.html
   categories.html
   snippet.html

4. Mulai Koding Halaman Dasar

Berikut contoh layout dasar untuk halaman utama menggunakan HTML + Tailwind CSS:

📌 index.html (Homepage)

html
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Free Snippets</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-900">

    <header class="bg-blue-600 text-white p-5 text-center text-2xl font-bold">
        Free Snippets - Kumpulan Efek CSS & JavaScript
    </header>

    <main class="p-5 grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Snippet 1 -->
        <div class="bg-white p-4 shadow rounded">
            <h2 class="text-lg font-semibold">CSS Loader #1</h2>
            <div class="flex justify-center p-4">
                <svg width="50" height="50" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="5" fill="none" stroke-linecap="round">
                        <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1s" repeatCount="indefinite"/>
                    </circle>
                </svg>
            </div>
            <pre class="bg-gray-200 p-2 text-sm rounded"><code>&lt;svg&gt;...</code></pre>
        </div>

        <!-- Snippet 2 -->
        <div class="bg-white p-4 shadow rounded">
            <h2 class="text-lg font-semibold">CSS Loader #2</h2>
            <div class="flex justify-center p-4">
                <div class="w-10 h-10 border-4 border-blue-500 border-dashed rounded-full animate-spin"></div>
            </div>
            <pre class="bg-gray-200 p-2 text-sm rounded"><code>.animate-spin {...}</code></pre>
        </div>

    </main>

</body>
</html>

📌 Penjelasan:
✅ Menggunakan Tailwind CSS agar cepat styling tanpa banyak CSS manual.
✅ Grid Layout untuk menampilkan snippet dalam kolom.
✅ Menampilkan snippet + kode siap copy dalam <pre> + <code>.

5. Tambahkan Highlighting untuk Kode

Agar tampilan kode lebih menarik, gunakan Highlight.js:

Tambahkan ini sebelum </body>:

html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

6. Buat Sistem Kategori dan Filter (Opsional)

Untuk memudahkan pengguna menemukan snippet berdasarkan kategori:

html
<select id="filterCategory">
    <option value="all">Semua</option>
    <option value="loader">Loader</option>
    <option value="button">Button</option>
</select>
<script>
document.getElementById('filterCategory').addEventListener('change', function() {
    let category = this.value;
    document.querySelectorAll('.snippet').forEach(snippet => {
        snippet.style.display = (category === 'all' || snippet.classList.contains(category)) ? 'block' : 'none';
    });
});
</script>

Pengguna bisa memilih kategori tertentu tanpa harus reload halaman.

7. Hosting Website

Setelah jadi, website bisa diunggah ke hosting gratis seperti:
🔹 GitHub Pages (gratis, cocok untuk situs statis)
🔹 Netlify (statis + bisa pakai backend ringan)
🔹 Vercel (bisa untuk Next.js jika ingin lebih kompleks)

Jika ingin fitur user upload snippet, perlu hosting dengan backend seperti 000WebHost, InfinityFree, atau VPS murah.

8. Monetisasi (Opsional)

Jika ingin mendapatkan penghasilan dari website seperti FreeFrontend:
💰 Google AdSense (iklan di halaman)
💰 Affiliate (Codecanyon, Themeforest, atau Udemy)
💰 Premium Snippets (Menjual snippet eksklusif)
💰 Donasi Patreon atau BuyMeACoffee

Kesimpulan

🚀 Cara Membuat Website Seperti FreeFrontend.com:
✅ Tentukan kategori utama (loader, navbar, efek hover, dll)
✅ Gunakan HTML, CSS (Tailwind), dan JavaScript sederhana
✅ Buat layout responsif dengan Grid atau Flexbox
✅ Gunakan Highlight.js untuk kode snippet
✅ Gunakan hosting gratis (GitHub Pages, Netlify, Vercel)

Jika Anda serius mengembangkan website ini, kita bisa buatkan backendnya dengan Laravel atau Node.js di tahap berikutnya.

LOADER

Februari 21, 2025No comments

Berikut beberapa contoh situs yang menyediakan contoh loader:

CodePen: CodePen adalah platform yang memungkinkan Anda membuat, menampilkan, dan berbagi contoh kode HTML, CSS, dan JavaScript. Anda dapat menemukan banyak contoh loader yang dapat Anda gunakan secara gratis.

W3Schools: W3Schools adalah situs yang menyediakan tutorial, contoh kode, dan referensi untuk pengembangan web. Mereka memiliki halaman yang khusus membahas tentang loader.

CSS-Tricks: CSS-Tricks adalah situs yang menyediakan tutorial, contoh kode, dan artikel tentang pengembangan web, khususnya tentang CSS. Mereka memiliki beberapa contoh loader yang dapat Anda gunakan.

(link unavailable): (link unavailable) adalah situs yang menyediakan contoh loader yang dapat Anda gunakan secara gratis. Mereka memiliki banyak pilihan loader yang dapat Anda sesuaikan dengan kebutuhan Anda.

Anda dapat mengunjungi situs-situs tersebut untuk menemukan contoh loader yang sesuai dengan kebutuhan Anda.

VALIDATOR

Februari 19, 2025No comments

https://validator.w3.org/

HIDDEN ELEMEN

Februari 19, 2025No comments

Kalau ingin menyembunyikan elemen tetapi tetap berfungsi, ada beberapa cara di CSS, tergantung kebutuhan:

1️⃣ Menggunakan visibility: hidden;

Elemen tetap ada di layout, hanya tidak terlihat.

Masih bisa diklik jika posisinya memungkinkan.

css

Salin

Edit

.hidden {

visibility: hidden;

}

2️⃣ Menggunakan opacity: 0;

Elemen tetap ada dan masih bisa diklik.

css

Salin

Edit

.hidden {

opacity: 0;

}

3️⃣ Menggunakan display: none;

Elemen hilang sepenuhnya dari layout (tidak bisa diklik).

css

Salin

Edit

.hidden {

display: none;

}

4️⃣ Memindahkan elemen keluar layar

Elemen tetap ada, tetapi tidak terlihat di layar.

css

Salin

Edit

.hidden {

position: absolute;

left: -9999px;

}

Kalau sebelumnya kamu menyimpan kode di proyek Laravel atau Blogger, coba cari file CSS utama atau gunakan DevTools (Inspect Element - F12) untuk menemukannya.

NYOBAIN AJA

Februari 19, 2025No comments

Document

Tombol dengan Ikon: Kamu bisa menambahkan ikon ke dalam tombol menggunakan elemen atau SVG agar lebih menarik. Smooth Scroll (JavaScript): Jika tombol digunakan untuk navigasi ke bagian lain dalam halaman, kamu bisa menambahkan efek smooth scroll.

SYNTAX CSS

Februari 19, 2025No comments

Kesimpulan
Kelas (.content) → digunakan dengan class="content", bisa dipakai untuk banyak elemen.
ID (#content) → digunakan dengan id="content", harus unik dalam satu halaman.
Tanpa titik (content) → hanya untuk elemen HTML bawaan seperti <body>, <h1>, <p>, dll.

#content (dengan #) → Selektor ID (ID selector)
👉 Digunakan untuk menargetkan elemen dengan atribut id="content".

<div id="content">Ini teks biru</div>

#content {
color: blue;
}

.content (dengan titik) → Selektor kelas (class selector)
👉 Digunakan untuk menargetkan elemen yang memiliki atribut class="content".

<div class="content">Ini teks merah</div>

.content {
color: red;
}

content (tanpa titik) → Nama elemen (tag HTML)
👉 Digunakan untuk menargetkan elemen HTML langsung.

content {
color: red;
}

❌ Salah, karena content bukan elemen HTML yang valid.

GitLab OZX Craft

This is default featured slide 1 title

This is default featured slide 2 title

This is default featured slide 3 title

This is default featured slide 4 title

This is default featured slide 5 title

Entri yang Diunggulkan

DAUR ULANG SAMPAH DIGITAL

BELAJAR PROGRAMMING CARA MUDAH DAN CEPAT

FREE FRONTED

Cara Memulai Website Seperti FreeFrontend.com

1. Tentukan Konsep dan Fokus Website

2. Pilih Teknologi yang Digunakan

🔹 Stack Minimal untuk Memulai

3. Struktur Halaman Website

4. Mulai Koding Halaman Dasar

📌 index.html (Homepage)

5. Tambahkan Highlighting untuk Kode

6. Buat Sistem Kategori dan Filter (Opsional)

7. Hosting Website

8. Monetisasi (Opsional)

Kesimpulan

LOADER

VALIDATOR

HIDDEN ELEMEN

NYOBAIN AJA

SYNTAX CSS

Kesimpulan

Postingan Populer

SYNTAX HIGHLIGHTER

Halaman

Translate

Label

Mengenai Saya

Label

Arsip Blog

Total Tayangan Halaman

Pengikut

BLOGGER ITU HEBAT

Entri yang Diunggulkan

BELAJAR PROGRAMMING CARA MUDAH DAN CEPAT

Cara Memulai Website Seperti FreeFrontend.com

1. Tentukan Konsep dan Fokus Website

2. Pilih Teknologi yang Digunakan

🔹 Stack Minimal untuk Memulai

3. Struktur Halaman Website

4. Mulai Koding Halaman Dasar

📌 index.html (Homepage)

5. Tambahkan Highlighting untuk Kode

6. Buat Sistem Kategori dan Filter (Opsional)

7. Hosting Website

8. Monetisasi (Opsional)

Kesimpulan

Kesimpulan

Postingan Populer

SYNTAX HIGHLIGHTER

Halaman

Translate

Label

Mengenai Saya

Label

Arsip Blog

Total Tayangan Halaman

Pengikut

Langganan

BLOGGER ITU HEBAT