ban luyen

HTML CSS

lo trinh thuc hanh de hoc HTML CSS tu con so 0

Tiếng Việt

dinh nghia truoc

HTML CSS la gi

HTML CSS dung de viet chi dan chinh xac. O day ban hoc theo lo trinh thuc hanh de hoc HTML CSS tu con so 0. Hay bat dau voi mot mo hinh: dau vao qua cac buoc roi thanh dau ra.

thong tin chay toi thieutep index.htmlchay open index.htmlthoi quen hoc mot phan nho cua HTML CSS, go vi du toi thieu roi chay
chuong trinh

tap hop lenh duoc chay theo thu tu.

gia tri va bien

gia tri la du lieu. bien la ten de giu du lieu.

ham

mot viec nho co ten, nhan dau vao va tao ket qua.

moi truong

Browser chay code trong index.html.

doan code dau tien

Semantic HTML

header main section button input
<main>
  <h1>Tools</h1>
  <button>Run</button>
</main>
dau ra heading and button rendered

pha he ngon ngu

cay pha he HTML CSS

xem HTML CSS den tu dau, gan voi ngon ngu nao, va nen hoc gi tiep.

goc
SGMLHTMLCSS cascade
hien taiHTML CSSho ngon ngu web va giao dien
ho ngon nguho ngon ngu web va giao dien
phu hop cho

phu hop cho lo trinh thuc hanh de hoc HTML CSS tu con so 0

tu con so 0

1doc mot quy tac2doan dau ra3go bang tri nho4chay kiem tra5lap lai voi mot thay doi

Ngan hang cau hoi

Tim truoc khi luyen

Chon giai doan hoac tim trong ngan hang cua ngon ngu nay roi mo bai tap.

18 ket qua
Q 1Lua chonGiai doan 1 dinh nghia

HTML CSS cau 1

HTML CSS cau 1. Chon mo ta phu hop nhat voi heading structure.

Q 2Lua chonGiai doan 1 dinh nghia

HTML CSS cau 2

HTML CSS cau 2. Chon mo ta phu hop nhat voi button action.

Q 3Lua chonGiai doan 1 dinh nghia

HTML CSS cau 3

HTML CSS cau 3. Chon mo ta phu hop nhat voi grid layout.

Q 4Lua chonGiai doan 1 dinh nghia

HTML CSS cau 4

HTML CSS cau 4. Chon mo ta phu hop nhat voi media query.

Q 5Lua chonGiai doan 1 dinh nghia

HTML CSS cau 5

HTML CSS cau 5. Chon mo ta phu hop nhat voi heading structure.

Q 6Lua chonGiai doan 1 dinh nghia

HTML CSS cau 6

HTML CSS cau 6. Chon mo ta phu hop nhat voi button action.

Q 7Lua chonGiai doan 1 dinh nghia

HTML CSS cau 7

HTML CSS cau 7. Chon mo ta phu hop nhat voi grid layout.

Q 8Lua chonGiai doan 1 dinh nghia

HTML CSS cau 8

HTML CSS cau 8. Chon mo ta phu hop nhat voi media query.

Q 9Lua chonGiai doan 1 dinh nghia

HTML CSS cau 9

HTML CSS cau 9. Chon mo ta phu hop nhat voi heading structure.

Q 10Lua chonGiai doan 1 dinh nghia

HTML CSS cau 10

HTML CSS cau 10. Chon mo ta phu hop nhat voi button action.

Q 11Lua chonGiai doan 1 dinh nghia

HTML CSS cau 11

HTML CSS cau 11. Chon mo ta phu hop nhat voi grid layout.

Q 12Lua chonGiai doan 1 dinh nghia

HTML CSS cau 12

HTML CSS cau 12. Chon mo ta phu hop nhat voi media query.

Q 13Lua chonGiai doan 1 dinh nghia

HTML CSS cau 13

HTML CSS cau 13. Chon mo ta phu hop nhat voi heading structure.

Q 14Lua chonGiai doan 1 dinh nghia

HTML CSS cau 14

HTML CSS cau 14. Chon mo ta phu hop nhat voi button action.

Q 15Lua chonGiai doan 1 dinh nghia

HTML CSS cau 15

HTML CSS cau 15. Chon mo ta phu hop nhat voi grid layout.

Q 16Lua chonGiai doan 1 dinh nghia

HTML CSS cau 16

HTML CSS cau 16. Chon mo ta phu hop nhat voi media query.

Q 17Lua chonGiai doan 1 dinh nghia

HTML CSS cau 17

HTML CSS cau 17. Chon mo ta phu hop nhat voi heading structure.

Q 18Lua chonGiai doan 1 dinh nghia

HTML CSS cau 18

HTML CSS cau 18. Chon mo ta phu hop nhat voi button action.

trac nghiem

HTML CSS cau 1

Q 1Lua chonmoi

HTML CSS cau 1. Chon mo ta phu hop nhat voi heading structure.

<h1>Dashboard</h1>

tham khao

mau cho index.html

Browseropen index.html
nho laidoc mot y nho roi viet lai ma khong nhin
lan theo codeghi gia tri bien tung dong truoc khi chay
tu goit copy hon go nhieu hon va sua mot loi nho

header main section button input

Semantic HTML

<main>
  <h1>Tools</h1>
  <button>Run</button>
</main>
  • Use semantic tags
  • Labels belong with inputs
  • Buttons are for actions

flex grid gap alignment

Layout

.panel {
  display: grid;
  gap: 12px;
}
  • Use gap for spacing
  • Define stable widths
  • Avoid layout shift

media query clamp minmax

Responsive

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
}
  • Test small screens
  • Avoid viewport scaled fonts
  • Keep controls reachable