1. Update everything

sudo apt update && sudo apt full-upgrade -y
# RHEL family: sudo dnf upgrade -y

Then enable automatic security updates:

sudo apt install unattended-upgrades -y
sudo dpkg-reconfigure --priority=low unattended-upgrades
# RHEL family: sudo dnf install dnf-automatic -y && sudo systemctl enable --now dnf-automatic.timer

2. Create a non-root user

sudo adduser deploy
sudo usermod -aG sudo deploy   # RHEL family: wheel

3. Use SSH keys, then lock down SSH

From your local machine:

ssh-keygen -t ed25519 -C "deploy@myserver"
ssh-copy-id deploy@your.server.ip

Confirm you can log in with the key in a second terminal before changing anything. Then edit /etc/ssh/sshd_config (or a file in /etc/ssh/sshd_config.d/):

PermitRootLogin no
PasswordAuthentication no
KbdInteractiveAuthentication no
PubkeyAuthentication yes
MaxAuthTries 3

sudo sshd -t && sudo systemctl reload ssh   # sshd on RHEL family

sshd -t validates the config so you don't lock yourself out.

4. Turn on a firewall

Allow only what you need:

sudo ufw default deny incoming
sudo ufw default allow outgoing
sudo ufw allow OpenSSH
sudo ufw allow 80,443/tcp
sudo ufw enable
# RHEL family: firewalld
# sudo firewall-cmd --permanent --add-service={ssh,http,https} && sudo firewall-cmd --reload

5. Rate-limit brute-force attempts

sudo apt install fail2ban -y
sudo tee /etc/fail2ban/jail.local >/dev/null <<'EOF'
[sshd]
enabled = true
maxretry = 5
findtime = 10m
bantime = 1h
EOF
sudo systemctl enable --now fail2ban
sudo fail2ban-client status sshd

6. Check what's listening

sudo ss -tulpn

Anything you don't recognize should be stopped or bound to 127.0.0.1. Databases in particular should not listen on public interfaces.

7. Set the time and hostname

sudo timedatectl set-timezone UTC
sudo hostnamectl set-hostname web-01

Correct time matters for logs, TLS and scheduled jobs.

8. Add swap on small instances

sudo fallocate -l 2G /swapfile && sudo chmod 600 /swapfile
sudo mkswap /swapfile && sudo swapon /swapfile
echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab

This prevents the OOM killer from taking out your database during a traffic spike on a 1–2 GB box.

9. Basic monitoring and logs

• Keep journalctl logs persistent: set Storage=persistent in /etc/systemd/journald.conf
• Watch disk space: df -h and set an alert in your provider's dashboard
• Install a lightweight monitor or uptime checker

10. Back up before you need it

Snapshots from your provider plus off-server backups of databases and uploads. Test a restore at least once.

Quick checklist

• Fully updated, automatic security updates on
• Non-root sudo user
• Key-only SSH, root login disabled, config validated
• Firewall allows only SSH/HTTP/HTTPS
• fail2ban on SSH
• No unexpected listening ports
• Swap on small instances
• Monitoring and tested backups

If you're comparing hosting options or looking for server setups and guides, Servers.cafe collects server and hosting resources.

What's the first thing you do on a new server?

Start at 360px wide

Design and build the smallest layout first, then add breakpoints as space allows. It forces you to decide what actually matters above the fold.

.hero { padding: 1.25rem; }
.hero h1 { font-size: clamp(1.75rem, 6vw, 3rem); line-height: 1.15; }

@media (min-width: 768px) {
  .hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; padding: 3rem; }
}

clamp() scales headings smoothly without a pile of media queries.

One message, one action

Above the fold on a phone you have room for:

1. A headline that states the benefit
2. One supporting sentence
3. One primary button

Everything else can scroll. If you need two buttons, make one clearly secondary.

Tap targets and spacing

Buttons and links should be comfortably tappable, at least around 44–48px tall, with space between them. Test with your thumb, not your mouse.

.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.25rem; }

Images that don't wreck performance

• Serve avif/webp with a fallback
• Always set width and height to prevent layout shift
• Lazy-load anything below the fold

<img src="hero-800.webp"
     srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
     sizes="(min-width: 768px) 50vw, 100vw"
     width="800" height="600" alt="Dashboard showing weekly sales" fetchpriority="high">

Use fetchpriority="high" only for the hero image; lazy-load the rest with loading="lazy".

Fonts

Limit yourself to one or two families and a few weights. Use font-display: swap so text appears immediately.

Heading structure and SEO basics

• Exactly one <h1>: the main headline
• Section titles as <h2>, sub-points as <h3>, in order
• Unique <title> (around 50–60 characters) and meta description
• Descriptive link text, not "click here"
• Structured data where it fits (Organization, Product, FAQPage)

Clean structure helps search engines and AI assistants understand and quote your page.

Forms that work on phones

• Use the right input types: type="email", type="tel", inputmode="numeric"
• Add autocomplete attributes so browsers can fill fields
• Keep it short: ask only what you need right now
• Show errors next to the field, not in an alert

<input type="email" name="email" autocomplete="email" required>
<input type="tel" name="phone" autocomplete="tel" inputmode="tel">

Test on a real device

Emulators miss things: sticky headers covering content, the on-screen keyboard hiding the submit button, slow 4G. Open the page on an actual mid-range phone before calling it done.

Measure

Run Lighthouse or PageSpeed Insights, and watch Core Web Vitals (LCP, CLS, INP) in production. Fix the biggest offender first.

Examples

If you'd like to see mobile-first page layouts in practice, the PageDesign.info portfolio shows a range of landing pages and sites built this way, and PageDesign.info covers page design services.

Checklist

• Built at 360px first
• One headline, one sentence, one primary action above the fold
• 48px tap targets
• Responsive, sized, lazy-loaded images
• One h1, ordered h2/h3
• Mobile-friendly form inputs
• Tested on a real phone
• Core Web Vitals checked

What's the most common mobile mistake you see on landing pages?