Fullstack Web Developer Cheatsheet

Dưới đây là Fullstack Web Development Cheatsheet (Chuẩn 2025) – tập trung vào kiến thức thực chiến dành cho lập trình viên hiện đại làm cả frontend + backend, hỗ trợ cả WordPress và non-WordPress. Bố cục được chia theo chủ đề và công nghệ.

1. HTML Cheatsheet

Cấu trúc cơ bản

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Trang web</title>
</head>
<body>
  <h1>Xin chào</h1>
  <p>Nội dung ở đây</p>
</body>
</html>

Thẻ thường dùng

Tiêu đề: <h1> → <h6>
Đoạn văn: <p>, <br>
Danh sách: <ul>, <ol>, <li>
Liên kết: <a href="...">
Ảnh: <img src="..." alt="...">
Form: <form>, <input>, <textarea>, <select>, <button>
Semantic: <header>, <nav>, <main>, <section>, <footer>

2. CSS Cheatsheet

Bộ chọn (selectors)

*        /* tất cả */
div      /* theo thẻ */
#id      /* theo id */
.class   /* theo class */

Layout

display: flex;               /* flexbox */
display: grid;               /* CSS grid */
position: relative|absolute; /* định vị */
margin, padding              /* khoảng cách */
z-index                      /* thứ tự lớp */

Responsive

@media (max-width: 768px) {
  .menu { display: none; }
}

Đơn vị

px, em, rem, %, vw, vh

3. JavaScript Cheatsheet

Biến & Hàm

let x = 5;
const name = "John";

function greet(name) {
  return `Hello ${name}`;
}

DOM

document.querySelector('#id');
document.getElementById('id');
element.addEventListener('click', () => {});

AJAX (Fetch API)

fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data));

ES6+

Destructuring: const {name} = user
Arrow function: () => {}
Template string: `Hello ${name}`

4. Node.js & Express Cheatsheet

const express = require('express');
const app = express();

app.use(express.json());

app.get('/', (req, res) => {
  res.send('Hello World');
});

app.post('/api', (req, res) => {
  const data = req.body;
  res.json({ success: true, data });
});

app.listen(3000);

5. Database Cheatsheet

MySQL (hoặc MariaDB)

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100)
);

SELECT * FROM users WHERE email = 'abc@example.com';

MongoDB (Node.js)

const { MongoClient } = require('mongodb');
const client = new MongoClient(uri);
await client.connect();
const users = await db.collection('users').find({}).toArray();

6. WordPress Cheatsheet (tích hợp fullstack)

// REST API custom endpoint
register_rest_route('myplugin/v1', '/data', [
  'methods' => 'GET',
  'callback' => 'get_data',
]);

function get_data() {
  return ['message' => 'Xin chào từ backend WordPress'];
}

// Gửi fetch từ JS
fetch('/wp-json/myplugin/v1/data')
  .then(res => res.json())
  .then(data => console.log(data));

7. React Basics (Frontend hiện đại)

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Bạn bấm {count} lần</p>
      <button onClick={() => setCount(count + 1)}>Tăng</button>
    </div>
  );
}

useState, useEffect, JSX, props, component reuse

8. API & Authentication

REST API basics

GET: Lấy dữ liệu
POST: Gửi dữ liệu mới
PUT/PATCH: Cập nhật
DELETE: Xóa

Auth

Token (JWT): xác thực không lưu session
OAuth: login bằng Google, Facebook
Nonce (WordPress): wp_create_nonce(), check_ajax_referer()

9. Git Cheatsheet

git init
git clone repo-url
git status
git add .
git commit -m "Lời nhắn"
git push origin main

10. Hosting & Triển khai

CPanel hoặc VPS

FTP upload
Cài đặt WordPress
Sử dụng .htaccess, wp-config.php

Vite / React / Node

npm run build
scp -r dist/* user@server:/var/www/html/

11. Công cụ khuyên dùng

Mục đích	Công cụ
Local WP Dev	LocalWP, DevKinsta, XAMPP
Fullstack JS	Vite, Node.js, Express
Editor	VS Code (kèm plugin PHP Intelephense, ESLint, Prettier)
Design	Figma
API Test	Postman, Insomnia
Source Control	Git + GitHub
Task & Chat	Notion, Slack, Trello

Bài học trước ← WordPress Gutenberg Block Cheatsheet (Nâng cao) Bài học tiếp theo Hosting Cheatsheet (Cho lập trình viên & quản trị web) →