Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
20 Project HTML CSS Dành Cho Beginner

20 Project HTML CSS Dành Cho Beginner


Ngày 24 Tháng 1 Năm 2021

Ngày hôm nay chúng ta sẽ đi vào tìm những thủ thuật CSS giúp bạn có thể dễ dàng hơn trong việc phát triển và thiết kế web trong năm 2021 nhé!

Các Dự Án Thực Hành HTML CSS Dành Cho Người Mới Bắt Đầu

Việc sử dụng nhiều thư viện để thiết kế web thì phần nào sẽ làm tăng thời gian tải trang cũng như khó khăn trong việc áp dụng cho nhiều dự án khác nhau. Do đó ngày hôm nay mình sẽ giới thiệu đến bạn những component hay hiệu ứng được xây dựng bằng HTML và CSS thuần. Nó sẽ giúp bạn có thể sử dụng cho nhiều loại dự án web khác nhau cũng như làm tăng kỹ năng của bạn về HTML và CSS hơn. Và bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu nhé!

Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.

CSS radio buttons

Ví dụ này sẽ hướng dẫn bạn cách có thể thiết kế lại nút radio mặc định của trang web!

Tạo CSS radio buttons

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen CSS radio buttons by Angela Velasquez (@AngelaVelasquez) on CodePen.

Nguồn

Hamburger Menu

Ví dụ này sẽ hướng dẫn bạn cách có thể thiết kế một menu hiển thị trên mobile một cách đẹp mắt chỉ bằng HTML và CSS.

Tạo Hamburger Menu

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen Pure CSS Hamburger fold-out menu by Erik Terwan (@erikterwan) on CodePen.

Nguồn

Custom Checkboxes

Đây là một ví dụ về thiết kế ô checkbox cho trang web nhé!

Tạo Custom Checkboxes

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen Pure CSS custom checkboxes by Glen Cheney (@Vestride) on CodePen.

Nguồn

Modal/Popup CSS

Đây là thiết kế của modal bằng HTML, CSS thuần dành cho trang web. Bạn hãy nhấn nút có border màu xanh để thấy thông báo hiện lên nha!

Tạo Modal/Popup CSS

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen Pure css popup box by Prakash (@imprakash) on CodePen.

Nguồn

Animated Gradient Ghost Button

Ví dụ này giúp bạn có thể tạo hiệu ứng chuyển động màu cho border đường dẫn và nội dung của nó ở trong trang web.

Tạo Animated Gradient Ghost Button

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen Animated Gradient Ghost Button Concept by Arsen Zbidniakov (@ARS) on CodePen.

Nguồn

CSS Select

Đoạn mã dưới đây giúp chúng ta có thể thiết kế lại thẻ select mặc định ở trong HTML.

Tạo CSS Select

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen Pure CSS Select by Raúl Barrera (@raubaca) on CodePen.

Nguồn

CSS TABS

Ví dụ này giúp bạn có thể tạo ra component tab bằng HTML và CSS. Bạn hãy nhấn vào 2 tiêu đề Tab ở phía trên Description hoặc Specification để thấy kết quả nhé!

Tạo CSS TABS

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen Pure CSS Tabs by Wallace Erick (@wallaceerick) on CodePen.

Nguồn

DropDown Menu

Đoạn mã này giúp bạn có thể dễ dàng tạo ra dropdown menu component cho trang web chỉ bằng hai ngôn ngữ HTML và CSS. Bạn hãy nhấn vào hai đường dẫn WordPress hoặc Web Design trong thanh tiêu đề để thấy kết quả nhé!

Tạo CSS TABS

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen Pure CSS DropDown Menu by Andor Nagy (@andornagy) on CodePen.

Nguồn

Accordion CSS

Ví dụ này sẽ chỉ bạn cách tạo component Accordion cho trang web của mình!

Tạo Accordion CSS

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen Pure CSS Accordion by Raúl Barrera (@raubaca) on CodePen.

Nguồn

CSS Image Slider

Ví dụ này sẽ chỉ ccho bạn cách tạo component Image Slider Cho Trang Web!

Tạo CSS Image Slider

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen CSS image slider w/ next/prev btns & nav dots by Avi Kohn (@AMKohn) on CodePen.

Nguồn

CSS Progress

Ví dụ này sẽ hướng dẫn bạn cách tạo thanh tiến trình với thiết kế đẹp mắt cho trang web của mình.

Tạo CSS Progress

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen Pure CSS Progress by Rafael González (@rgg) on CodePen.

Nguồn

SIDEBAR MENU

Đây là một ví dụ về sildebar menu cho trang web bằng HTML và CSS.

Tạo SIDEBAR MENU

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen PURE CSS SIDEBAR TOGGLE MENU by Jelena Jovanovic (@plavookac) on CodePen.

Nguồn

Loaders kit

Đây đoạn mã giúp bạn có thể xây dựng hiệu ứng Loader cho trang web bằng HTML, CSS.

Tạo Loaders kit

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen Pure CSS Loaders kit by Viduthalai Mani (@viduthalai1947) on CodePen.

Nguồn

Hover Button

Đây là một ví dụ về hiệu ứng hover cho button nhé.

Tạo Hover Button

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen Button Hover by Katherine Kato (@kathykato) on CodePen.

Nguồn

Animated Background

Đây là một ví dụ về hiệu ứng chuyển động background cho trang web.

Tạo Animated Background

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen Pure Css Animated Background by Mohammad Abdul Mohaiman (@mohaiman) on CodePen.

Nguồn

Button Hover Effect

Đây là một hiệu ứng hover khác cho button mà bạn có thể dễ dàng áp dùng vào trang web của mình.

Tạo Button Hover Effect

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen CSS button hover effect by Julia (@sfoxy) on CodePen.

Nguồn

CSS Bars

Ví dụ này sẽ giúp bạn tìm hiểu cách tạo CSS Bars cho trang web.

Tạo CSS Bars

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen Pure CSS Bars by Rafael González (@rgg) on CodePen.

Nguồn

Toggle Buttons

Đây là một ví dụ về component toggle button bằng HTML, CSS. Để hiểu rõ hơn bạn xem đoạn mã sau đây nhé.

Tạo Toggle Buttons

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh (@himalayasingh) on CodePen.

Nguồn

Circle Menu

Ví dụ này sẽ giúp bạn tìm hiểu cách tạo ra menu dưới dạng hình tròn cho trang web của mình.

Tạo Circle Menu

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen 🌟 Circle Menu #PureCss 🌟 by 0guzhan (@0guzhan) on CodePen.

Nguồn

Facebook Emoji Reactions

Nếu như bạn muốn tạo hiệu ứng cảm xúc trên Facebook bằng HTML, CSS thì có thể xem đoạn mã bên dưới nhé!

Tạo Facebook Emoji Reactions

Và phía dưới là đoạn mã trên Codepen nhé!

See the Pen Facebook Emoji Reactions | Pure CSS by Ashish Bardhan (@AshBardhan) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những thủ thuật CSS hữu ích dành cho việc phát triển, thiết kế web 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ẻ!