serverpress.com
📦 WordPress
✨ The Prompt Phrase
serverpress.com
💻 Code Preview
📦 All-in-One Code
````artifact
id: serverpress-tutorial
name: support-prompt.html
type: html
content: |-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>serverpress.com - Interactive Tutorial</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--bg-dark: #0f172a;
--bg-darker: #020617;
--bg-card: #1e293b;
--bg-card-hover: #334155;
--accent-purple: #a855f7;
--accent-blue: #3b82f6;
--accent-green: #10b981;
--accent-red: #ef4444;
--accent-yellow: #fbbf24;
--accent-cyan: #06b6d4;
--accent-orange: #f97316;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
--gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
--shadow-xl: 0 25px 80px rgba(0, 0, 0, 0.6);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: var(--bg-darker);
color: var(--text-primary);
line-height: 1.7;
overflow-x: hidden;
}
.progress-bar {
position: fixed;
top: 0;
left: 0;
height: 4px;
background: var(--gradient-hero);
width: 0%;
z-index: 9999;
transition: width 0.2s ease;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradient-hero);
position: relative;
overflow: hidden;
text-align: center;
padding: 40px 20px;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="1" fill="white" opacity="0.2"/></svg>');
animation: stars 30s linear infinite;
}
@keyframes stars {
from { transform: translateY(0); }
to { transform: translateY(-100px); }
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-icon {
font-size: 8rem;
margin-bottom: 30px;
animation: float 3s ease-in-out infinite;
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3));
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.hero h1 {
font-size: 4rem;
font-weight: 900;
margin-bottom: 20px;
color: white;
text-shadow: 2px 4px 8px rgba(0,0,0,0.3);
animation: slideDown 0.8s ease;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-50px); }
to { opacity: 1; transform: translateY(0); }
}
.url-box {
display: inline-block;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
padding: 25px 50px;
border-radius: 20px;
font-family: 'Fira Code', monospace;
font-size: 2rem;
color: white;
margin: 30px 0;
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: var(--shadow-lg);
animation: glow 2s ease-in-out infinite;
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); }
50% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.6); }
}
.hero-subtitle {
font-size: 1.5rem;
color: white;
opacity: 0.95;
margin-top: 20px;
animation: fadeIn 1s ease 0.3s backwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
animation: bounce 2s infinite;
cursor: pointer;
font-size: 2rem;
color: white;
opacity: 0.8;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
40% { transform: translateX(-50%) translateY(-20px); }
60% { transform: translateX(-50%) translateY(-10px); }
}
section {
padding: 80px 0;
}
.section-title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 40px;
background: var(--gradient-hero);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center;
}
.card {
background: var(--bg-card);
border-radius: 24px;
padding: 40px;
margin: 30px 0;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
border-color: rgba(255, 255, 255, 0.1);
}
.card h3 {
color: var(--accent-purple);
font-size: 1.8rem;
margin-bottom: 20px;
}
.card p {
color: var(--text-secondary);
font-size: 1.1rem;
line-height: 1.8;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin: 40px 0;
}
.feature-item {
background: var(--bg-card);
padding: 35px;
border-radius: 20px;
text-align: center;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.feature-item:hover {
border-color: var(--accent-purple);
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(168, 85, 247, 0.3);
}
.feature-icon {
font-size: 4rem;
margin-bottom: 20px;
display: block;
}
.feature-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 15px;
}
.feature-desc {
color: var(--text-secondary);
font-size: 1rem;
}
.steps-container {
counter-reset: step;
}
.step {
background: var(--bg-card);
border-radius: 20px;
padding: 35px;
margin: 25px 0;
position: relative;
padding-left: 120px;
transition: all 0.3s ease;
border-left: 5px solid var(--accent-purple);
}
.step:hover {
background: var(--bg-card-hover);
transform: translateX(10px);
}
.step::before {
counter-increment: step;
content: counter(step);
position: absolute;
left: 30px;
top: 50%;
transform: translateY(-50%);
width: 70px;
height: 70px;
background: var(--gradient-hero);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 900;
color: white;
box-shadow: 0 10px 30px rgba(168, 85, 247, 0.4);
}
.step h4 {
color: var(--accent-cyan);
font-size: 1.5rem;
margin-bottom: 12px;
}
.step p {
color: var(--text-secondary);
font-size: 1.05rem;
}
.code-block {
background: #1e1e1e;
border-radius: 16px;
padding: 30px;
margin: 25px 0;
position: relative;
overflow: hidden;
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.code-dots {
display: flex;
gap: 8px;
}
.code-dot {
width: 14px;
height: 14px;
border-radius: 50%;
}
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }
.copy-btn {
background: var(--accent-purple);
color: white;
border: none;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
font-size: 0.95rem;
font-weight: 600;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.copy-btn:hover {
background: var(--accent-blue);
transform: scale(1.05);
}
.copy-btn.copied {
background: var(--accent-green);
}
pre {
margin: 0;
overflow-x: auto;
font-family: 'Fira Code', monospace;
}
code {
color: #e0e0e0;
font-size: 1rem;
line-height: 1.8;
}
.code-comment { color: #6a9955; font-style: italic; }
.code-string { color: #ce9178; }
.code-keyword { color: #569cd6; font-weight: 600; }
.code-url { color: #4ec9b0; font-weight: 600; }
.tabs {
display: flex;
gap: 15px;
margin-bottom: 30px;
flex-wrap: wrap;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
padding-bottom: 10px;
}
.tab {
padding: 12px 28px;
background: transparent;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: 1.05rem;
font-weight: 600;
border-radius: 10px 10px 0 0;
transition: all 0.3s ease;
position: relative;
}
.tab:hover {
color: var(--text-primary);
background: rgba(168, 85, 247, 0.1);
}
.tab.active {
color: var(--accent-purple);
background: rgba(168, 85, 247, 0.2);
}
.tab.active::after {
content: '';
position: absolute;
bottom: -12px;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-hero);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeInUp 0.5s ease;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.demo-container {
background: var(--bg-card);
border-radius: 20px;
padding: 40px;
margin: 30px 0;
text-align: center;
}
.browser-mockup {
background: #1e1e1e;
border-radius: 16px;
overflow: hidden;
margin: 30px 0;
box-shadow: var(--shadow-lg);
}
.browser-header {
background: #2d2d2d;
padding: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.browser-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.browser-url {
flex: 1;
background: #1e1e1e;
padding: 8px 15px;
border-radius: 8px;
color: var(--accent-cyan);
font-family: 'Fira Code', monospace;
text-align: left;
margin-left: 10px;
}
.browser-content {
padding: 40px;
min-height: 300px;
background: white;
color: #333;
}
.accordion-item {
margin: 20px 0;
}
.accordion-header {
background: var(--bg-card);
padding: 25px;
border-radius: 15px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.accordion-header:hover {
background: var(--bg-card-hover);
border-color: var(--accent-purple);
}
.accordion-header h4 {
color: var(--text-primary);
font-size: 1.3rem;
font-weight: 600;
}
.accordion-icon {
font-size: 1.5rem;
transition: transform 0.3s ease;
color: var(--accent-purple);
}
.accordion-icon.active {
transform: rotate(180deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.accordion-content.active {
max-height: 1000px;
}
.accordion-body {
padding: 25px;
background: rgba(30, 41, 59, 0.5);
border-radius: 15px;
margin-top: 10px;
}
.alert {
padding: 20px 25px;
border-radius: 12px;
margin: 20px 0;
border-left: 5px solid;
display: flex;
align-items: flex-start;
gap: 15px;
}
.alert-icon {
font-size: 1.8rem;
flex-shrink: 0;
}
.alert-info {
background: rgba(59, 130, 246, 0.1);
border-color: var(--accent-blue);
color: var(--text-primary);
}
.alert-warning {
background: rgba(239, 68, 68, 0.1);
border-color: var(--accent-red);
color: var(--text-primary);
}
.alert-success {
background: rgba(16, 185, 129, 0.1);
border-color: var(--accent-green);
color: var(--text-primary);
}
.alert-tip {
background: rgba(251, 191, 36, 0.1);
border-color: var(--accent-yellow);
color: var(--text-primary);
}
.quiz-container {
background: var(--bg-card);
border-radius: 24px;
padding: 50px;
margin: 40px 0;
box-shadow: var(--shadow-lg);
}
.quiz-header {
text-align: center;
margin-bottom: 40px;
}
.quiz-header h3 {
font-size: 2.5rem;
color: var(--accent-purple);
margin-bottom: 15px;
}
.quiz-question {
margin: 40px 0;
padding: 30px;
background: rgba(30, 41, 59, 0.5);
border-radius: 16px;
}
.quiz-question h4 {
color: var(--accent-cyan);
font-size: 1.5rem;
margin-bottom: 25px;
}
.quiz-options {
display: flex;
flex-direction: column;
gap: 15px;
}
.quiz-option {
background: var(--bg-card);
padding: 20px 25px;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
font-size: 1.05rem;
}
.quiz-option:hover {
border-color: var(--accent-blue);
transform: translateX(10px);
background: var(--bg-card-hover);
}
.quiz-option.correct {
border-color: var(--accent-green);
background: rgba(16, 185, 129, 0.2);
}
.quiz-option.incorrect {
border-color: var(--accent-red);
background: rgba(239, 68, 68, 0.2);
}
.quiz-option.disabled {
pointer-events: none;
opacity: 0.6;
}
.quiz-feedback {
margin-top: 20px;
padding: 20px;
border-radius: 12px;
display: none;
font-size: 1.05rem;
}
.quiz-feedback.show {
display: block;
animation: slideIn 0.4s ease;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.quiz-feedback.correct {
background: rgba(16, 185, 129, 0.2);
border-left: 5px solid var(--accent-green);
}
.quiz-feedback.incorrect {
background: rgba(239, 68, 68, 0.2);
border-left: 5px solid var(--accent-red);
}
.quiz-score {
text-align: center;
padding: 40px;
background: var(--gradient-hero);
border-radius: 20px;
margin-top: 40px;
display: none;
}
.quiz-score.show {
display: block;
animation: zoomIn 0.5s ease;
}
@keyframes zoomIn {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
.quiz-score h3 {
font-size: 2.5rem;
color: white;
margin-bottom: 15px;
}
.quiz-score p {
font-size: 1.3rem;
color: white;
opacity: 0.95;
}
.cheat-sheet {
background: var(--gradient-hero);
border-radius: 24px;
padding: 50px;
margin: 40px 0;
color: white;
box-shadow: var(--shadow-xl);
}
.cheat-sheet h3 {
font-size: 2.5rem;
margin-bottom: 30px;
text-align: center;
color: white;
}
.cheat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin-top: 30px;
}
.cheat-item {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
padding: 25px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.cheat-item:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-5px);
}
.cheat-item h4 {
color: white;
font-size: 1.3rem;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}
.cheat-item p {
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
margin-top: 10px;
}
.badge {
display: inline-block;
padding: 8px 16px;
background: var(--gradient-hero);
border-radius: 25px;
font-size: 0.9rem;
font-weight: 700;
margin: 8px;
box-shadow: 0 5px 15px rgba(168, 85, 247, 0.3);
}
.footer {
background: var(--bg-card);
padding: 60px 20px;
text-align: center;
margin-top: 80px;
border-radius: 24px 24px 0 0;
}
.footer h2 {
font-size: 2.5rem;
color: var(--accent-purple);
margin-bottom: 20px;
}
.footer p {
color: var(--text-secondary);
font-size: 1.1rem;
margin: 15px 0;
}
.footer-badges {
margin: 30px 0;
}
.confetti {
position: fixed;
width: 10px;
height: 10px;
z-index: 9999;
animation: confetti-fall 3s linear forwards;
}
@keyframes confetti-fall {
to {
transform: translateY(100vh) rotate(720deg);
opacity: 0;
}
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted var(--accent-purple);
cursor: help;
}
.tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
padding: 10px 15px;
background: var(--bg-darker);
color: var(--text-primary);
border-radius: 8px;
white-space: nowrap;
font-size: 0.9rem;
box-shadow: var(--shadow-lg);
z-index: 1000;
border: 1px solid var(--accent-purple);
}
@media (max-width: 768px) {
.hero h1 { font-size: 2.5rem; }
.url-box { font-size: 1.3rem; padding: 20px 30px; }
.section-title { font-size: 2rem; }
.card { padding: 25px; }
.step { padding-left: 100px; }
.step::before { width: 60px; height: 60px; font-size: 1.5rem; left: 20px; }
.feature-grid { grid-template-columns: 1fr; }
.cheat-grid { grid-template-columns: 1fr; }
.tabs { justify-content: center; }
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: var(--bg-darker);
}
::-webkit-scrollbar-thumb {
background: var(--accent-purple);
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-blue);
}
</style>
</head>
<body>
<div class="progress-bar" id="progressBar"></div>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<div class="hero-icon">🖥️</div>
<h1>ServerPress</h1>
<div class="url-box">serverpress.com</div>
<p class="hero-subtitle">Your Local WordPress Development Powerhouse! 💪</p>
</div>
<div class="scroll-indicator" onclick="document.getElementById('what-is-it').scrollIntoView({behavior: 'smooth'})">
⬇️
</div>
</section>
<div class="container">
<!-- What Is It Section -->
<section id="what-is-it">
<h2 class="section-title">🤔 What Is ServerPress?</h2>
<div class="card">
<h3>Your WordPress Development Playground</h3>
<p style="font-size: 1.2rem; margin-bottom: 25px;">
<strong>ServerPress.com</strong> is the home of <span class="tooltip" data-tooltip="Desktop Server - Local WordPress Development Tool">DesktopServer</span>, a powerful local development environment specifically designed for WordPress developers and designers. It lets you create, test, and develop WordPress sites on your own computer without needing an internet connection or web hosting! 🚀
</p>
<p style="margin-bottom: 20px;">
Think of it as your personal WordPress laboratory where you can experiment, break things, fix them, and perfect your sites before going live—all without any risk to a live website!
</p>
<div class="alert alert-info">
<span class="alert-icon">💡</span>
<div>
<strong>Key Insight:</strong> ServerPress eliminates the need for complex server setups. With just a few clicks, you can have a fully functional WordPress site running on your laptop or desktop, complete with Apache, PHP, and MySQL—all the tools you need!
</div>
</div>
</div>
</section>
<!-- Why Use It Section -->
<section>
<h2 class="section-title">✨ Why Choose ServerPress?</h2>
<div class="feature-grid">
<div class="feature-item">
<span class="feature-icon">⚡</span>
<h3 class="feature-title">Lightning Fast Setup</h3>
<p class="feature-desc">Create a new WordPress site in under 30 seconds with just a few clicks!</p>
</div>
<div class="feature-item">
<span class="feature-icon">🔒</span>
<h3 class="feature-title">Safe Testing Environment</h3>
<p class="feature-desc">Break things, experiment, and learn without affecting your live site!</p>
</div>
<div class="feature-item">
<span class="feature-icon">🌐</span>
<h3 class="feature-title">Offline Development</h3>
<p class="feature-desc">Work anywhere, anytime—no internet connection required!</p>
</div>
<div class="feature-item">
<span class="feature-icon">🎨</span>
<h3 class="feature-title">Perfect for Designers</h3>
<p class="feature-desc">Test themes and designs locally before deploying to production!</p>
</div>
<div class="feature-item">
<span class="feature-icon">🔧</span>
<h3 class="feature-title">Developer Friendly</h3>
<p class="feature-desc">Full control over PHP versions, database access, and server settings!</p>
</div>
<div class="feature-item">
<span class="feature-icon">📤</span>
<h3 class="feature-title">Easy Export</h3>
<p class="feature-desc">Move your local site to live hosting with built-in export tools!</p>
</div>
</div>
</section>
<!-- How It Works Section -->
<section>
<h2 class="section-title">⚙️ How Does ServerPress Work?</h2>
<div class="card">
<div class="steps-container">
<div class="step">
<h4>Download DesktopServer</h4>
<p>Visit serverpress.com and download the free or premium version of DesktopServer for Windows or Mac. The installer is lightweight and easy to use! 📥</p>
</div>
<div class="step">
<h4>Install the Software</h4>
<p>Run the installer and follow the simple setup wizard. DesktopServer will configure Apache, PHP, and MySQL automatically—no technical knowledge required!</p>
</div>
<div class="step">
<h4>Create a New WordPress Site</h4>
<p>Launch DesktopServer, click "Create New Site," choose your site name, and let the magic happen. In seconds, you'll have a fresh WordPress installation!</p>
</div>
<div class="step">
<h4>Develop & Customize</h4>
<p>Access your local site via a custom URL (like mysite.dev), install themes and plugins, and build your WordPress masterpiece offline!</p>
</div>
<div class="step">
<h4>Test Everything</h4>
<p>Test forms, plugins, custom code, and design changes without worrying about breaking a live site. Debug with confidence! 🐛</p>
</div>
<div class="step">
<h4>Export & Deploy</h4>
<p>When ready, use the built-in export feature to package your site and deploy it to your live hosting with minimal hassle! 🚀</p>
</div>
</div>
</div>
</section>
<!-- Demo Section -->
<section>
<h2 class="section-title">🎮 Visual Demo</h2>
<div class="demo-container">
<h3 style="color: var(--accent-purple); margin-bottom: 30px; font-size: 2rem;">
What You'll See in DesktopServer
</h3>
<div class="browser-mockup">
<div class="browser-header">
<div class="browser-dot dot-red"></div>
<div class="browser-dot dot-yellow"></div>
<div class="browser-dot dot-green"></div>
<div class="browser-url">http://myawesomesite.dev</div>
</div>
<div class="browser-content">
<h1 style="color: #333; margin-bottom: 20px;">Welcome to WordPress!</h1>
<p style="color: #666; font-size: 1.1rem; margin-bottom: 20px;">
Your local WordPress site is running perfectly on your computer.
</p>
<div style="display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;">
<div style="background: #0073aa; color: white; padding: 15px 30px; border-radius: 8px; font-weight: 600;">
Dashboard
</div>
<div style="background: #00a0d2; color: white; padding: 15px 30px; border-radius: 8px; font-weight: 600;">
Themes
</div>
<div style="background: #826eb4; color: white; padding: 15px 30px; border-radius: 8px; font-weight: 600;">
Plugins
</div>
</div>
<p style="color: #999; font-size: 0.9rem; margin-top: 30px;">
✨ Fully functional WordPress running locally on your machine!
</p>
</div>
</div>
<div class="alert alert-success" style="margin-top: 30px;">
<span class="alert-icon">✅</span>
<div>
<strong>No Internet Needed:</strong> This entire WordPress site is running on your computer, not on the web. You can work on planes, trains, or anywhere without WiFi!
</div>
</div>
</div>
</section>
<!-- Code Examples Section -->
<section>
<h2 class="section-title">💻 Technical Details</h2>
<div class="card">
<div class="tabs">
<button class="tab active" onclick="switchTab('setup')">Initial Setup</button>
<button class="tab" onclick="switchTab('urls')">URL Structure</button>
<button class="tab" onclick="switchTab('database')">Database Access</button>
<button class="tab" onclick="switchTab('export')">Export Process</button>
</div>
<div id="setup" class="tab-content active">
<h3 style="color: var(--accent-cyan); margin-bottom: 20px;">Creating Your First Site</h3>
<div class="code-block">
<div class="code-header">
<div class="code-dots">
<div class="code-dot dot-red"></div>
<div class="code-dot dot-yellow"></div>
<div class="code-dot dot-green"></div>
</div>
<button class="copy-btn" onclick="copyCode('setup-code')">
<span>📋</span>
<span>Copy</span>
</button>
</div>
<pre><code id="setup-code"><span class="code-comment"># Step 1: Launch DesktopServer application</span>
<span class="code-comment"># Step 2: Click "Create New Development Site"</span>
<span class="code-comment"># Step 3: Enter site details:</span>
Site Name: <span class="code-string">myproject</span>
Site Root: <span class="code-string">myproject.dev</span>
Blueprint: <span class="code-string">WordPress (Latest)</span>
<span class="code-comment"># Step 4: Click "Create"</span>
<span class="code-comment"># Step 5: Access your site:</span>
URL: <span class="code-url">http://myproject.dev</span>
Admin: <span class="code-url">http://myproject.dev/wp-admin</span>
<span class="code-comment"># Default credentials:</span>
Username: <span class="code-string">admin</span>
Password: <span class="code-string">password</span></code></pre>
</div>
<div class="alert alert-tip">
<span class="alert-icon">💡</span>
<div>
<strong>Pro Tip:</strong> Choose meaningful site names! Instead of "test1" or "site2", use descriptive names like "client-portfolio" or "ecommerce-store" for better organization.
</div>
</div>
</div>
<div id="urls" class="tab-content">
<h3 style="color: var(--accent-cyan); margin-bottom: 20px;">Understanding Local URLs</h3>
<div class="code-block">
<div class="code-header">
<div class="code-dots">
<div class="code-dot dot-red"></div>
<div class="code-dot dot-yellow"></div>
<div class="code-dot dot-green"></div>
</div>
<button class="copy-btn" onclick="copyCode('urls-code')">
<span>📋</span>
<span>Copy</span>
</button>
</div>
<pre><code id="urls-code"><span class="code-comment"># DesktopServer uses special local domains</span>
<span class="code-comment"># Default domain extensions:</span>
.dev <span class="code-comment"># Most common (e.g., mysite.dev)</span>
.local <span class="code-comment"># Alternative option</span>
<span class="code-comment"># Example URLs:</span>
<span class="code-url">http://portfolio.dev</span> <span class="code-comment"># Your site homepage</span>
<span class="code-url">http://portfolio.dev/wp-admin</span> <span class="code-comment"># WordPress dashboard</span>
<span class="code-url">http://portfolio.dev/wp-login.php</span> <span class="code-comment"># Login page</span>
<span class="code-comment"># File locations on your computer:</span>
Windows: <span class="code-string">C:\xampplite\htdocs\portfolio\</span>
Mac: <span class="code-string">/Applications/XAMPP/htdocs/portfolio/</span>
<span class="code-comment"># Important: These URLs only work on YOUR computer!</span>
<span class="code-comment"># Others can't access them over the internet</span></code></pre>
</div>
<div class="alert alert-info">
<span class="alert-icon">📚</span>
<div>
<strong>Local vs Live URLs:</strong> Your local URLs (like mysite.dev) are only accessible on your computer. When you deploy to live hosting, you'll use your actual domain (like mysite.com).
</div>
</div>
</div>
<div id="database" class="tab-content">
<h3 style="color: var(--accent-cyan); margin-bottom: 20px;">Database Configuration</h3>
<div class="code-block">
<div class="code-header">
<div class="code-dots">
<div class="code-dot dot-red"></div>
<div class="code-dot dot-yellow"></div>
<div class="code-dot dot-green"></div>
</div>
<button class="copy-btn" onclick="copyCode('database-code')">
<span>📋</span>
<span>Copy</span>
</button>
</div>
<pre><code id="database-code"><span class="code-comment"># Default database credentials (wp-config.php)</span>
<span class="code-keyword">define</span>(<span class="code-string">'DB_NAME'</span>, <span class="code-string">'myproject'</span>);
<span class="code-keyword">define</span>(<span class="code-string">'DB_USER'</span>, <span class="code-string">'root'</span>);
<span class="code-keyword">define</span>(<span class="code-string">'DB_PASSWORD'</span>, <span class="code-string">''</span>);
<span class="code-keyword">define</span>(<span class="code-string">'DB_HOST'</span>, <span class="code-string">'localhost'</span>);
<span class="code-comment"># Access phpMyAdmin:</span>
URL: <span class="code-url">http://localhost/phpMyAdmin</span>
Username: <span class="code-string">root</span>
Password: <span class="code-string">(leave blank)</span>
<span class="code-comment"># Common database operations:</span>
<span class="code-comment"># - View tables and data</span>
<span class="code-comment"># - Export database for backup</span>
<span class="code-comment"># - Import existing database</span>
<span class="code-comment"># - Run SQL queries for debugging</span>
<span class="code-comment"># Database location on disk:</span>
Windows: <span class="code-string">C:\xampplite\mysql\data\myproject\</span>
Mac: <span class="code-string">/Applications/XAMPP/mysql/data/myproject/</span></code></pre>
</div>
</div>
<div id="export" class="tab-content">
<h3 style="color: var(--accent-cyan); margin-bottom: 20px;">Exporting to Live Server</h3>
<div class="code-block">
<div class="code-header">
<div class="code-dots">
<div class="code-dot dot-red"></div>
<div class="code-dot dot-yellow"></div>
<div class="code-dot dot-green"></div>
</div>
<button class="copy-btn" onclick="copyCode('export-code')">
<span>📋</span>
<span>Copy</span>
</button>
</div>
<pre><code id="export-code"><span class="code-comment"># Export process in DesktopServer:</span>
<span class="code-comment"># Step 1: Click "Export" button in DesktopServer</span>
<span class="code-comment"># Step 2: Select your site</span>
<span class="code-comment"># Step 3: Choose export location</span>
<span class="code-comment"># What gets exported:</span>
<span class="code-comment"># ✓ All WordPress files</span>
<span class="code-comment"># ✓ Complete database dump</span>
<span class="code-comment"># ✓ Uploads and media</span>
<span class="code-comment"># ✓ Themes and plugins</span>
<span class="code-comment"># Export creates a package:</span>
myproject-export.zip
├── wordpress/ <span class="code-comment"># All WP files</span>
├── database.sql <span class="code-comment"># Database backup</span>
└── instructions.txt <span class="code-comment"># Deployment guide</span>
<span class="code-comment"># Deployment to live server:</span>
<span class="code-comment"># 1. Upload files via FTP/cPanel</span>
<span class="code-comment"># 2. Import database.sql to live database</span>
<span class="code-comment"># 3. Update wp-config.php with live credentials</span>
<span class="code-comment"># 4. Run search-replace for URLs (mysite.dev → mysite.com)</span>
<span class="code-comment"># Recommended migration plugins:</span>
<span class="code-comment"># - Duplicator (free)</span>
<span class="code-comment"># - All-in-One WP Migration</span>
<span class="code-comment"># - WP Migrate DB</span></code></pre>
</div>
</div>
</div>
</section>
<!-- Common Mistakes Section -->
<section>
<h2 class="section-title">❌ Common Mistakes to Avoid</h2>
<div class="card">
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>1. Forgetting to Start DesktopServer</h4>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<div class="alert alert-warning">
<span class="alert-icon">⚠️</span>
<div>
<strong>The Problem:</strong> Your local sites won't load if DesktopServer/Apache isn't running. You'll see "This site can't be reached" errors.
</div>
</div>
<div class="alert alert-success" style="margin-top: 15px;">
<span class="alert-icon">✅</span>
<div>
<strong>The Solution:</strong> Always launch DesktopServer and click "Start" before trying to access your local sites. Look for the green "Running" indicator!
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>2. Using .dev Domain After Chrome 63</h4>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<div class="alert alert-warning">
<span class="alert-icon">⚠️</span>
<div>
<strong>The Problem:</strong> Modern browsers force HTTPS on .dev domains, which can cause SSL certificate errors on local sites.
</div>
</div>
<div class="alert alert-success" style="margin-top: 15px;">
<span class="alert-icon">✅</span>
<div>
<strong>The Solution:</strong> Use .local or .test domains instead, or configure SSL certificates for local development. ServerPress provides options for this!
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>3. Not Backing Up Before Experimenting</h4>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<div class="alert alert-warning">
<span class="alert-icon">⚠️</span>
<div>
<strong>The Problem:</strong> Even on local sites, you can break things! Without backups, you might lose hours of work.
</div>
</div>
<div class="alert alert-success" style="margin-top: 15px;">
<span class="alert-icon">✅</span>
<div>
<strong>The Solution:</strong> Use DesktopServer's export feature to create snapshots before major changes. Also consider using version control (Git) for your theme/plugin files!
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>4. Hardcoding Local URLs in Database</h4>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<div class="alert alert-warning">
<span class="alert-icon">⚠️</span>
<div>
<strong>The Problem:</strong> URLs like "http://mysite.dev/image.jpg" hardcoded in content will break when you move to live hosting.
</div>
</div>
<div class="alert alert-success" style="margin-top: 15px;">
<span class="alert-icon">✅</span>
<div>
<strong>The Solution:</strong> Use WordPress functions like get_site_url() or relative URLs. When migrating, use search-replace tools to update all URLs in the database!
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>5. Ignoring PHP Version Compatibility</h4>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<div class="alert alert-warning">
<span class="alert-icon">⚠️</span>
<div>
<strong>The Problem:</strong> Your site works locally on PHP 7.4 but breaks on live hosting running PHP 8.0 due to deprecated functions.
</div>
</div>
<div class="alert alert-success" style="margin-top: 15px;">
<span class="alert-icon">✅</span>
<div>
<strong>The Solution:</strong> Match your local PHP version to your live server's version. DesktopServer Premium allows easy PHP version switching!
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pro Tips Section -->
<section>
<h2 class="section-title">🚀 Pro Tips for Power Users</h2>
<div class="card">
<div class="alert alert-tip">
<span class="alert-icon">💡</span>
<div>
<strong>Use Blueprints:</strong> Create custom site blueprints with your favorite plugins and themes pre-installed. This saves tons of time when starting new projects!
</div>
</div>
<div class="alert alert-tip">
<span class="alert-icon">🔧</span>
<div>
<strong>Enable WP_DEBUG:</strong> In wp-config.php, set define('WP_DEBUG', true); to catch errors and warnings during development. This helps you write better code!
</div>
</div>
<div class="alert alert-tip">
<span class="alert-icon">📁</span>
<div>
<strong>Organize Your Sites:</strong> Use descriptive folder names and keep a spreadsheet of all your local sites with their purposes, versions, and notes.
</div>
</div>
<div class="alert alert-tip">
<span class="alert-icon">🌐</span>
<div>
<strong>Share with Clients:</strong> Use ngrok or LocalTunnel to temporarily expose your local site to the internet for client previews without deploying!
</div>
</div>
<div class="alert alert-tip">
<span class="alert-icon">⚡</span>
<div>
<strong>Speed Up Development:</strong> Disable unnecessary plugins during development, use a simple theme for testing, and enable query monitoring to optimize performance!
</div>
</div>
<div class="alert alert-tip">
<span class="alert-icon">🔐</span>
<div>
<strong>Test Security:</strong> Use local sites to test security plugins, practice hardening WordPress, and learn about vulnerabilities in a safe environment!
</div>
</div>
</div>
</section>
<!-- Quiz Section -->
<section>
<h2 class="section-title">🎯 Test Your Knowledge!</h2>
<div class="quiz-container">
<div class="quiz-header">
<h3>Interactive Quiz 🧠</h3>
<p style="color: var(--text-secondary); font-size: 1.1rem;">Let's see how much you've learned about ServerPress!</p>
</div>
<div class="quiz-question">
<h4>Question 1: What is the main purpose of ServerPress/DesktopServer?</h4>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
A) To host WordPress sites on the internet
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 1)">
B) To create and develop WordPress sites locally on your computer
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
C) To backup WordPress sites to the cloud
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
D) To optimize WordPress sites for speed
</div>
</div>
<div class="quiz-feedback" id="feedback1"></div>
</div>
<div class="quiz-question">
<h4>Question 2: What is a typical local URL format in DesktopServer?</h4>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
A) http://localhost:8080/mysite
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 2)">
B) http://mysite.dev
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
C) http://127.0.0.1/mysite
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
D) http://mysite.local.com
</div>
</div>
<div class="quiz-feedback" id="feedback2"></div>
</div>
<div class="quiz-question">
<h4>Question 3: What should you do before making major changes to your local site?</h4>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
A) Delete all plugins
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
B) Change the site URL
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 3)">
C) Create a backup/export of your site
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
D) Upgrade WordPress to the latest version
</div>
</div>
<div class="quiz-feedback" id="feedback3"></div>
</div>
<div class="quiz-score" id="quizScore">
<h3>🎉 Quiz Complete!</h3>
<p id="scoreText"></p>
<div style="margin-top: 20px;">
<span class="badge">🏆 ServerPress Expert</span>
<span class="badge">💻 Local Dev Master</span>
<span class="badge">🌟 WordPress Pro</span>
</div>
</div>
</div>
</section>
<!-- Cheat Sheet Section -->
<section>
<h2 class="section-title">📚 Quick Reference Cheat Sheet</h2>
<div class="cheat-sheet">
<h3>ServerPress Essential Info 🔖</h3>
<p style="text-align: center; font-size: 1.1rem; margin-bottom: 30px; opacity: 0.95;">
Save this for quick reference!
</p>
<div class="cheat-grid">
<div class="cheat-item">
<h4>🌐 Website</h4>
<p>serverpress.com</p>
<p style="font-size: 0.85rem; margin-top: 5px;">Download DesktopServer here</p>
</div>
<div class="cheat-item">
<h4>💻 Product</h4>
<p>DesktopServer</p>
<p style="font-size: 0.85rem; margin-top: 5px;">Local WordPress development tool</p>
</div>
<div class="cheat-item">
<h4>🔗 Local URL</h4>
<p>sitename.dev</p>
<p style="font-size: 0.85rem; margin-top: 5px;">Or .local / .test domains</p>
</div>
<div class="cheat-item">
<h4>🗄️ Database</h4>
<p>localhost/phpMyAdmin</p>
<p style="font-size: 0.85rem; margin-top: 5px;">User: root, Pass: (blank)</p>
</div>
<div class="cheat-item">
<h4>⚡ Setup Time</h4>
<p>Under 30 seconds</p>
<p style="font-size: 0.85rem; margin-top: 5px;">Create new WordPress sites fast</p>
</div>
<div class="cheat-item">
<h4>💰 Pricing</h4>
<p>Free & Premium</p>
<p style="font-size: 0.85rem; margin-top: 5px;">Free version available</p>
</div>
<div class="cheat-item">
<h4>🖥️ Platforms</h4>
<p>Windows & Mac</p>
<p style="font-size: 0.85rem; margin-top: 5px;">Both fully supported</p>
</div>
<div class="cheat-item">
<h4>📤 Export</h4>
<p>Built-in tool</p>
<p style="font-size: 0.85rem; margin-top: 5px;">Easy migration to live hosting</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
Live Preview