65 Bài Tập HTML CSS Dành Cho Người Mới Bắt Đầu

65 Bài Tập HTML CSS Dành Cho Người Mới Bắt Đầu


Ngày 22 Tháng 2 Năm 2022

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.

Bài Tập HTML CSS

CSS Image Slider

 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS Scroll Barst

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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ẻ!