Giới thiệu
hocvietcode.com là website chia sẻ và cập nhật tin tức công nghệ, chia sẻ kiến thức, kỹ năng. Chúng tôi rất cảm ơn và mong muốn nhận được nhiều phản hồi để có thể phục vụ quý bạn đọc tốt hơn !
Liên hệ quảng cáo: [email protected]
CSS cơ bản – Bài 17: Tạo kiểu form, hover, focus và trạng thái lỗi
Bạn sẽ làm form liên hệ dễ đọc và thao tác, giữ nhãn rõ ràng cùng dấu focus, đồng thời phân biệt hover, disabled và kiểm tra dữ liệu. CSS hỗ trợ trải nghiệm nhưng không thay backend xác thực.
CSS cơ bản – Bài 18: Biến CSS và tổ chức stylesheet dễ sửa
Bạn sẽ gom một số giá trị lặp như màu, khoảng cách và bo góc thành custom properties, đồng thời tổ chức quy tắc theo vai trò để tránh sửa một chỗ làm nhiều nơi lệch nhau.
CSS cơ bản – Bài 19: Transition và animation vừa đủ, có giảm chuyển động
Bạn sẽ tạo phản hồi nhẹ khi thao tác với card và nút, phân biệt transition với animation, rồi tôn trọng tùy chọn giảm chuyển động. Hiệu ứng phải hỗ trợ sử dụng chứ không che thông tin hoặc gây khó chịu.
CSS cơ bản – Bài 20: Hoàn thiện website và sửa lỗi bằng DevTools
Bạn sẽ rà lại cả ba trang Góc học web, dùng DevTools xác định lỗi thay vì chép thêm quy tắc, và chuyển các thí nghiệm thành một stylesheet gọn. Đây là bước hoàn thiện ví dụ xuyên suốt, không phải một dự án cuối khóa riêng.
CSS cơ bản – Bài 08: Normal flow, display, ẩn nội dung và overflow
Bạn sẽ hiểu vì sao các khối xếp dọc, liên kết nằm cùng dòng và một nội dung dài có thể tràn khỏi hộp. Từ đó chọn display và overflow phù hợp thay vì dùng position cho mọi bố cục.
CSS cơ bản – Bài 09: Ảnh và card: tỷ lệ, object-fit và kích thước nội tại
Bạn sẽ làm ảnh trong các card có tỷ lệ nhất quán mà không bị méo, đồng thời giữ ảnh trong bài viết có thể hiện đủ nội dung. Hai tình huống này cần lựa chọn khác nhau.
CSS cơ bản – Bài 10: Position và z-index: đặt đúng chỗ, hiểu lớp chồng
Bạn sẽ đặt một nhãn lên card bằng absolute và tạo một tiêu đề nhỏ sticky trong vùng cuộn. Qua đó hiểu containing block và lý do tăng z-index lên rất lớn vẫn có thể không giải quyết được lỗi.
CSS cơ bản – Bài 11: Flexbox: trục chính, trục chéo và căn chỉnh
Bạn sẽ xếp một nhóm phần tử theo một chiều bằng Flexbox, nhìn được trục chính và trục chéo, rồi chọn đúng thuộc tính căn chỉnh thay vì thử justify và align ngẫu nhiên.
CSS cơ bản – Bài 12: Dùng Flexbox tạo header, menu và nhóm nút
Bạn sẽ áp dụng Flexbox vào header của Góc học web: tên website, các liên kết menu và nhóm hành động có thể xuống dòng khi thiếu chỗ. Đây là bước từ ví dụ riêng lẻ sang thành phần dùng chung trên ba trang.
CSS cơ bản – Bài 13: CSS Grid: hàng, cột và khoảng cách
Bạn sẽ chuyển danh sách bài học từ các khối xếp dọc sang một lưới có cột rõ ràng. Qua ví dụ, bạn hiểu grid container, item và đơn vị fr trước khi xây bố cục phức tạp.
CSS cơ bản – Bài 14: Grid linh hoạt: auto-fit, minmax và sidebar
Bạn sẽ tạo một lưới card tự chọn số cột theo không gian, đồng thời dựng một vùng nội dung–sidebar không tràn khi màn hình nhỏ. Mỗi công thức được gắn với giới hạn cụ thể của nội dung.
CSS cơ bản – Bài 15: Responsive theo hướng mobile-first
Bạn sẽ bắt đầu từ bố cục dùng được ở màn hình nhỏ, rồi thêm các thay đổi khi nội dung có đủ không gian. Breakpoint được chọn theo nhu cầu của thành phần, không chỉ theo tên một loại điện thoại.
CSS cơ bản – Bài 16: Hoàn thiện menu, bảng và ảnh trên màn hình nhỏ
Bạn sẽ xử lý các thành phần hay gây lỗi responsive: menu dài, ảnh rộng, bảng nhiều cột và chuỗi không ngắt. Mục tiêu là giữ đủ nội dung thay vì che những phần tràn khỏi màn hình.
CSS cơ bản – Bài 01: Kết nối CSS với HTML và sửa quy tắc đầu tiên
Bạn sẽ nối một stylesheet vào website Góc học web, thay đổi kiểu chữ và chiều rộng nội dung, rồi dùng DevTools xác nhận trình duyệt thực sự tải tệp CSS nào.
CSS cơ bản – Bài 02: Selector và class: chọn đúng phần tử cần sửa
Bạn sẽ tạo kiểu cho phần giới thiệu và các liên kết bài viết mà không làm mọi đoạn văn hoặc liên kết trên website đổi theo. Bài học giúp chọn phạm vi CSS dựa vào vai trò thành phần.
CSS cơ bản – Bài 03: Vì sao CSS không có tác dụng? Cascade và specificity
Bạn sẽ theo dõi một đoạn thông báo có nhiều quy tắc màu cùng khớp, xác định quy tắc thắng và sửa đúng phạm vi. Bài này giúp tránh thói quen thêm !important mỗi khi giao diện chưa đổi.
CSS cơ bản – Bài 04: Box model: vì sao phần tử rộng hơn kích thước đã đặt?
Bạn sẽ nhìn một hộp có width, padding và border, tính chiều rộng ngoài rồi dùng border-box để quản lý kích thước dễ hơn. Khoảng cách bên trong và khoảng cách bên ngoài được giải thích bằng cùng một ví dụ.
CSS cơ bản – Bài 05: Đơn vị và kích thước: px, rem, %, min và max
Bạn sẽ chọn đơn vị theo nhu cầu: chữ dễ điều chỉnh, vùng nội dung có giới hạn và hộp không tràn màn hình. Không có một đơn vị duy nhất phù hợp cho mọi thuộc tính.
CSS cơ bản – Bài 06: Typography và font tiếng Việt dễ đọc
Bạn sẽ cải thiện khả năng đọc của bài viết bằng font phù hợp, độ dài dòng và khoảng dòng. Đồng thời phân biệt thiếu glyph tiếng Việt, thiếu độ đậm và dữ liệu đã bị lỗi mã hóa.
CSS cơ bản – Bài 07: Màu sắc, nền và đường viền có mục đích
Bạn sẽ tạo vùng giới thiệu và card rõ ràng bằng màu nền, đường viền và khoảng cách. Màu sắc hỗ trợ phân cấp nội dung, đồng thời phải giữ chữ đọc được trong những trạng thái thực tế.
Dịch vụ thiết kế Wesbite
