Go to main website TylerCode

How-To Library

Practical recipes for common web development tasks.

How to Center a Div

Use grid or flexbox to center content horizontally and vertically.

  1. Create a parent container
  2. Set display:grid or display:flex
  3. Align and justify the child
  4. Test on mobile sizes
.parent { min-height: 100vh; display: grid; place-items: center; }
Try It

How to Build a Responsive Navbar

Create a desktop nav that collapses cleanly on small screens.

  1. Use semantic nav markup
  2. Group links and actions
  3. Add a media query
  4. Test keyboard navigation
@media (max-width: 760px) { .links { display:none; } }
Try It

How to Fetch JSON from an API

Load JSON data from an endpoint and render it safely.

  1. Call fetch
  2. Check the response
  3. Parse JSON
  4. Render escaped values
const res = await fetch("/api/items");
const data = await res.json();
Try It

How to Handle a PHP Form

Read POST values, validate input, and return a safe response.

  1. Check request method
  2. Read POST values
  3. Validate and sanitize
  4. Store or respond
$name = trim($_POST["name"] ?? "");
Try It

How to Use SQL JOINs

Combine related rows from two tables.

  1. Identify related keys
  2. Choose join type
  3. Select needed columns
  4. Add filters
SELECT users.name, orders.total FROM users JOIN orders ON orders.user_id = users.id;
Try It

How to Think About Docker Deployment

Understand images, containers, ports, volumes, and environment variables.

  1. Build an image
  2. Run a container
  3. Set env vars
  4. Map ports
  5. Monitor logs
docker run --rm -p 8080:80 my-app
Try It