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

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

Kết quả bạn xem bên dưới nha .See the Pen CSS image slider w / next / prev btns và 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 và 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 màn hình hiển thị 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 và 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 3 d 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 tương quan :

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn tìm được ví dụ rèn luyện HTML CSS và nếu có vướng mắc gì cứ gửi email mình sẽ phản hồi sớm nhất hoàn toàn có thể. Rất mong bạn liên tục ủng hộ website để mình hoàn toàn có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui tươi !

Source: https://vh2.com.vn
Category : Tin Học