🎨 Frontend Developer Fresher

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu để tạo cấu trúc trang web.

Semantic HTML là sử dụng các thẻ có ý nghĩa mô tả nội dung như <header>, <nav>, <main>, <article>, <footer> thay vì chỉ dùng <div>.

Lợi ích: SEO tốt hơn, Accessibility tốt hơn, code dễ đọc hơn.

Box Model mô tả cách các elements được render trên trang web, gồm 4 phần từ trong ra ngoài:

1. Content: Nội dung thực tế
2. Padding: Khoảng cách giữa content và border
3. Border: Viền bao quanh
4. Margin: Khoảng cách với elements khác

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
  margin: 10px;
  box-sizing: border-box; /* Total width = 200px */
}

Flexbox: Layout 1 chiều (row hoặc column). Phù hợp cho navigation, buttons, nhỏ.

Grid: Layout 2 chiều (rows và columns cùng lúc). Phù hợp cho page layout, complex layouts.

/* Flexbox */
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Grid */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Capturing (bắt): Event đi từ root xuống target element.

Bubbling (nổi bọt): Event đi từ target element lên root.

Mặc định JavaScript sử dụng bubbling.

// Bubbling (default)
element.addEventListener('click', handler);

// Capturing  
element.addEventListener('click', handler, true);

// Stop propagation
event.stopPropagation();

Closure là khi một function "nhớ" được biến ở scope bên ngoài ngay cả khi function đã thực thi xong.

function counter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2
console.log(increment()); // 3

Responsive Design là thiết kế web hiển thị tốt trên mọi kích thước màn hình.

Cách implement:

• Sử dụng viewport meta tag
• Media queries
• Flexible grids (%, vw, vh, fr)
• Fluid images (max-width: 100%)

/* Mobile first approach */
.container { padding: 10px; }

@media (min-width: 768px) {
  .container { padding: 20px; }
}

@media (min-width: 1024px) {
  .container { padding: 40px; }
}