screenshot.png
✨ The Prompt Phrase
screenshot.png // wordpress theme
💻 Code Preview
📦 All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>screenshot.png - Interactive Tutorial</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: #0a0e27;
--bg-secondary: #151a35;
--bg-card: #1e2542;
--accent-purple: #a855f7;
--accent-blue: #3b82f6;
--accent-green: #10b981;
--accent-cyan: #06b6d4;
--accent-pink: #ec4899;
--accent-orange: #f59e0b;
--text-primary: #f0f6fc;
--text-secondary: #c9d1d9;
--text-muted: #8b949e;
--border-color: #30363d;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Poppins', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px);
animation: moveBackground 20s linear infinite;
}
@keyframes moveBackground {
0% { transform: translate(0, 0); }
100% { transform: translate(50px, 50px); }
}
.hero-content {
text-align: center;
z-index: 1;
animation: fadeInUp 1s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero h1 {
font-size: 4rem;
font-weight: 800;
margin-bottom: 20px;
text-shadow: 0 0 40px rgba(0,0,0,0.3);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.hero .code-highlight {
background: rgba(0,0,0,0.5);
padding: 20px 50px;
border-radius: 20px;
font-family: 'Fira Code', monospace;
display: inline-block;
backdrop-filter: blur(10px);
border: 3px solid rgba(255,255,255,0.3);
font-size: 2.5rem;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
margin: 20px 0;
}
.hero p {
font-size: 1.5rem;
margin-top: 20px;
opacity: 0.95;
font-weight: 300;
}
.scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
animation: bounce 2s infinite;
font-size: 2.5rem;
cursor: pointer;
filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
40% { transform: translateX(-50%) translateY(-15px); }
60% { transform: translateX(-50%) translateY(-7px); }
}
/* Progress Bar */
.progress-bar {
position: fixed;
top: 0;
left: 0;
height: 5px;
background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue), var(--accent-green));
z-index: 1000;
transition: width 0.3s ease;
box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
}
/* Section Styles */
section {
padding: 80px 0;
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
section.visible {
opacity: 1;
transform: translateY(0);
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-header h2 {
font-size: 3rem;
background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 15px;
font-weight: 800;
}
.section-header p {
color: var(--text-secondary);
font-size: 1.2rem;
}
/* Card Styles */
.card {
background: var(--bg-card);
border-radius: 20px;
padding: 40px;
margin-bottom: 30px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
transform: scaleX(0);
transition: transform 0.3s ease;
}
.card:hover::before {
transform: scaleX(1);
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border-color: var(--accent-purple);
}
.card h3 {
font-size: 1.8rem;
margin-bottom: 20px;
color: var(--accent-purple);
font-weight: 700;
}
.card h4 {
font-size: 1.3rem;
margin-bottom: 10px;
color: var(--accent-cyan);
font-weight: 600;
}
.card ul {
margin-left: 20px;
margin-top: 10px;
}
.card li {
margin-bottom: 10px;
line-height: 1.8;
}
/* Code Block */
.code-block {
background: #0d1117;
border-radius: 15px;
padding: 25px;
margin: 20px 0;
position: relative;
font-family: 'Fira Code', monospace;
overflow-x: auto;
border: 1px solid var(--border-color);
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.code-block .copy-btn {
position: absolute;
top: 15px;
right: 15px;
background: var(--accent-purple);
color: white;
border: none;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
.code-block .copy-btn:hover {
background: var(--accent-pink);
transform: scale(1.05);
}
.code-block pre {
margin: 0;
color: #e6edf3;
font-size: 0.95rem;
line-height: 1.6;
}
/* Grid Layout */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin: 40px 0;
}
.grid-item {
background: var(--bg-card);
padding: 30px;
border-radius: 15px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.grid-item:hover {
border-color: var(--accent-purple);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(168, 85, 247, 0.3);
}
.grid-item .icon {
font-size: 3rem;
margin-bottom: 15px;
display: block;
}
/* Tabs */
.tabs {
display: flex;
gap: 10px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.tab-btn {
background: var(--bg-secondary);
color: var(--text-secondary);
border: 1px solid var(--border-color);
padding: 12px 24px;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1rem;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
.tab-btn:hover {
border-color: var(--accent-purple);
transform: translateY(-2px);
}
.tab-btn.active {
background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
color: white;
border-color: transparent;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Quiz Styles */
.quiz-question {
background: var(--bg-card);
padding: 30px;
border-radius: 15px;
margin-bottom: 20px;
border: 1px solid var(--border-color);
}
.quiz-options {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 20px;
}
.quiz-option {
background: var(--bg-secondary);
padding: 15px 20px;
border-radius: 10px;
border: 2px solid var(--border-color);
cursor: pointer;
transition: all 0.3s ease;
}
.quiz-option:hover {
border-color: var(--accent-purple);
transform: translateX(5px);
}
.quiz-option.correct {
border-color: var(--accent-green);
background: rgba(16, 185, 129, 0.1);
}
.quiz-option.incorrect {
border-color: #ef4444;
background: rgba(239, 68, 68, 0.1);
}
.quiz-feedback {
margin-top: 20px;
padding: 15px;
border-radius: 10px;
display: none;
}
.quiz-feedback.show {
display: block;
animation: fadeIn 0.5s ease;
}
.quiz-feedback.correct {
background: rgba(16, 185, 129, 0.1);
border: 1px solid var(--accent-green);
color: var(--accent-green);
}
.quiz-feedback.incorrect {
background: rgba(239, 68, 68, 0.1);
border: 1px solid #ef4444;
color: #ef4444;
}
/* Summary Card */
.summary-card {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(6, 182, 212, 0.1));
border: 2px solid var(--accent-purple);
border-radius: 20px;
padding: 40px;
margin: 40px 0;
}
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}
.summary-item {
background: var(--bg-card);
padding: 20px;
border-radius: 10px;
border-left: 4px solid var(--accent-purple);
}
.summary-item strong {
color: var(--accent-purple);
display: block;
margin-bottom: 10px;
font-weight: 700;
}
/* Footer */
footer {
background: var(--bg-secondary);
padding: 40px 20px;
text-align: center;
border-top: 1px solid var(--border-color);
}
footer p {
color: var(--text-muted);
}
.badge {
display: inline-block;
background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
margin: 5px;
font-weight: 600;
}
/* Warning/Info Boxes */
.warning-box {
background: rgba(239, 68, 68, 0.1);
border-left: 4px solid #ef4444;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.success-box {
background: rgba(16, 185, 129, 0.1);
border-left: 4px solid var(--accent-green);
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.info-box {
background: rgba(59, 130, 246, 0.1);
border-left: 4px solid var(--accent-blue);
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
/* Confetti */
.confetti {
position: fixed;
width: 10px;
height: 10px;
animation: confetti-fall 3s linear forwards;
pointer-events: none;
}
@keyframes confetti-fall {
to {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
/* Demo Box */
.demo-box {
background: var(--bg-secondary);
border: 2px solid var(--accent-purple);
border-radius: 15px;
padding: 30px;
margin: 20px 0;
}
.demo-button {
background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
color: white;
border: none;
padding: 12px 30px;
border-radius: 10px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
margin: 10px;
}
.demo-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(168, 85, 247, 0.3);
}
.demo-output {
background: #0d1117;
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 20px;
margin-top: 20px;
min-height: 100px;
font-family: 'Fira Code', monospace;
}
#quiz-complete {
text-align: center;
padding: 40px;
background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(6, 182, 212, 0.2));
border-radius: 20px;
border: 2px solid var(--accent-purple);
margin-top: 30px;
display: none;
}
/* Screenshot Preview */
.screenshot-preview {
background: var(--bg-secondary);
border: 3px dashed var(--accent-purple);
border-radius: 15px;
padding: 40px;
text-align: center;
margin: 20px 0;
position: relative;
overflow: hidden;
}
.screenshot-preview::before {
content: '📸';
font-size: 5rem;
opacity: 0.2;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.screenshot-mockup {
background: white;
border-radius: 10px;
padding: 20px;
max-width: 600px;
margin: 0 auto;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
position: relative;
z-index: 1;
}
.screenshot-mockup img {
width: 100%;
border-radius: 5px;
}
/* Specs Table */
.specs-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.specs-table th,
.specs-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
.specs-table th {
background: var(--bg-secondary);
color: var(--accent-purple);
font-weight: 600;
}
.specs-table tr:hover {
background: rgba(168, 85, 247, 0.05);
}
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero .code-highlight {
font-size: 1.5rem;
padding: 15px 30px;
}
.hero p {
font-size: 1.2rem;
}
.section-header h2 {
font-size: 2rem;
}
.grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="progress-bar" id="progressBar"></div>
<!-- Hero Section -->
<section class="hero" id="hero">
<div class="hero-content">
<h1>📸 WordPress Theme Screenshot</h1>
<div class="code-highlight">screenshot.png</div>
<p>Your Theme's Visual Identity</p>
</div>
<div class="scroll-indicator" onclick="document.getElementById('what-is-it').scrollIntoView({behavior: 'smooth'})">
⬇️
</div>
</section>
<!-- What Is It Section -->
<section id="what-is-it">
<div class="container">
<div class="section-header">
<h2>🤔 What Is screenshot.png?</h2>
<p>The thumbnail image that represents your WordPress theme</p>
</div>
<div class="card">
<h3>📖 The Simple Definition</h3>
<p><strong>screenshot.png</strong> is an image file that lives in your WordPress theme folder. It's the preview image that appears in the WordPress admin when you're browsing themes. Think of it as your theme's "profile picture"!</p>
<div class="info-box">
<strong>🎯 Think of it like this:</strong>
<p>Imagine you're shopping online. Every product has a thumbnail image so you can see what it looks like before clicking. <code>screenshot.png</code> is exactly that for WordPress themes—it's the thumbnail that shows up in Appearance → Themes, helping users identify and select your theme!</p>
</div>
<div class="grid">
<div class="grid-item">
<span class="icon">🖼️</span>
<h4>What It Is</h4>
<p>A PNG image file in your theme folder</p>
</div>
<div class="grid-item">
<span class="icon">📍</span>
<h4>Location</h4>
<p>wp-content/themes/your-theme/</p>
</div>
<div class="grid-item">
<span class="icon">📐</span>
<h4>Size</h4>
<p>1200×900 pixels (4:3 ratio)</p>
</div>
</div>
</div>
<div class="card">
<h3>📋 Technical Specifications</h3>
<table class="specs-table">
<thead>
<tr>
<th>Property</th>
<th>Requirement</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>File Name</strong></td>
<td>screenshot.png</td>
<td>Exact name, lowercase</td>
</tr>
<tr>
<td><strong>Format</strong></td>
<td>PNG (preferred) or JPG</td>
<td>PNG recommended for quality</td>
</tr>
<tr>
<td><strong>Dimensions</strong></td>
<td>1200×900 pixels</td>
<td>4:3 aspect ratio</td>
</tr>
<tr>
<td><strong>File Size</strong></td>
<td>Under 1MB</td>
<td>Smaller is better for performance</td>
</tr>
<tr>
<td><strong>Location</strong></td>
<td>Theme root directory</td>
<td>Same level as style.css</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Why Use It Section -->
<section id="why-use-it">
<div class="container">
<div class="section-header">
<h2>💡 Why Is screenshot.png Important?</h2>
<p>More than just a pretty picture!</p>
</div>
<div class="grid">
<div class="card">
<h3>👁️ Visual Recognition</h3>
<p>Users can instantly identify your theme among dozens of others in the theme selector!</p>
</div>
<div class="card">
<h3>🎨 First Impression</h3>
<p>It's the first thing people see—make it count! A good screenshot sells your theme!</p>
</div>
<div class="card">
<h3>📱 Theme Preview</h3>
<p>Shows what your theme looks like without activating it. No surprises!</p>
</div>
<div class="card">
<h3>🏪 WordPress.org Requirement</h3>
<p>Required for themes submitted to the official WordPress theme directory!</p>
</div>
<div class="card">
<h3>🔍 Easy Navigation</h3>
<p>Helps users quickly browse and compare themes visually!</p>
</div>
<div class="card">
<h3>💼 Professional Look</h3>
<p>Shows you care about details and presentation. Quality matters!</p>
</div>
</div>
</div>
</section>
<!-- How It Works Section -->
<section id="how-it-works">
<div class="container">
<div class="section-header">
<h2>⚙️ How Does It Work?</h2>
<p>Understanding the screenshot file</p>
</div>
<div class="card">
<h3>📁 File Structure</h3>
<div class="code-block">
<button class="copy-btn" onclick="copyCode(this)">📋 Copy</button>
<pre><code>wp-content/
└── themes/
└── your-theme/
├── style.css
├── index.php
├── functions.php
└── screenshot.png ← HERE!</code></pre>
</div>
<div class="success-box">
<strong>✅ Key Points:</strong>
<ul>
<li>Must be in the theme's root directory</li>
<li>Same level as style.css</li>
<li>WordPress automatically detects it</li>
<li>No code needed—just place the file!</li>
</ul>
</div>
</div>
<div class="card">
<h3>🎨 What Should the Screenshot Show?</h3>
<div class="screenshot-preview">
<div class="screenshot-mockup">
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; color: white; border-radius: 5px;">
<h2 style="margin: 0; font-size: 2rem;">Your Theme Name</h2>
<p style="margin: 10px 0 0 0; opacity: 0.9;">Homepage preview showing key design elements</p>
</div>
</div>
</div>
<div class="info-box">
<strong>💡 Best Practices:</strong>
<ul>
<li><strong>Show the homepage:</strong> Most representative view</li>
<li><strong>Include branding:</strong> Theme name/logo visible</li>
<li><strong>Highlight features:</strong> Show unique design elements</li>
<li><strong>Clean & clear:</strong> Not too cluttered</li>
<li><strong>High quality:</strong> Sharp, professional image</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Live Demo Section -->
<section id="live-demo">
<div class="container">
<div class="section-header">
<h2>🎮 Interactive Examples</h2>
<p>See different screenshot styles!</p>
</div>
<div class="card">
<h3>🎯 Screenshot Styles</h3>
<p>Click to see different approaches:</p>
<div class="demo-box">
<button class="demo-button" onclick="showScreenshotStyle('homepage')">🏠 Homepage View</button>
<button class="demo-button" onclick="showScreenshotStyle('mockup')">💻 Device Mockup</button>
<button class="demo-button" onclick="showScreenshotStyle('features')">✨ Feature Showcase</button>
<button class="demo-button" onclick="showScreenshotStyle('minimal')">🎨 Minimal Design</button>
<div class="demo-output" id="screenshotOutput">
<p style="color: var(--text-muted);">👆 Click a button to explore!</p>
</div>
</div>
</div>
<div class="card">
<div class="tabs">
<button class="tab-btn active" onclick="switchTab(event, 'create')">Create</button>
<button class="tab-btn" onclick="switchTab(event, 'optimize')">Optimize</button>
<button class="tab-btn" onclick="switchTab(event, 'tools')">Tools</button>
</div>
<div id="create" class="tab-content active">
<h4>🎨 How to Create screenshot.png</h4>
<div class="info-box">
<strong>Method 1: Take a Screenshot</strong>
<ol>
<li>Open your theme in a browser</li>
<li>Set browser to 1200px width</li>
<li>Take a screenshot of the homepage</li>
<li>Crop to 1200×900 pixels</li>
<li>Save as screenshot.png</li>
</ol>
</div>
<div class="info-box">
<strong>Method 2: Design in Graphics Software</strong>
<ol>
<li>Open Photoshop/Figma/Canva</li>
<li>Create 1200×900px canvas</li>
<li>Design a mockup of your theme</li>
<li>Export as PNG</li>
<li>Name it screenshot.png</li>
</ol>
</div>
</div>
<div id="optimize" class="tab-content">
<h4>⚡ Optimization Tips</h4>
<div class="code-block">
<button class="copy-btn" onclick="copyCode(this)">📋 Copy</button>
<pre><code># Optimize with ImageMagick
convert screenshot.png -resize 1200x900 -quality 85 screenshot.png
# Or use online tools:
# - TinyPNG.com
# - Squoosh.app
# - ImageOptim (Mac)</code></pre>
</div>
<div class="success-box">
<strong>✅ Optimization Checklist:</strong>
<ul>
<li>Compress without losing quality</li>
<li>Keep file size under 500KB ideally</li>
<li>Use PNG-8 if possible (fewer colors)</li>
<li>Remove metadata</li>
<li>Test on retina displays</li>
</ul>
</div>
</div>
<div id="tools" class="tab-content">
<h4>🛠️ Recommended Tools</h4>
<div class="grid">
<div class="grid-item">
<h4>📸 Screenshot Tools</h4>
<ul>
<li>Awesome Screenshot</li>
<li>Nimbus Screenshot</li>
<li>Snagit</li>
<li>Browser DevTools</li>
</ul>
</div>
<div class="grid-item">
<h4>🎨 Design Tools</h4>
<ul>
<li>Figma (free)</li>
<li>Canva (free)</li>
<li>Photoshop</li>
<li>GIMP (free)</li>
</ul>
</div>
<div class="grid-item">
<h4>⚡ Optimization</h4>
<ul>
<li>TinyPNG</li>
<li>Squoosh</li>
<li>ImageOptim</li>
<li>Compressor.io</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Common Mistakes Section -->
<section id="common-mistakes">
<div class="container">
<div class="section-header">
<h2>⚠️ Common Mistakes</h2>
<p>Avoid these screenshot.png pitfalls!</p>
</div>
<div class="card">
<div class="warning-box">
<h3>❌ Mistake #1: Wrong File Name</h3>
<ul>
<li>❌ Screenshot.png (capital S)</li>
<li>❌ screen-shot.png (hyphen)</li>
<li>❌ screenshot.jpg (wrong format)</li>
<li>❌ theme-preview.png (wrong name)</li>
<li>✅ <strong>screenshot.png</strong> (exact, lowercase)</li>
</ul>
</div>
<div class="warning-box">
<h3>❌ Mistake #2: Wrong Dimensions</h3>
<p>WordPress expects 1200×900 pixels (4:3 ratio)</p>
<ul>
<li>❌ 800×600 (too small)</li>
<li>❌ 1920×1080 (wrong ratio)</li>
<li>❌ 1200×1200 (square, not 4:3)</li>
<li>✅ <strong>1200×900 pixels</strong></li>
</ul>
</div>
<div class="warning-box">
<h3>❌ Mistake #3: Poor Quality</h3>
<ul>
<li>❌ Blurry or pixelated image</li>
<li>❌ Screenshot of error pages</li>
<li>❌ Lorem ipsum placeholder text</li>
<li>❌ Broken images or layout</li>
<li>✅ <strong>High-quality, polished preview</strong></li>
</ul>
</div>
<div class="warning-box">
<h3>❌ Mistake #4: Wrong Location</h3>
<div class="code-block">
<pre><code>// WRONG locations:
themes/your-theme/images/screenshot.png
themes/your-theme/assets/screenshot.png
themes/your-theme/css/screenshot.png
// CORRECT location:
themes/your-theme/screenshot.png</code></pre>
</div>
</div>
<div class="warning-box">
<h3>❌ Mistake #5: File Too Large</h3>
<ul>
<li>❌ 5MB+ file size (slow loading)</li>
<li>❌ Unoptimized PNG with transparency</li>
<li>✅ <strong>Under 1MB, ideally 300-500KB</strong></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Pro Tips Section -->
<section id="pro-tips">
<div class="container">
<div class="section-header">
<h2>🌟 Pro Tips</h2>
<p>Level up your screenshot game!</p>
</div>
<div class="grid">
<div class="card">
<h3>💡 Tip #1: Show Real Content</h3>
<p>Use actual content instead of Lorem Ipsum. Makes it more relatable and professional!</p>
</div>
<div class="card">
<h3>🎨 Tip #2: Highlight Unique Features</h3>
<p>Show what makes your theme special—custom layouts, unique colors, special widgets!</p>
</div>
<div class="card">
<h3>📱 Tip #3: Consider Mobile View</h3>
<p>Some themes show a split view—desktop and mobile side by side!</p>
</div>
<div class="card">
<h3>✨ Tip #4: Keep It Clean</h3>
<p>Don't overcrowd. Show enough to be interesting, not overwhelming!</p>
</div>
<div class="card">
<h3>🎯 Tip #5: Brand Visibility</h3>
<p>Make sure your theme name or logo is visible in the screenshot!</p>
</div>
<div class="card">
<h3>🔄 Tip #6: Update Regularly</h3>
<p>When you redesign your theme, update the screenshot too!</p>
</div>
</div>
</div>
</section>
<!-- Quiz Section -->
<section id="quiz">
<div class="container">
<div class="section-header">
<h2>🎯 Test Your Knowledge!</h2>
<p>Time to prove you're a screenshot.png master!</p>
</div>
<div class="quiz-question">
<h3>Question 1: What are the correct dimensions for screenshot.png?</h3>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
A) 800×600 pixels
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 1)">
B) 1200×900 pixels
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
C) 1920×1080 pixels
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
D) 1000×1000 pixels
</div>
</div>
<div class="quiz-feedback" id="feedback1"></div>
</div>
<div class="quiz-question">
<h3>Question 2: Where should screenshot.png be located?</h3>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
A) In the images folder
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 2)">
B) In the theme root directory
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
C) In the assets folder
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
D) In the CSS folder
</div>
</div>
<div class="quiz-feedback" id="feedback2"></div>
</div>
<div class="quiz-question">
<h3>Question 3: What file format is preferred for screenshot?</h3>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
A) GIF
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
B) BMP
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 3)">
C) PNG
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
D) SVG
</div>
</div>
<div class="quiz-feedback" id="feedback3"></div>
</div>
<div id="quiz-complete">
<h2 style="font-size: 3rem;">🎉 Congratulations!</h2>
<p style="font-size: 1.5rem; margin-top: 20px;">You're now a screenshot.png expert!</p>
<div class="badge">WordPress Master</div>
<div class="badge">Theme Developer</div>
<div class="badge">Screenshot Pro</div>
</div>
</div>
</section>
<!-- Summary Section -->
<section id="summary">
<div class="container">
<div class="section-header">
<h2>📚 Quick Reference</h2>
<p>Your screenshot.png cheat sheet</p>
</div>
<div class="summary-card">
<h3>🎯 screenshot.png Essentials</h3>
<div class="summary-grid">
<div class="summary-item">
<strong>✅ File Name</strong>
<p>screenshot.png (exact, lowercase)</p>
</div>
<div class="summary-item">
<strong>✅ Dimensions</strong>
<p>1200×900 pixels (4:3 ratio)</p>
</div>
<div class="summary-item">
<strong>✅ Format</strong>
<p>PNG (preferred) or JPG</p>
</div>
<div class="summary-item">
<strong>✅ Location</strong>
<p>Theme root directory</p>
</div>
<div class="summary-item">
<strong>✅ File Size</strong>
<p>Under 1MB (300-500KB ideal)</p>
</div>
<div class="summary-item">
<strong>✅ Content</strong>
<p>Homepage or key features</p>
</div>
<div class="summary-item">
<strong>✅ Quality</strong>
<p>High-res, professional</p>
</div>
<div class="summary-item">
<strong>✅ Purpose</strong>
<p>Theme preview in admin</p>
</div>
</div>
<div class="success-box" style="margin-top: 30px;">
<h4>🔑 Key Takeaways:</h4>
<ul>
<li>✨ Required for all WordPress themes</li>
<li>🎯 First impression matters—make it good!</li>
<li>🎨 Show your theme's best features</li>
<li>⚡ Optimize for fast loading</li>
<li>🔧 Must be exactly 1200×900 pixels</li>
<li>🚀 Place in theme root, not subfolders</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<h3 style="margin-bottom: 20px;">🎓 Mission Accomplished!</h3>
<p>You've mastered screenshot.png and are ready to create stunning theme previews!</p>
<p style="margin-top: 20px; color: var(--text-muted); font-size: 0.9rem;">
Generated by <strong>AI Prompt Dictionary</strong> 🤖<br>
Making learning interactive, fun, and effective!
</p>
<div style="margin-top: 30px;">
<span class="badge">Interactive Learning</span>
<span class="badge">WordPress Master</span>
<span class="badge">Theme Development</span>
</div>
</div>
</footer>
<script>
// Progress Bar
window.addEventListener('scroll', () => {
const windowHeight = window.innerHeight;
const documentHeight = document.documentElement.scrollHeight - windowHeight;
const scrolled = window.scrollY;
const progress = (scrolled / documentHeight) * 100;
document.getElementById('progressBar').style.width = progress + '%';
});
// Intersection Observer
const sections = document.querySelectorAll('section');
const observerOptions = {
threshold: 0.3,
rootMargin: '0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
sections.forEach(section => observer.observe(section));
// Tab Switching
function switchTab(event, tabName) {
const tabContents = document.querySelectorAll('.tab-content');
const tabBtns = document.querySelectorAll('.tab-btn');
tabContents.forEach(content => content.classList.remove('active'));
tabBtns.forEach(btn => btn.classList.remove('active'));
document.getElementById(tabName).classList.add('active');
event.target.classList.add('active');
}
// Copy Code
function copyCode(button) {
const codeBlock = button.nextElementSibling;
const code = codeBlock.textContent;
navigator.clipboard.writeText(code).then(() => {
button.textContent = '✓ Copied!';
button.style.background = 'var(--accent-green)';
setTimeout(() => {
button.textContent = '📋 Copy';
button.style.background = 'var(--accent-purple)';
}, 2000);
});
}
// Interactive Screenshot Style Demo
function showScreenshotStyle(type) {
const output = document.getElementById('screenshotOutput');
const demos = {
homepage: `<span style="color: var(--accent-green);">✅ Homepage View</span>
<span style="color: var(--text-secondary);">// Most common approach
// Shows: Header, hero section, main content
// Benefits: Gives complete overview
// Best for: General-purpose themes</span>`,
mockup: `<span style="color: var(--accent-cyan);">✅ Device Mockup</span>
<span style="color: var(--text-secondary);">// Professional presentation
// Shows: Theme in laptop/phone frame
// Benefits: Looks polished and modern
// Best for: Premium themes</span>`,
features: `<span style="color: var(--accent-pink);">✅ Feature Showcase</span>
<span style="color: var(--text-secondary);">// Highlights unique elements
// Shows: Grid of key features
// Benefits: Shows what makes theme special
// Best for: Feature-rich themes</span>`,
minimal: `<span style="color: var(--accent-orange);">✅ Minimal Design</span>
<span style="color: var(--text-secondary);">// Clean and simple
// Shows: Just essential elements
// Benefits: Focuses on design quality
// Best for: Minimalist themes</span>`
};
output.innerHTML = `<pre style="margin: 0;">${demos[type]}</pre>`;
}
// Quiz Logic
let correctAnswers = 0;
let answeredQuestions = new Set();
function checkAnswer(element, isCorrect, questionNum) {
if (answeredQuestions.has(questionNum)) return;
answeredQuestions.add(questionNum);
const feedback = document.getElementById('feedback' + questionNum);
const options = element.parentElement.querySelectorAll('.quiz-option');
options.forEach(opt => opt.style.pointerEvents = 'none');
if (isCorrect) {
element.classList.add('correct');
feedback.className = 'quiz-feedback correct show';
feedback.innerHTML = '🎉 Perfect! You nailed it!';
correctAnswers++;
createConfetti();
} else {
element.classList.add('incorrect');
feedback.className = 'quiz-feedback incorrect show';
feedback.innerHTML = '❌ Not quite! Review the section above.';
}
if (answeredQuestions.size === 3 && correctAnswers === 3) {
setTimeout(() => {
document.getElementById('quiz-complete').style.display = 'block';
createMegaConfetti();
}, 1000);
}
}
// Confetti Effects
function createConfetti() {
const colors = ['#a855f7', '#3b82f6', '#10b981', '#ec4899'];
for (let i = 0; i < 30; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * 100 + '%';
confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
confetti.style.animationDelay = Math.random() * 0.5 + 's';
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 3000);
}
}
function createMegaConfetti() {
const colors = ['#a855f7', '#3b82f6', '#10b981', '#ec4899', '#f59e0b'];
for (let i = 0; i < 100; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * 100 + '%';
confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
confetti.style.animationDelay = (Math.random() * 2) + 's';
confetti.style.width = (Math.random() * 10 + 5) + 'px';
confetti.style.height = confetti.style.width;
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 5000);
}
}
</script>
</body>
</html>
Live Preview