Trong bài viết hôm nay mình sẽ giới thiệu đến bạn những dự án luyện tập html css cho quá trình thiết kế và phát triển website.
Tóm Tắt
Bài Tập HTML CSS
CSS Image Slider
Kết quả bạn xem bên dưới nha.
See the Pen CSS image slider w/ next/prev btns & nav dots by Avi Kohn (@AMKohn) on CodePen.
Pure CSS Gradient Background Animation
Kết quả bạn xem bên dưới nha.
See the Pen Pure CSS Gradient Background Animation by Manuel Pinto (@P1N2O) on CodePen.
CSS Always on the bottom Footer
Kết quả bạn xem bên dưới nha.
See the Pen CSS “Always on the bottom” Footer by Chris Bracco (@cbracco) on CodePen.
Pure CSS Hamburger fold-out menu
Kết quả bạn xem bên dưới nha.
See the Pen Pure CSS Hamburger fold-out menu by Erik Terwan (@erikterwan) on CodePen.
CSS Glitched Text
Kết quả bạn xem bên dưới nha.
See the Pen CSS Glitched Text by Lucas Bebber (@lbebber) on CodePen.
Pure CSS Slide Down Toggle
Kết quả bạn xem bên dưới nha.
See the Pen Pure CSS Slide Down Toggle by Surjith (@surjithctly) on CodePen.
Responsive Table
Kết quả bạn xem bên dưới nha.
See the Pen Responsive Table by Geoff Yuen (@geoffyuen) on CodePen.
CSS HTML Only Accordion
Kết quả bạn xem bên dưới nha.
See the Pen CSS + HTML only Accordion Element by Alex Bergin (@abergin) on CodePen.
Simple CSS Waves
Kết quả bạn xem bên dưới nha.
See the Pen Simple CSS Waves | Mobile & Full width by Goodkatz (@goodkatz) on CodePen.
Pure CSS Lightbox
Kết quả bạn xem bên dưới nha.
See the Pen Pure CSS Lightbox by Gregory Schier (@gschier) on CodePen.
Animate height with CSS Transitions
Kết quả bạn xem bên dưới nha.
See the Pen Animate “height” with CSS Transitions by Felipe Fialho (@felipefialho) on CodePen.
Text animation CSS
Kết quả bạn xem bên dưới nha.
See the Pen Text animation by Yoann (@yoannhel) on CodePen.
Pure CSS Custom Checkboxes
Kết quả bạn xem bên dưới nha.
See the Pen Pure CSS custom checkboxes by Glen Cheney (@Vestride) on CodePen.
CSS Border Transitions
Kết quả bạn xem bên dưới nha.
See the Pen CSS Border transitions by Giana (@giana) on CodePen.
Google Material Design in CSS3
Kết quả bạn xem bên dưới nha.
See the Pen Google Material Design Input Boxes by Chris Sev (@chris__sev) on CodePen.
Pure CSS Star Rating Widget
Kết quả bạn xem bên dưới nha.
See the Pen Pure CSS Star Rating Widget by James Barnett (@jamesbarnett) on CodePen.
HTML5/CSS3 Horizontal Menu
Kết quả bạn xem bên dưới nha.
See the Pen HTML5/CSS3 Horizontal Menu by Dhanush Badge (@dhanushbadge) on CodePen.
CSS and SVG Masks
Kết quả bạn xem bên dưới nha.
See the Pen CSS and SVG Masks by yoksel (@yoksel) on CodePen.
Trigger a CSS animation on scroll
Kết quả bạn xem bên dưới nha.
See the Pen Trigger a CSS animation on scroll by Benoît Boucart (@benoitboucart) on CodePen.
Pure CSS multiline text with ellipsis
Kết quả bạn xem bên dưới nha.
See the Pen Pure CSS multiline text with ellipsis by Martin Wolf (@martinwolf) on CodePen.
Simple Pure CSS Drop Down Menu
Kết quả bạn xem bên dưới nha.
See the Pen Simple Pure CSS Drop Down Menu by Phil Hoyt (@philhoyt) on CodePen.
CSS Hover Zoom Scale
Kết quả bạn xem bên dưới nha.
See the Pen css hover zoom scale by Wifeo (@wifeo) on CodePen.
CSS Line Behind Title Text
Kết quả bạn xem bên dưới nha.
See the Pen CSS line behind title text by Eric Rasch (@ericrasch) on CodePen.
CSS Scroll Bars
Kết quả bạn xem bên dưới nha.
See the Pen CSS Scroll Bars by Ghost Rider (@GhostRider) on CodePen.
Simple Search Bar
Kết quả bạn xem bên dưới nha.
See the Pen Simple Search Bar by Emily Huang (@huange) on CodePen.
Pure CSS Tabs
Kết quả bạn xem bên dưới nha.
See the Pen Pure CSS Tabs by Wallace Erick (@wallaceerick) on CodePen.
Side Sliding Menu CSS
Kết quả bạn xem bên dưới nha.
See the Pen Side Sliding Menu CSS by Eduard L. (@EduardL) on CodePen.
Simple CSS text animation
Kết quả bạn xem bên dưới nha.
See the Pen Simple CSS text animation by Nooray Yemon (@yemon) on CodePen.
CSS Grid Layout
Kết quả bạn xem bên dưới nha.
See the Pen CSS Grid Layout by MSEdgeDev (@MSEdgeDev) on CodePen.
3 Column Responsive Layout
Kết quả bạn xem bên dưới nha.
See the Pen 3 Column Responsive Layout by Graham Clark (@Cheesetoast) on CodePen.
Basic CSS-Only Modal
Kết quả bạn xem bên dưới nha.
See the Pen Basic CSS-Only Modal by Timothy Long (@timothylong) on CodePen.
Responsive Full Screen Background
Kết quả bạn xem bên dưới nha.
See the Pen Responsive full screen background by theiwaz (@theiwaz) on CodePen.
Vertical Center With Only 3 Lines of CSS
Kết quả bạn xem bên dưới nha.
See the Pen Vertical center with only 3 lines of CSS by sebastianekstrom (@sebastianekstrom) on CodePen.
CSS Blur
Kết quả bạn xem bên dưới nha.
See the Pen Live CSS Blur by aadamski91 (@aja9104) on CodePen.
CSS Timeline
Kết quả bạn xem bên dưới nha.
See the Pen CSS Timeline by Nils Wittler (@NilsWe) on CodePen.
CSS Perspective Text Hover
Kết quả bạn xem bên dưới nha.
See the Pen CSS Perspective Text Hover by James Bosworth (@bosworthco) on CodePen.
CSS/SVG Animated Circles
Kết quả bạn xem bên dưới nha.
See the Pen CSS/SVG Animated Circles by Kyle Edwards (@kyledws) on CodePen.
Pure CSS toggle buttons
Kết quả bạn xem bên dưới nha.
See the Pen Pure CSS toggle buttons by Mauricio Allende (@mallendeo) on CodePen.
Fixed image backgrounds
Kết quả bạn xem bên dưới nha.
See the Pen Fixed image backgrounds by Louis Coyle (@dropside) on CodePen.
Animated CSS Gradient Border
Kết quả bạn xem bên dưới nha.
See the Pen Animated CSS Gradient Border by Mike Schultz (@mike-schultz) on CodePen.
Direction Aware Hover Pure CSS
Kết quả bạn xem bên dưới nha.
See the Pen Direction aware hover pure CSS by Fabrice W. (@FWeinb) on CodePen.
Skewed background with CSS
Kết quả bạn xem bên dưới nha.
See the Pen Skewed background with CSS by Jose L Pimienta (@pipozoft) on CodePen.
Button Hover States
Kết quả bạn xem bên dưới nha.
See the Pen Button Hover States by James Power (@thejamespower) on CodePen.
Pure CSS Select
Kết quả bạn xem bên dưới nha.
See the Pen CSS only Select ( radio + checkbox ) No JS by Aron (@Aoyue) on CodePen.
CSS Gradient Text
Kết quả bạn xem bên dưới nha.
See the Pen CSS Gradient Text in Firefox by Giana (@giana) on CodePen.
Pure CSS Tree
Kết quả bạn xem bên dưới nha.
See the Pen Pure CSS Tree by Rafael González (@rgg) on CodePen.
CSS Only Floated Labels
Kết quả bạn xem bên dưới nha.
See the Pen CSS Only Floated Labels by Nick Salloum (@callmenick) on CodePen.
Image Gallery with CSS Grid & Flexbox
Kết quả bạn xem bên dưới nha.
See the Pen Image Gallery with CSS Grid & Flexbox by George W. Park (@GeorgePark) on CodePen.
Chat Bubbles in CSS
Kết quả bạn xem bên dưới nha.
See the Pen Chat Bubbles in CSS by Jason Founts (@Founts) on CodePen.
Animated CSS Underline Hover Examples
Kết quả bạn xem bên dưới nha.
See the Pen Animated CSS Underline Hover Examples by msco195 (@msco195) on CodePen.
CSS Expand/Collapse Section
Kết quả bạn xem bên dưới nha.
See the Pen CSS Expand/Collapse Section by Naut Hnil (@peternguyen) on CodePen.
CSS responsive grid of hexagons
Kết quả bạn xem bên dưới nha.
See the Pen CSS responsive grid of hexagons by web-tiki (@web-tiki) on CodePen.
Turning pages with CSS
Kết quả bạn xem bên dưới nha.
See the Pen Turning pages with CSS by Amit Sheen (@amit_sheen) on CodePen.
Pure CSS Circle Menu
Kết quả bạn xem bên dưới nha.
See the Pen Pure CSS Circle Menu by Hadar Weiss (@hadarweiss) on CodePen.
Pure CSS Radial Progress Bar
Kết quả bạn xem bên dưới nha.
See the Pen Pure CSS radial progress bar by Alex Marinenko (@jo-asakura) on CodePen.
CSS 3D Flip Box
Kết quả bạn xem bên dưới nha.
See the Pen CSS 3D Flip Box by Sayed Rafeeq (@syedrafeeq) on CodePen.
Loaders
Kết quả bạn xem bên dưới nha.
See the Pen Loaders (WIP) by Tania (@TaniaLD) on CodePen.
CSS Goey footer
Kết quả bạn xem bên dưới nha.
See the Pen CSS Goey footer by Zed Dash (@z-) on CodePen.
Simple Image Overlay Hover Effects
Kết quả bạn xem bên dưới nha.
See the Pen Simple Image Overlay Hover Effects by Arnaud Balland (@ArnaudBalland) on CodePen.
Custom checkboxes, radio buttons and select boxes
Kết quả bạn xem bên dưới nha.
See the Pen Completely CSS: Custom checkboxes, radio buttons and select boxes by Kenan Yusuf (@KenanYusuf) on CodePen.
CSS 3d hover
Kết quả bạn xem bên dưới nha.
See the Pen World Places (CSS 3d hover) by Akhil Sai Ram (@akhil_001) on CodePen.
Same Height Cards
Kết quả bạn xem bên dưới nha.
See the Pen FlexBox Exercise #4 – Same height cards by Veronica (@veronicadev) on CodePen.
CSS Site Scroll Micro Animation
Kết quả bạn xem bên dưới nha.
See the Pen CSS Site Scroll Micro Animation by Ryan Mulligan (@hexagoncircle) on CodePen.
CSS Animations
Kết quả bạn xem bên dưới nha.
See the Pen CSS Animations: Obvious CTA Buttons by Olivia Ng (@oliviale) on CodePen.
CSS Loading Animations
Kết quả bạn xem bên dưới nha.
See the Pen CSS Loading Animations by Alex (@AlexWarnes) on CodePen.
Animated Menu Indicator
Kết quả bạn xem bên dưới nha.
See the Pen animated menu indicator — week 27/52 by Mert Cukuren (@knyttneve) on CodePen.
Bài viết liên quan:
Tổng kết:
Qua đây mình mong bài viết sẽ giúp bạn tìm được ví dụ luyện 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ẻ!
