- Trang chủ
- Bài tập & hướng dẫn
- Bài tập HTML & HTML5
Nội dung chính Hiển thị
- HTML & HTML5 basic file
- Bài HTML & HTML5 nâng cao
- Bài Tập HTML CSS
- Thanh trượt hình ảnh CSS
- Hoạt ảnh nền chuyển màu CSS thuần túy
- CSS Luôn ở Footer dưới cùng
- Menu gấp Hamburger CSS thuần túy
- Văn bản trục trặc CSS
- Chuyển đổi CSS trượt xuống thuần túy
- Bảng đáp ứng
- Chỉ HTML CSS
- Sóng CSS đơn giản
- Hộp đèn CSS thuần túy
- Tạo hiệu ứng chiều cao với CSS Transitions
- CSS hoạt hình văn bản
- Hộp kiểm tùy chỉnh CSS thuần túy
- Chuyển tiếp đường viền CSS
- Thiết kế Vật liệu của Google trong CSS3
- Tiện ích xếp hạng sao CSS thuần túy
- Menu ngang HTML5/CSS3
- Mặt nạ CSS và SVG
- Kích hoạt hoạt ảnh CSS khi cuộn
- Văn bản nhiều dòng CSS thuần túy có dấu chấm lửng
- Menu thả xuống CSS thuần túy đơn giản
- Tỷ lệ thu phóng di chuột CSS
- Dòng CSS phía sau văn bản tiêu đề
- Thanh cuộn CSS
- Thanh tìm kiếm đơn giản
- Các tab CSS thuần túy
- Menu CSS trượt bên
- Hoạt hình văn bản CSS đơn giản
- Bố cục lưới CSS
- Bố cục đáp ứng 3 cột
- Phương thức chỉ dành cho CSS cơ bản
- Nền toàn màn hình đáp ứng
- Trung tâm dọc chỉ với 3 dòng CSS
- Dòng thời gian CSS
- Văn bản phối cảnh CSS Di chuột
- Vòng kết nối hoạt hình CSS/SVG
- Các nút chuyển đổi CSS thuần túy
- Nền hình ảnh cố định
- Đường viền chuyển màu CSS động
- Định hướng Hover Pure CSS
- Nền bị lệch với CSS
- Các trạng thái di chuột qua nút
- Chọn CSS thuần túy
- Văn bản chuyển màu CSS
- Cây CSS tinh khiết
- Nhãn nổi chỉ CSS
- Thư viện hình ảnh với CSS Grid và Flexbox
- Bong bóng trò chuyện trong CSS
- Ví dụ di chuột gạch dưới CSS hoạt hình
- Phần Mở rộng/Thu gọn CSS
- Lưới hình lục giác đáp ứng CSS
- Chuyển trang bằng CSS
- Menu vòng tròn CSS thuần túy
- Thanh tiến trình xuyên tâm CSS thuần túy
- Hộp lật CSS 3D
- Chân trang CSS Goey
- Hiệu ứng di chuột lớp phủ hình ảnh đơn giản
- Hộp kiểm tùy chỉnh, nút radio và hộp chọn
- CSS 3d di chuột
- Thẻ có cùng chiều cao
- CSS Site Scroll Micro Animation
- Ảnh động CSS
- Đang tải hoạt ảnh CSS
- Chỉ báo menu hoạt hình
- Tổng kết
HTML & HTML5 basic file
Bài tập HTML & HTML5 giúp bạn củng cố lại bài học đã học, bài tập được sắp xếp theo thứ tự khó tăng dần và sẽ còn được cập nhật
Bài HTML & HTML5 nâng cao
Bài HTML & HTML5 nâng cao, giúp bạn làm quen với nhiều mẫu thiết kế hiện nay
Trong bài viết hôm nay mình sẽ giới thiệu đến các bạn dự án luyện tập html css cho quá trình thiết kế và phát triển website
Bài Tập HTML CSS
Thanh trượt hình ảnh CSS
Kết quả bạn xem bên dưới nha
Xem thanh trượt hình ảnh Pen CSS w/ next/prev btns & navdot của Avi Kohn (@AMKohn) trên CodePen
Hoạt ảnh nền chuyển màu CSS thuần túy
Kết quả bạn xem bên dưới nha
Xem Hoạt hình nền chuyển màu CSS thuần túy của Pen của Manuel Pinto (@P1N2O) trên CodePen
CSS Luôn ở Footer dưới cùng
Kết quả bạn xem bên dưới nha
Xem Chân trang Pen CSS "Always on the bottom" của Chris Bracco (@cbracco) trên CodePen
Menu gấp Hamburger CSS thuần túy
Kết quả bạn xem bên dưới nha
Xem menu gấp Pen Pure CSS Hamburger của Erik Terwan (@erikterwan) trên CodePen
Văn bản trục trặc CSS
Kết quả bạn xem bên dưới nha
Xem Văn bản Glitched CSS trên bút của Lucas Bebber (@lbebber) trên CodePen
Chuyển đổi CSS trượt xuống thuần túy
Kết quả bạn xem bên dưới nha
Xem Chuyển đổi Pen Pure CSS Slide Down của Surjith (@surjithctly) trên CodePen
Bảng đáp ứng
Kết quả bạn xem bên dưới nha
Xem Pen Responsive Table của Geoff Yuen (@geoffyuen) trên CodePen
Chỉ HTML CSS
Kết quả bạn xem bên dưới nha
Xem phần tử Accordion dành riêng cho CSS + HTML của Pen bởi Alex Bergin (@abergin) trên CodePen
Sóng CSS đơn giản
Kết quả bạn xem bên dưới nha
Xem Sóng CSS đơn giản của bút. Mobile & Full width của Goodkatz (@goodkatz) trên CodePen
Hộp đèn CSS thuần túy
Kết quả bạn xem bên dưới nha
Xem Pen Pure CSS Lightbox của Gregory Schier (@gschier) trên CodePen
Tạo hiệu ứng chiều cao với CSS Transitions
Kết quả bạn xem bên dưới nha
Xem Pen Animate "height" with CSS Transitions của Felipe Fialho (@felipefialho) trên CodePen
CSS hoạt hình văn bản
Kết quả bạn xem bên dưới nha
Xem hoạt hình Pen Text của Yoann (@yoannhel) trên CodePen
Hộp kiểm tùy chỉnh CSS thuần túy
Kết quả bạn xem bên dưới nha
Xem các hộp kiểm tùy chỉnh Pen Pure CSS của Glen Cheney (@Vestride) trên CodePen
Chuyển tiếp đường viền CSS
Kết quả bạn xem bên dưới nha
Xem chuyển đổi Đường viền CSS Pen của Giana (@giana) trên CodePen
Thiết kế Vật liệu của Google trong CSS3
Kết quả bạn xem bên dưới nha
Xem Hộp đầu vào thiết kế Material Design của Pen Google của Chris Sev (@chris__sev) trên CodePen
Tiện ích xếp hạng sao CSS thuần túy
Kết quả bạn xem bên dưới nha
Xem Tiện ích xếp hạng sao CSS thuần túy của Pen bởi James Barnett (@jamesbarnett) trên CodePen
Menu ngang HTML5/CSS3
Kết quả bạn xem bên dưới nha
Xem Pen HTML5/CSS3 Menu ngang của Dhanush Badge (@dhanushbadge) trên CodePen
Mặt nạ CSS và SVG
Kết quả bạn xem bên dưới nha
Xem Mặt nạ Pen CSS và SVG của yoksel (@yoksel) trên CodePen
Kích hoạt hoạt ảnh CSS khi cuộn
Kết quả bạn xem bên dưới nha
Xem Pen Trigger a CSS animation on scroll của Benoît Boucart (@benoitboucart) trên CodePen
Văn bản nhiều dòng CSS thuần túy có dấu chấm lửng
Kết quả bạn xem bên dưới nha
Xem văn bản nhiều dòng Pen Pure CSS có dấu chấm lửng của Martin Wolf (@martinwolf) trên CodePen
Menu thả xuống CSS thuần túy đơn giản
Kết quả bạn xem bên dưới nha
Xem Menu thả xuống Pen Simple Pure CSS của Phil Hoyt (@philhoyt) trên CodePen
Tỷ lệ thu phóng di chuột CSS
Kết quả bạn xem bên dưới nha
Xem Pen css hover zoom scale của Wifeo (@ wifeo) trên CodePen
Dòng CSS phía sau văn bản tiêu đề
Kết quả bạn xem bên dưới nha
Xem dòng Pen CSS đằng sau văn bản tiêu đề của Eric Rasch (@ericrasch) trên CodePen
Thanh cuộn CSS
Kết quả bạn xem bên dưới nha
Xem Thanh cuộn CSS Pen của Ghost Rider (@GhostRider) trên CodePen
Thanh tìm kiếm đơn giản
Kết quả bạn xem bên dưới nha
Xem Thanh tìm kiếm đơn giản trên bút của Emily Huang (@huange) trên CodePen
Các tab CSS thuần túy
Kết quả bạn xem bên dưới nha
Xem các tab Pen Pure CSS của Wallace Erick (@wallaceerick) trên CodePen
Menu CSS trượt bên
Kết quả bạn xem bên dưới nha
Xem CSS menu trượt bên bút của Eduard L. (@EduardL) trên CodePen
Hoạt hình văn bản CSS đơn giản
Kết quả bạn xem bên dưới nha
Xem hoạt hình văn bản Pen Simple CSS của Nooray Yemon (@yemon) trên CodePen
Bố cục lưới CSS
Kết quả bạn xem bên dưới nha
Xem Bố cục lưới CSS Pen của MSEdgeDev (@MSEdgeDev) trên CodePen
Bố cục đáp ứng 3 cột
Kết quả bạn xem bên dưới nha
Xem Bố cục đáp ứng cột 3 bút của Graham Clark (@Cheesetoast) trên CodePen
Phương thức chỉ dành cho CSS cơ bản
Kết quả bạn xem bên dưới nha
Xem Phương thức chỉ dành cho CSS cơ bản dành cho bút của Timothy Long (@timothylong) trên CodePen
Nền toàn màn hình đáp ứng
Kết quả bạn xem bên dưới nha
Xem hình nền toàn màn hình Pen Responsive của theiwaz (@theiwaz) trên CodePen
Trung tâm dọc chỉ với 3 dòng CSS
Kết quả bạn xem bên dưới nha
Xem Pen Vertical center chỉ với 3 dòng CSS của sebastianekstrom (@sebastianekstrom) trên CodePen
Làm mờ CSS
Kết quả bạn xem bên dưới nha
Xem Pen Live CSS Blur của aadamski91 (@aja9104) trên CodePen
Dòng thời gian CSS
Kết quả bạn xem bên dưới nha
Xem Dòng thời gian CSS dành cho bút của Nils Wittler (@NilsWe) trên CodePen
Văn bản phối cảnh CSS Di chuột
Kết quả bạn xem bên dưới nha
Xem Pen CSS Perspective Text Hover của James Bosworth (@bosworthco) trên CodePen
Vòng kết nối hoạt hình CSS/SVG
Kết quả bạn xem bên dưới nha
Xem Pen CSS/SVG Animated Circles của Kyle Edwards (@kyledws) trên CodePen
Các nút chuyển đổi CSS thuần túy
Kết quả bạn xem bên dưới nha
Xem các nút chuyển đổi Pen Pure CSS của Mauricio Allende (@mallendeo) trên CodePen
Nền hình ảnh cố định
Kết quả bạn xem bên dưới nha
Xem hình nền hình ảnh Pen Fixed của Louis Coyle (@dropside) trên CodePen
Đường viền chuyển màu CSS động
Kết quả bạn xem bên dưới nha
Xem Đường viền chuyển màu CSS hoạt hình bằng bút của Mike Schultz (@mike-schultz) trên CodePen
Định hướng Hover Pure CSS
Kết quả bạn xem bên dưới nha
Xem Hướng bút nhận biết di chuột thuần CSS của Fabrice W. (@FWeinb) trên CodePen
Nền bị lệch với CSS
Kết quả bạn xem bên dưới nha
Xem nền Pen Skewed với CSS của Jose L Pimienta (@pipozoft) trên CodePen
Các trạng thái di chuột qua nút
Kết quả bạn xem bên dưới nha
Xem Pen Button Hover States của James Power (@thejamespower) trên CodePen
Chọn CSS thuần túy
Kết quả bạn xem bên dưới nha
Xem Pen CSS only Select ( radio + checkbox ) No JS by Aron (@Aoyue) trên CodePen
Văn bản chuyển màu CSS
Kết quả bạn xem bên dưới nha
Xem Văn bản chuyển màu CSS Pen trong Firefox của Giana (@giana) trên CodePen
Cây CSS tinh khiết
Kết quả bạn xem bên dưới nha
Xem Pen Pure CSS Tree của Rafael González (@rgg) trên CodePen
Nhãn nổi chỉ CSS
Kết quả bạn xem bên dưới nha
Xem Pen CSS Only Floated Labels của Nick Salloum (@callmenick) trên CodePen
Thư viện hình ảnh với CSS Grid và Flexbox
Kết quả bạn xem bên dưới nha
Xem Pen Image Gallery với CSS Grid và Flexbox của George W. Công viên (@GeorgePark) trên CodePen
Bong bóng trò chuyện trong CSS
Kết quả bạn xem bên dưới nha
Xem Bong bóng trò chuyện trên bút trong CSS của Jason Founts (@Founts) trên CodePen
Ví dụ di chuột gạch dưới CSS hoạt hình
Kết quả bạn xem bên dưới nha
Xem các ví dụ Di chuột gạch dưới CSS hoạt hình bằng bút của msco195 (@msco195) trên CodePen
Phần Mở rộng/Thu gọn CSS
Kết quả bạn xem bên dưới nha
Xem Phần Mở rộng/Thu gọn CSS Pen của Naut Hnil (@peternguyen) trên CodePen
Lưới hình lục giác đáp ứng CSS
Kết quả bạn xem bên dưới nha
Xem lưới hình lục giác đáp ứng Pen CSS của web-tiki (@web-tiki) trên CodePen
Chuyển trang bằng CSS
Kết quả bạn xem bên dưới nha
Xem bài Lật trang bằng bút bằng CSS của Amit Sheen (@amit_sheen) trên CodePen
Menu vòng tròn CSS thuần túy
Kết quả bạn xem bên dưới nha
Xem Menu Pen Pure CSS Circle của Hadar Weiss (@hadarweiss) trên CodePen
Thanh tiến trình xuyên tâm CSS thuần túy
Kết quả bạn xem bên dưới nha
Xem thanh tiến trình xuyên tâm Pen Pure CSS của Alex Marinenko (@jo-asakura) trên CodePen
Hộp lật CSS 3D
Kết quả bạn xem bên dưới nha
Xem Pen CSS 3D Flip Box của Sayed Rafeeq (@syedrafeeq) trên CodePen
máy bốc xếp
Kết quả bạn xem bên dưới nha
Xem Bộ nạp bút (WIP) của Tania (@TaniaLD) trên CodePen
Chân trang CSS Goey
Kết quả bạn xem bên dưới nha
Xem chân trang Pen CSS Goey của Zed Dash (@z-) trên CodePen
Hiệu ứng di chuột lớp phủ hình ảnh đơn giản
Kết quả bạn xem bên dưới nha
Xem Hiệu ứng di chuột lớp phủ hình ảnh đơn giản bằng bút của Arnaud Balland (@ArnaudBalland) trên CodePen
Hộp kiểm tùy chỉnh, nút radio và hộp chọn
Kết quả bạn xem bên dưới nha
Xem Bút hoàn toàn CSS. Hộp kiểm tùy chỉnh, nút radio và hộp chọn của Kenan Yusuf (@KenanYusuf) trên CodePen
CSS 3d di chuột
Kết quả bạn xem bên dưới nha
Xem Địa điểm Thế giới Bút (CSS 3d hover) của Akhil Sai Ram (@akhil_001) trên CodePen
Thẻ có cùng chiều cao
Kết quả bạn xem bên dưới nha
Xem Bài tập Pen FlexBox #4 - Các thẻ có chiều cao giống nhau của Veronica (@veronicadev) trên CodePen
CSS Site Scroll Micro Animation
Kết quả bạn xem bên dưới nha
Xem Pen CSS Site Scroll Micro Animation của Ryan Mulligan (@hexagoncircle) trên CodePen
Ảnh động CSS
Kết quả bạn xem bên dưới nha
Xem Ảnh động CSS của bút. Các nút CTA rõ ràng của Olivia Ng (@oliviale) trên CodePen
Đang tải hoạt ảnh CSS
Kết quả bạn xem bên dưới nha
Xem Hoạt hình tải CSS bằng bút của Alex (@AlexWarnes) trên CodePen
Chỉ báo menu hoạt hình
Kết quả bạn xem bên dưới nha
Xem chỉ báo menu hoạt hình Bút — tuần 27/52 của Mert Cukuren (@knyttneve) trên CodePen
Bài viết liên quan
- Bài Tập Web HTML CSS Javascript
- Project Giúp Bạn Thực Hành HTML CSS Javascript
- Ví Dụ CSS Cơ Bản Dành Cho Bạn Mới Lập Trình
Tổng kết
Qua đây mình mong bài viết sẽ giúp các bạn tìm được ví dụ tập HTML CSS và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ