Nội dung chính Hiển thị Show
HTML & HTML5 basic fileBà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 caoBà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 CSSThanh 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úyKế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ùngKế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úyKế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 CSSKế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úyKế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 ứngKết quả bạn xem bên dưới nha Xem Pen Responsive Table của Geoff Yuen (@geoffyuen) trên CodePen Chỉ HTML CSSKế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ảnKế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úyKế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 TransitionsKế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ảnKế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úyKế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 CSSKế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 CSS3Kế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úyKế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/CSS3Kế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à SVGKế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ộnKế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ửngKế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ảnKế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 CSSKế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 CSSKế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ảnKế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úyKế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ênKế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ảnKế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 CSSKế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ộtKế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ảnKế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 ứngKế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 CSSKế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ờ CSSKế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 CSSKế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ộtKế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/SVGKế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úyKế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ố địnhKế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 độngKế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 CSSKế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 CSSKế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útKế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úyKế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 CSSKế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ếtKế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ỉ CSSKế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à FlexboxKế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 CSSKế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ìnhKế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 CSSKế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 CSSKế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 CSSKế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úyKế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úyKế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 3DKế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ếpKế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 GoeyKế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ảnKế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ọnKế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ộtKế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 caoKế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 AnimationKế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 CSSKế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 CSSKế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ìnhKế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
Tổng kếtQua đâ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ẻ |
